HTML+CSS简单实例（一）

最新推荐文章于 2024-08-01 09:59:14 发布

m0_37655876

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量1.7w

点赞数 14

分类专栏： HTML+CSS 文章标签： HTML CSS

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML+CSS简单实例（一）

本实例参考https://blog.csdn.net/u010871058/article/details/78511848

目的：实现简单欧莱雅网站。

代码内容：

 <!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>
</body>
</html>