您的位置:阿里西西 > 前端技术 > XHTML标准 > 详细内容

2天驾驭DIV+CSS!第七课

  互联网   kwoojan   2009-06-27   点击:   我要评论
平时我们在布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。

我们先把上节课最后总结一句话拿出来
如果用position布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。
如果你还是不能太明白这句话,我们就做个实例,把我们第5节页面的头部blog区域用定位(position)来布局一下

HTML代码和原来的没有区别:
<div id="Logo">
    <a href="#" id="logoLink"></a>
</div>
CSS代码就有变化了,咱先看看原来的CSS代码
#Logo{
    height:80px;
}
#logoLink{
    display:block;
    width:173px;
    height:46px;
    background:url(../Images/logo.gif) no-repeat;
    float:left;
    margin-top:20px;
}
原来是用“浮动+外边距”布局的,将#logoLink定位在距离顶部20像素,左侧0像素的地方;
如果用position的方法,CSS就应该这么写,首先给#logo加上“position:relative;”,给#logoLink加上“position:absolute;”,然后让#logoLink距离上面20像素,左侧0像素,具体代码如下:
#Logo{
height:80px;
position:relative;/*相对定位*/
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
position:absolute;
top:20px;
left:0;
}
怎么样效果和原来的一样吧,就是这么简单.
什么?CSS代码多了?的确,由原来的两句话,变成现在的四句,但是有没有发现,就靠Position我们就可以将Logo随意的定位于任何一个地方!这就是它的灵活的地方!如果在页面顶部在有一行“加入收藏 设为首页 RSS订阅”如下图,你是不是也可以很方便的将它们定位于右上角呢~

但是定位(position)有一个缺点,不会自适应内部元素的高度,所以平时我们在布局页面的时候,如果某个或者某些模块高度永远不变,就可以用定位,但是KwooJan建议大家布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。
=========================================================================
最后,请大家记住我这句话:“布局页面,Float为主,Position为辅!
=========================================================================
好,我们有关页面布局的教程,算是已经完结.
如果能悟透每节课内容,你现在就可以拍着胸脯说“我是DIV+CSS高手!”哈哈,不过你要知道,DIV+CSS的叫法是不标准的,应该叫... ...
什么你想不起来了?!
咣当!~~
本节课源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>css学习 alixixi.com整理</title>
</head>

<body>
<div id="Logo">
 <a href="#" id="logoLink"></a>
</div>
<div id="Nav">
 <ul>
     <li><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">LINKS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
</body>
</html>
/* 公共部分 */
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
/*头部logo区域*/
#Logo{
 height:80px;
 position:relative;/*相对定位*/
}
#logoLink{
 display:block;
 width:173px;
 height:46px;
 background:url(../Images/logo.gif) no-repeat;
 position:absolute;
 top:20px;
 left:0;
}
/*导航条*/
#Nav{height:42px;}
#Nav ul{
 height:42px;
 list-style:none;
 background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
 display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/
 height:42px; 
 color:#FFF;
 padding:0 10px;
 line-height:42px;
 font-size:14px;
 font-weight:bold;
 font-family:Arial;
 text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/
 float:left;
}
#Nav ul li a:hover{background:#68acd3;}


本文来自www.cssxuexi.cn *尊重他人劳动成果,转载请自觉注明出处! 



更多关于 DIV+CSS 的文章
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行