HTML+CSS简单实例（一）

àì夳堔傛蜴生んèń 2022-05-18 10:37 139阅读 0赞

# HTML+CSS简单实例（一） #

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

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

1.  代码内容：

<!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>
    
    <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>
    
    <div class="footer">
          
          <div class="footer_left">  
               <input><a class="mail" href=""><img src="images/infor.png" /></a>
          </div>
          
          <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>
          
          <div class="footer_right">
              <img src="images/logoparis.png" />
          </div>
    </div>
    </body>
    </html>

2.css放的地方：  
![这里写图片描述][70]  
![这里写图片描述][70 1]

[https_blog.csdn.net_u010871058_article_details_78511848]: https://blog.csdn.net/u010871058/article/details/78511848
[70]: /images/20220518/426eecf36b79405b82b48d0a708e85e1.png
[70 1]: /images/20220518/e77cc82a0b354beaac7787549dea7b92.png