网页设计 百分网手机站

网站建设怎样控制大图片的网页宽度

时间:2020-08-04 12:41:59 网页设计 我要投稿

网站建设怎样控制大图片的网页宽度

  网站建设如何让大图片不超过网页宽度?解决图片超出宽度或撑破p css布局方法,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网!

  1、在文章中发布图片的时候将图片编辑缩小

  2、通过对对应p的css来设置显示的图片最宽宽度

  3、通过css对图片设定宽度。

  具体过程:

  通过css来控制代码如下(cmcss是对应父级类名):

  .cmcss {margin: auto;width: 600px;}

  .cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}这种图片第一次加载时候图片不能显示

  直接通过对对应的p内的内容图片宽度设置代码如下:

  .cmcss img{ width:500px;} 宽度自定,但是不推荐此方法,因为设置后此p布局内的图片将全部宽度为500px,那样将造成图片小的,被放大显示模糊。

  可以通过对图片设置最宽css可以使用max-width来设置,但是IE6不支持,但是可以使用浏览器的`css hack来设置代码如下

  .cmcss img{max-width:500px;_width:500px;}

  图片撑破布局原因

  1、由于浏览器版本低(微软IE6)

  2、没有设置p布局的宽度

  【拓展阅读】

  网站制作用CSS可控制超链接样式,一般分为四个部分:a:active是超级链接的初始状态;a:hover是把鼠标放上去时的状况;a:link 是鼠标点击时;a:visited是访问过后的情况。

  CSS控制超链接的三种方法

  1、通过对应超链接外的父级的css类的css样式来控制超链接的样式

  案例超链接代码

  CSS

  对应CSS代码

  .yangshi a{color:#333;text-decoration:none; }

  .yangshi a:hover {color:#CC3300;text-decoration:underline;}

  2、通过链接内设置类控制超链接样式css方法

  案例超链接代码CSS

  对应CSS代码

  a.yangshi{color:#333;text-decoration:none; }

  a.yangshi:hover {color:#CC3300;text-decoration:underline;}

  通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式

【网站建设怎样控制大图片的网页宽度】相关文章:

网页设计:自适应网页所有屏幕宽度解析10-04

网页大图片如何设计09-28

网站制作之网页设计的三大要素10-02

网站设计常用网页版式09-25

网站网页设计知识09-09

网站网页设计的小知识09-09

网页图片设计的常用技巧09-23

Dreamweaver怎样制作网页模板09-16

网站网页动画设计的技巧10-04

网页设计:网站布局的23个步骤10-04