网页制作CSS及DIV布局的一些小技巧

[复制链接]
查看: 18|回复: 1
  • TA的每日心情
    慵懒
    2018-4-28 09:37
  • 1459

    主题

    1479

    帖子

    11万

    积分

    管理员

    小语

    Rank: 9Rank: 9Rank: 9

    积分
    110351
    发表于 2018-3-19 16:07:35 | 显示全部楼层 |阅读模式

    1.超链接访问过后hover样式就不出现的问题?

    被点击访问过的超链接样式不在具有hover和active了, 解决方法是改变CSS属性的排列顺序: L-V-H-A

    a:hover ,一直也没出现什么问题,后来发现ie6下a:visited 和 ff下的颜色不一致,这才发现这一个问题。看来没有问题也不代表书写正确。

    2.IE6的双倍边距BUG

    例如:

    body {margin:0}
    div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }

    浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

    ps:刚开始接触这一工作的时候真的是不知道怎么回事,还以为是各个浏览器之间的解释不同,制作的时候只能小心意义的以ie6的宽度来定义,可惜ff 和ie经常预览效果不一致,被某些人抓住不放,当时很是气氛和郁闷,一气之下疯狂百度和谷歌,可惜那时候抓不住关键词,走了不少弯路才找到问题答案,好在现在解决了。Y(^_^)Y

    3.为什么FF下文本无法撑开容器的高度?

    标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

    div { height:auto!important; height:200px; min-height:200px; }

    4.为什么web标准中IE无法设置滚动条颜色了?

    原来样式设置:

    body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }

    解决办法是将body换成 html

    ps: 当时被要求要重新定义滚动条的时候,我查到了两个方法,一种如上,一种是js仿制滚动条,我应用的是上面的这种,但是发现不兼容IE,后来不了了之了,再后来偶然间才发现了这个解决办法。

    5.为什么无法定义1px左右高度的容器?

    IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

    6.怎么样才能让层显示在FLASH之上呢?

    解决的办法是给FLASH设置透明:

    7.怎样使一个层垂直居中于浏览器中?

    这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

    ps:margin的值就是div宽度的1/2;

    8、 firefox嵌套div标签的居中问题的解决方法

    假定有如下情况:

    如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常;但是在 Firefox中b却会是居左的。

    解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为:margin: 0 auto;。

    9、DIV起初布局和CSS的大方向规划

    * {margin:0; padding:0;word-break:break-all;}
    body {background:#eeeeee url(../images/QZZT_head_bg.jpg) top center no-repeat;padding:0; margin:0; color:#333333; font-family:”宋体”; }
    a {color:#333333;text-decoration:none; }
    a:hover {color:#ba2636;text-decoration:underline; }
    ul, li, span, img{ padding:0; margin:0; list-style:none; }
    img{border:none;}
    .F12 { font-size:12px; }
    .F12 { color:#333333; }
    .red { color:#CC0000; }
    a.red { color:#CC0000; text-decoration:none; }
    a.red:hover { color:#CC0000; text-decoration: underline; }
    /*——-边框————–*/
    .border3 { border:1px solid #e6e6e6; }
    .border2 {border-left:1px solid #d78327;border-right:1px solid #d78327;border-bottom:1px solid #d78327;}
    .border1 {border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;}
    /*通用样式*/
    .divline { height:10px; line-height:10px; width:auto; overflow:hidden; clear:both; }/*分割空间 折行*/
    .clearboth { width:auto; height:1px; margin-top:-1px; overflow:hidden; clear:both; }/*清除浮动实现自动折行 无高度*/

    页面起初的CSS设定一定要关系到你后面再操作中的便利和出错,所以这段代码的使用,是防止后面可能出现的错误。

    “*”这个大家都知道,是通配符,也就是所有的页面内定义的对象,都会配置这一样式,里面的word-break:break-all是要求必须在限定范围内折行,这样你做出的框内文字才会在限定范围内折行。当然,如果不折行,而是自动适应,那就没有必要用这段样式了。

    body中的定义我想就不用多说了,padding,margin,border不特殊情况下,都为0。

    整体的链接样式,大方向的,也就是默认的,可以设定一个a和a:hover,这个是你页面中出现最对颜色的链接样式。

    ul,li.span,img这些也最好把padding和margin的值设为0,另外ul和li中的列表标记设成none,便于后续操作中可以自己调整。

    文字的大小,文字的颜色,可以用组合样式,比如上面的F12,代表12px字体,如果我现在用12px的红色字体,那么class=”F12 red”。

    边框也是单独设定,然后用组合样式。注意:再具体限定高度和宽度的div时用到组合边框,一定要考虑边框所占得1px。

    关键来啦,有人可能遇到这样的问题,就是为什么我的页面是按照块做的,可惜两块怎么叠加到一起了呢?而不是一块块按照顺序向下排列的呢?那就就用这个来调,把divline的样式附加在一个空白div上,然后放在两个块中间,这样就不会使块与块之间干扰了。如果是无缝的,就用clearboth这个样式,它是无高度的。这个方法可能笨点儿,但是很奏效。

    下面我们讲DIV的布局

    10、把握大方向 布局有技巧

    两部分,上边两块的为一部分,下边一大一小为另一部分。布局很简单都是两列。要求就是先做外围的大框。

    我给写一下div中的css,以及DIV的顺序。

    明白没?这就是第一块的div写法,同样,第二块也属于两列布局,div也可以这些,这样的目的就是先顾全整体,然后再调节细节,这就是div布局。

    这是我们再添加你要明确的div的css

    CSS样式写法要明确,这样便于以后维护查找方便。而且要写好注释。

    大家应该都注意到上边的图片中,四个块块的标题样式都一样,对吧?那就写一个通用的,拿来用。这也是大方向的布局之一,也就是title通用时,写一个可以通用的样式。在这里,我就不详细写了。

    另外要注意的是,当div样式中存在float:left或者是float:right时,如果它其中有padding和margin,而且值不为0,那么一定要加一个display:inline;防止产生双倍距离,如果有的li中插入图片之后会长一些,加一个overflow:hidden,这个就是让溢出的东西隐藏起来。

    该用户从未签到

    0

    主题

    18

    帖子

    170

    积分

    注册会员

    Rank: 2

    积分
    170
    发表于 2018-4-26 14:36:02 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    精选推荐

    在线客服
    热线电话

    微信公众账号
    返回顶部 关注微信 下载APP 返回列表