转载欧莱雅DIV+CSS布教程（我从新分析+优化布局）

天道酬勤0521

北京/平面设计师/9年前/171浏览

版权

天道酬勤0521

文章适合刚学会所有DIV+CSS的代码标签及语法的基友，一步步写完之后你会发现文章代码大部分用了float标签，到最后footer部分会跑到nav下面，内容的上面，所以我加了个相对定位1950px，才拉下来！文章助于基友们对布局f的提高!

*{ font-size:12px; font-family:"宋体"; color: #C09;margin:0 auto;} /*是共用的意思整天布局*/

body{ margin-top:0px;background:#161616;}

a{ display:block; text-decoration:none; color:#093;}

img{ border:none; display:block;}

ul li{list-style:none; margin:0; padding:0;}

input{ border:none;}

/*--*/

.headed{width:952px;height:140px;} /*这个是块的整体高其实是DIV的整体高度*/

.top{height:87px;overflow:hidden;} /*这个top是指LOGO和top_nav,overflow是溢出的意思，这个就是子级溢出后父级的如何控制溢出部分？注：要把overflow加给父级*/

.top_nav{width:726px;height:87px;float:right;} /*这个是相对测评中心，视频直播等，相对logo就要向右浮动*/

.logo{float:left;} /*logo相对就要向左浮动*/

.top_right{width:726px;

float:right;

margin-left:7px;

}

.top_right a{float:right;

width:92px;

height:22px;

color:#FFF;

padding-top:10px;

}

.top_right img{float:left; padding-left:18px;}

.top_right span{ color:#FFF;

float:right;

width:52px;

margin-top:4px;}

.top_right .man{ color: #03F;}

.top_right span:hover{ color:#F93;}

.login{float:right;height:55px; padding-top:20px;width:726px;}

.login a{float:right; margin-left:5px;}

.login span { color:#FF6}

.login span:hover{ color:#F0C;}

.nav{width:952px;height:102px;}

.navleft{ float:left;width:400px; }

.navleft ul{ list-style:none; margin-left:0;padding-left:0;}

.navleft li{float:left; padding-right:20px; padding-top:20px;}

.navleft a{ color: #0F0;}

.navleft a:hover{ color:#FF6; }

.navright{float:right;width:525px; padding-top:20px;}

.navright a{ float:right;margin-left:30px;}

.navright a img{ float:left;}

.navright a span:hover{ color:#3F3}

.buy{ color:#c0973d;}

.product{ margin-top:-50px; } /*内容向上拉动50像素*/

.product a{ padding:20px;}

.footer{

height: 154px;

width: 952px;

margin-top: 5zpx;

position:relative; top:1950px; /*后来写完之后，footer 浮动到中间内容上了，有相对定位固定头部加内容后*/

}

.footer_left{width:173px; height:153px;float:left; }

.footer_left input{ background: #060; width:147px; height:24px;}

.footer_left .mail{float:right;}

.footer_middle{float:left; width:640px;}

.footer_first {width:480px;}

.footer_first a{ float:left; width:80px; border-right:1px solid #FFF;color:#FFF;}

.footer_first span{ margin-left:14px;color:#FFF;}

.footer_vip{ float:left;}

.footer_vip a{ padding-left:15px; float:left;}

.footer_vip span{ color:#FFF;}

.footer_vip img{float:right;}

.footer_phone {width:480px; text-align: center; height:12px; padding-top:14px;}

.footer_phone {margin-top:10px;}

.footer_copyright p{ padding-top:24px; text-align:center;}

.footer_right{ float:right;}

</style>

</head>

<body>

</div>

</div>

</div>

<ul>

</ul>

</div>

</div>

</a><a href=""><img src="欧莱雅网站首页设计/images/youthcode.png"/></a>

</div>

</div>

</div>

<a href=""><span>2013年会员积分况礼</span></a>

<a href=""><span>其它国家地区和网站</span><img src="欧莱雅网站首页设计/images/sanjiao.png"/></a>

</div>

<p>巴黎欧莱雅顾客关怀中心：400-821-5098 会员积分兑礼服务热线：400-820-0660</p>

</div>

<p>沪ICP备11031739号-1</p>

</div>

</div>

</body>

</html>

声明

原创文章平面

评论你的想法~

表情

喜欢TA的作品吗？喜欢就快来夸夸TA吧！