毕业论文写作
计算机毕业设计中html+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>
<style>
/*重置，也就是清理不干净的标签*/
*{ font-size:12px; font-family:"宋体"; color:#444;margin:0 auto;}/*是共用的意思*/
body{ margin:0; background:#161616;}
a{ text-decoration:none; display:block; color:#FFF;}
img{ border:none; display:block}
ul li{list-style:none; margin:0; padding:0;}
input{ border:none;}
/**/
.headed{width:952px;height:140px;} /*这个是块的整体高*/
.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:#f88c00;}
.top_right span:hover{ color:#F93;}
.login{float:right;height:55px; padding-top:20px;width:726px;}
.login a{float:right; margin-left:5px;}
.nav{width:952px;height:102px;}
.navleft{ float:left;width:400px; }
.navleft ul{ padding-left:0; list-style:none; margin-left:0;}
.navleft li{float:left; padding-right:30px; padding-top:20px;}
.navleft a{ color:#999;}
.navright{float:right;width:525px; padding-top:20px;}
.navright a{float:right; margin-left:50px;}
.navright img{float:left;}
.buy{ color:#c0973d;}
/*产品系列展示*/
.product a{ padding-bottom:40px;}
.footer{height:154px; width:952px; margin-top:25px}
.footer_left{width:173px; height:153px;float:left; }
.footer_left input{ background:#282828; 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!---->
<div class="headed">
<div class="top">
<div class="logo">
<img src="images/logo.png" />
</div>
<div class="top_nav">
<div class="top_right">
<a href=""><img src="images/man.png" /><span class="man">型男手册</span></a>
<a href=""><img src="images/sina.png" /><span>微博互动</span></a>
<a href=""><img src="images/vidio.png" /><span>视频直播</span></a>
<a href=""><img src="images/Evaluation.png" /><span>测评中心</span></a>
</div>
<div class="login">
<a href=""><span>注册</span></a><a href=""><span>登录</span></a>
</div>
</div>
</div>
<div class="nav">
<div class="navleft">
<ul>
<li><a href="">护肤</a></li>
<li><a href="">护发</a></li>
<li><a href="">彩妆</a></li>
<li><a href="">染发</a></li>
<li><a href="">男士</a></li>
</ul>
</div>
<div class="navright">
<a href=""><img src="images/buy.png" /><span class="buy">电子商城</span></a>
<a href=""><span>品牌故事</span></a>
<a href=""><span>会员专区</span></a>
</div>
</div>
</div>
<!--PRODUCT-->
<div class="product">
<a href=""><img src="images/youthcode.png" /></a>
<a href=""><img src="images/shine.png" /></a>
<a href=""><img src="images/pure.png" /></a>
<a href=""><img src="images/brandnew.png" /></a>
<a href=""><img src="images/brand.png" /></a>
<a href=""><img src="images/beauty.png" /></a>
<a href=""><img src="images/loreal.png" /></a>
</div>
<!--footer-->
<div class="footer">
<!--footer_left-->
<div class="footer_left">
<input><a class="mail" href=""><img src="images/infor.png" /></a>
</div>
<!--footer_middle-->
<div class="footer_middle">
<div class="footer_first">
<a href=""><span>联系我们</span></a>
<a href=""><span>销售网点</span></a>
<a href=""><span>网站地图</span></a>
</div>
<div class="footer_vip">
<a href=""><span>2013年会员积分况礼</span></a>
<a href=""><span>其它国家地区和网站</span><img src="images/sanjiao.png" /></a>
</div>
<div class="footer_phone">
<p>巴黎欧莱雅顾客关怀中心：400-821-5098 会员积分兑礼服务热线：400-820-0660</p>
</div>
<div class="footer_copyright">
<p>沪ICP备11031739号-1</p>
</div>
</div>
<!--footer_right-->
<div class="footer_right">
<img src="images/logoparis.png" />
</div>
</div>
2.css放的地方：
biyebang
QQ：629001810
