返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

海口网站建设

服务热线:18898276627

企业新闻

DIV+CSS难点之经验总结

时间:2016-04-17 17:01

 1、网页居中显示:

    需要设置两个地方,一个是body,一个是外边框div。

    CSS:

body{
 margin:0;
 padding:0;
 text-align:center;
}
#main{
 width:760px;
 margin:0 auto;
 padding:0
}

    2、文字垂直居中显示:

    在DIV中定义一个行高与其高度相同即可。

    CSS:

.title{
 height:25px;
 line-height:25px;
 vertical-align:middle;

 }

    3、图片垂直居中显示:

    在<img>标签中加入align="absmiddle" 即可。

    4、清除浮动:

    如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码,如果在一行上只是一个DIV,好象不必清除浮动。

    CSS:

.clear{clear: both;}

    HTML示例:

<div id="main">
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
     <div class="clear"></div>
</div>
<!--清除浮动后,后面的代码排列就不会有任何变形了,不管是在IE还是FF中,都很正确-->
<div ……

    5、三列结构中的的DIV写法:

    适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。
    
    CSS:

#main{
     width:760px;
     margin:0 auto;
     }
.left{
     width:100px;
     float:left;
    }
.right{
     width:120px;
     float:right;
    }
.center{
     margin:0 120px 0 100px;
     width:auto;
    }
.clear{clear: both;}

    HTML:

<!--注意:center这个DIV的位置-->
<div id="main">
     <div class="left"></div>
     <div class="right"></div>
     <div class="center"></div>
     <div class="clear"></div>
</div>

    6、textarea在FireFox中不能自动换行的处理:

    有时我们可能会遇到这种现象,在IE中可以自动换行,但在FF中就是不行,即使加了word-break:break-all;word-warp:warp;也没有效果,怎么回事呢?

    主要原因是因为我们加入到textarea中的英文字符或代码过长,造成它误识别为一个单词所致。

    解决方法也很简单,就是在内容中,人为加一些空格,让FF自动识别为多个单词,从而就能正确换行了。

7、设置<ul>表列缩进值:

 

    默认情况下,<ul>列表是缩进两个字符显示列表项目的,我们可以通过设置负边界值达到控制其缩进值的目的。

    CSS:

ul{
 margin-left: -24px;
}

    默认值是0,负值表示向左移,正值表示向右移。

    8、水平导航条的制作示例:

    HTML代码如下:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Case Studies</a></li>
</ul>

    CSS中,首先清除ul的list-style、margin和padding:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}

    然后,可以将li的display属性设置了inline或者设置float为left,display li可能会出现bug,所以我一般用float left的方法:

ul li {
float: left;
}

ul a {
display: block;
float: left; 
padding: 0 2em;
line-height: 2.1em;
background: url(/news/programming/2016/0417/images/divider.gif) repeat-y left top;
text-decoration: none;
color: #fff;
}

ul .first a {
background: none;
}

ul a:hover {
color: #333;
}

    9、让JS广告Banner垂直居中:

    效果见本站feitec.com头部效果。

    此种现象出现在一个比JS广告高度高的容器中。采用padding及内、外补丁法都无法完美解决它在IE、FF中的效果显示。

   笔者采用相对定位加绝对设置法成功解决了这个问题。

    (1)、确定JS广告高度值,本站中是60PX;

    (2)、确定容器高度,本站是80PX(LOGO高度);

    (3)、确定偏移量为(80-60)÷2=10PX;

    (4)、处理:

    采用相对定位代码:position: relative;top:10px;来实现JS广告的垂直居中,完整代码如下:

<!--外框容器,确定了背景图片及总体定位-->
<div class="maintable" style="background:url(/news/programming/2016/0417/&);">
    <!--左边LOGO-->
    <div style="text-align:left;width:400px;float:left;"><img src="{PicUrl}/weblogo.gif" width="400" height="80" alt="飞腾设计网,创意无限,真诚永远!"></div>
    <!--右边JS广告Banner,注意要确定此容器高度-->
    <div style="text-align:center;position: relative;top:10px;height:80px;">
        ……JS广告代码…… 
    </div>
</div>


上一篇:C语言指针深度解析
下一篇:手机访问pc网站自动跳转手机端网站代码
 


浏览:次

建站流程