HTML/CSS网页制作-----家居网

网页优化

HTML部分代码

css部分代码

效果展示

网页优化

1，抽取css公共样式

2，制作成模板页（母版页）

目的：减少后期其他页面的代码复制，建议把首页制作完成后，另存为一个模板页，保留相同的部分

3，网页页面分级说明（面试可能会问）

一级页面：首页新闻和产品的封面页

二级页面：网站中的各种列表页（新闻列表，产品列表）

三级页面：网站中的各种详情页

单页面：没有子页面或者列表页

着陆页：公司宣传的页面

核心代码

HTML部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入公用样式表 -->
    <link rel="stylesheet" href="css/common.css">
     <!-- 引入自定义样式表 -->
     <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div id="header">
        <div class="top">
        <div class="container">
            <div class="left">欢迎来到HOUSE家居网！</div>
            <div class="right">
                <a href="#"><img src="images/tel.png" alt=""> 400-00-000xxx</a>
                <a href="#"><img src="images/mail.png" alt="">12345678@qq</a>
            </div>
             </div>
        </div>
        <!-- 菜单 -->
        <div class="menu">
        <div class="container">
            <img src="images/logo.png" alt="" class="logo">
                <ul class="nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="./web template.html">关于我们</a>
                    <!-- 子菜单 -->
                    <ul class="submenu">
                        <li>子菜单一</li>
                        <li>子菜单二</li>
                        <li>子菜单三</li>
                    </ul>
                    </li>
                    <li><a href="#">产品展示</a></li>
                    <li><a href="#">新闻动态</a></li>
                    <li><a href="#">在线留言</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- banner -->
    <div id="banner">
        <!-- 里面的盒子 -->
        <div class="innerbox">
            <!-- 标题 -->
           <h1>精致生活 简单爱</h1>
           <!-- 内容 -->
           <p>用细节缔造美好家居,触碰你心中的柔软      给您无微不至的关怀</p>
        </div>
    </div>
    <!-- 特色和产品 -->
    <div class="container">
        <!-- 特色 -->
        <div id="feature">
            <!-- 第一个盒子 -->
            <div class="div1">
                <h3>品质高 经久耐用</h3>
                <p>当前家纺市场上的优秀代表，从织造、染色、印花及整理包装的整个流程，我们都做的十分仔细，而且在环保性上，也有很好的表现</p>
            </div>
            <!-- 第二个盒子 -->
            <div class="div2">
                <h3>品质高 经久耐用</h3>
                <p>公司全体员团结奋进、开拓进取，为创建特色鲜明、质量一流的名牌产品而不懈努力。公司凭借高素质的人才队伍，先进的工艺和一流、完善的企业管理</p>
            </div>
            <!-- 第三个盒子 -->
            <div class="div3">
                <h3>先进的工艺技术</h3>
                <p>家纺依靠科技进步、倡导绿色消费，让消费者充分体会到品牌文化所带来的无穷魅力，专业致力于功能性家纺，产品有真丝系列、婚庆系列、时尚系列</p>
            </div>
        </div>
        <!-- 产品 -->
        <div id="products">
                <!-- 标题 -->
              <h3 class="productshow">产品展示
              <span>OUR PRODUCTS</span> 
              </h3> 
                <!-- 产品 -->  
                <div class="clearfix">
                    <!-- 左边 -->
                    <div class="leftbox  ">
                            <div> <img src="images/pic01.jpg" alt="">
                                <!-- 蒙板 -->
                            <div class="mask1"></div>
                    </div> 
                            <div> <img src="images/pic02.jpg" alt="">
                                <!-- 蒙板 -->
                            <div class="mask2"></div>
                            </div>
                            <div> <img src="images/pic03.jpg" alt="">
                            <!-- 蒙板 -->
                            <div class="mask3"></div></div>
                            <div> <img src="images/pic04.jpg" alt="">
                            <!-- 蒙板 -->
                            <div class="mask4"></div></div>
                    </div>
                    <!-- 右边 -->
                    <div class="rightbox">
                         <div> <img src="images/pic05.jpg" alt=""></div>
                        
                    </div>
                </div>
            </div>
            </div>
    </div>
    <!-- 关于我们 -->
    <div id="abouts">
        <div class="container">
         <div>
             <!-- 标题 -->
             <h3>关于我们</h3>
             <!-- 内容 -->
             <p class="tcenter">**家纺有限公司现有员工1000余人，资产总额9000万元。下设：纺纱分厂、毛巾分厂、绣花分厂、家纺分厂和进出口公司。先后在韩国、欧洲、日本、美国、澳大利亚、新加坡、中东、非洲等十几个国家和地区建立了稳定的销售网络和分公司。被省、市政府评为“先进企业”“功勋企业”“外贸出口先进单位”，同时被授予“AAA”级信用企业。**公司凭借高素质的人才队伍，先进的工艺和一流、完善的企业管理，赢得了国内外客户的良好赞誉，使得企业很快发展成为集纺、织、印、染、绣花为一体的家纺集团。公司先后荣获了“中国驰名商标”、“**名牌”、“**省著名商标”等荣誉称号。公司通过了ISO9001：2000......</p>
             <!-- 阅读更多 -->
             <a href="">READ MORE</a>
         </div>
   
        </div>
   
        </div>
    <!-- 新闻动态 -->
    <div class="container clearfix">
    <div id="news">
         <!-- 标题 -->
         <h3 class="newsactive">新闻动态 
                <span> NEWS CENTER</span> 
        </h3> 
        <!-- 内容 -->
        <div>
            <!-- 第一个盒子 -->
            <div>
                <!-- 图片 -->
                <img src="./images/pic06.jpg" alt="">
                <!-- 新闻列表 -->
                <ul>
                    <li>
                            <a href="#">[行业资讯]</a>
                            <a href="#">家纺行业的四大走向</a>
                            <span>2021-10-20</span>
                    </li>
                    <li>
                            <a href="#">[行业资讯]</a>
                            <a href="#">家纺行业：从价值链的薄弱环节找到</a>
                            <span>2021-10-20</span>
                    </li>
                    <li>
                            <a href="#">[行业资讯]</a>
                            <a href="#">2009年净利润同比增长34.4</a>
                            <span>2021-10-20</span>
                    </li>
                     <li>
                            <a href="#">[行业资讯]</a>
                            <a href="#">家电涨价与降价背后的营销逻辑</a>
                            <span>2021-10-20</span>
                    </li>
                    <li>
                            <a href="#">[行业资讯]</a>
                            <a href="#">高科技家电未来都很低碳</a>
                            <span>2021-10-20</span>
                    </li>
                    <li>
                            <a href="#">[行业资讯]</a>
                            <a href="#">XX网加盟“绿书签”行动</a>
                            <span>2021-10-20</span>
                    </li>
                </ul>
            </div>
            <!-- 第二个盒子 -->
            <div>
                    <!-- 图片 -->
                    <img src="./images/pic07.jpg" alt="">
                    <!-- 新闻列表 -->
                    <ul>
                        <li>
                                <a href="#">[公司动态]</a>
                                <a href="#">迎|“十一”主题优惠即将开幕</a>
                                <span>2021-8-28</span>
                        </li>
                        <li>
                                <a href="#">[公司动态]</a>
                                <a href="#">**家纺驻外办事处相继成立</a>
                                <span>2021-9-12</span>
                        </li>
                        <li>
                                <a href="#">[公司动态]]</a>
                                <a href="#">**家纺驻外办事处相继成立</a>
                                <span>2021-10-13</span>
                        </li>
                         <li>
                                <a href="#">[公司动态]</a>
                                <a href="#">继往开来 搏击10</a>
                                <span>2021-11-30</span>
                        </li>
                        <li>
                                <a href="#">[公司动态]</a>
                                <a href="#">**组团参加第十七届中国（上海）</a>
                                <span>2021-12-22</span>
                        </li>
                        <li>
                                <a href="#">[公司动态]</a>
                                <a href="#"> **家居体验馆盛大开业</a>
                                <span>2021-12-29</span>
                        </li>
                    </ul>
                </div>
            <!-- 第三个盒子 -->
            <div>
                    <!-- 图片 -->
                    <img src="./images/pic06.jpg" alt="">
                    <!-- 新闻列表 -->
                    <ul>
                        <li>
                                <a href="#">[行业资讯]</a>
                                <a href="#">家纺行业的四大走向</a>
                                <span>2021-10-20</span>
                        </li>
                        <li>
                                <a href="#">[行业资讯]</a>
                                <a href="#">家纺行业：从价值链的薄弱环节找到</a>
                                <span>2021-10-20</span>
                        </li>
                        <li>
                                <a href="#">[行业资讯]</a>
                                <a href="#">2009年净利润同比增长34.4</a>
                                <span>2021-10-20</span>
                        </li>
                         <li>
                                <a href="#">[行业资讯]</a>
                                <a href="#">家电涨价与降价背后的营销逻辑</a>
                                <span>2021-10-20</span>
                        </li>
                        <li>
                                <a href="#">[行业资讯]</a>
                                <a href="#">高科技家电未来都很低碳</a>
                                <span>2021-10-20</span>
                        </li>
                        <li>
                                <a href="#">[行业资讯]</a>
                                <a href="#">XX网加盟“绿书签”行动</a>
                                <span>2021-10-20</span>
                        </li>
                    </ul>
                </div>
        </div>
    </div>
    </div>
    <!-- footer -->
    <div id="footer"> 
            <!-- 内容 -->
            <div class="container clearfix">
                <!-- 第一个盒子 -->
                <div class="address">
                    <img src="./images/logo2.jpg" alt="">
                    <p>
                            中国上海市xxx区xxx路12号moumou大厦5层5xx室<br>
                            400-000-xxxx   /  (021)-1234578xxx <br> 
                            12385963xxxx@gmail  <br>
                    </p>
                </div>
                <!-- 第二个盒子 -->
                <div class="links">
                    <!-- 标题 -->
                    <h3>快速链接</h3>
                    <!-- 列表 -->
                    <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>
                        <li><a href="">> 联系我们</a></li>
                    </ul>
                </div>
                <!-- 第三个盒子 -->
                <div class="search">
                    <h3>站内搜索</h3>
                    <!-- 搜索框 -->
                    <form action="" method="GET" class="clearfix">
                        <input type="text" name="" id="" value="请输入关键字" class="txt">
                        <input type="submit" value="搜索" class="btn">
                    </form>
                    <div>
                        关注我们
                        <i class="icon icon-wb"></i>
                        <i class="icon icon-wx"></i>
                    </div>
                </div>
            </div>
            <!-- 版权 -->
            <p class="copyright">Copyright &copy; 2009-2011,www.xxxxxx,All rights reserved  沪ICP备XXXXXX号 未经同意，不得转载</p>
    </div> 
</body>
</html>

css部分代码

/* 头部 */
#header .top{
   
	height: 45px;
    background-color: black;
    line-height: 45px;
}
#header .top .left{
    width: 132px;
    height: 16px;
    color: white;
    line-height: middle;
    float: left;
}
#header .top .right{
    float: right;
}
#header .top .right a{
    color: white;
    margin-left: 20px;
}
/* 菜单 */
#header .menu{
    height: 73px;
}
/* logo */
#header .menu .logo{
    margin-top: 28px;
    float: left;
    
}
/* 导航 */
#header .menu .nav{
    height: 45px;
    float: left;
    margin-top: 28px;
    margin-left: 500px;
}
#header .menu .nav>li{
    float: left;
    margin-left: 30px;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    /* 定位 */
    position: relative;
}
/* 子菜单 */
#header .menu .nav>li .submenu{
    width: 70px;
    background: #15bded;
    position: absolute;
    top: 40px;
    left: 0;
    /* 隐藏 */
    display: none;
}
#header .menu .nav>li .submenu li{
    line-height: 30px;
    text-align: center;
    color: white;
    
}
#header .menu .nav>li .submenu li:not(:last-child){
    border: 1px dashed white;
}
/* 子菜单显示 */
#header .menu .nav>li:hover .submenu{
    display:block; 
}
#header .menu .nav  li a{
    color: black;
}
#header .menu .nav  li.active{
    background: url(../images/nav_move.jpg) no-repeat center;
}
/* 轮播图 */
#banner {
   background: url(../images/banner1.jpg) no-repeat center;
   padding: 165px 0 170px;
   margin-top: 30px;
}
 /* 里面的盒子  */
#banner .innerbox{
    background: url(../images/border.png) no-repeat;
    width: 458px;
    height: 212px;
    margin:0 auto;
}
/* 盒子内字体大小 */
#banner .innerbox h1{
    font-size: 42px;
    color: white;
    padding-top: 20px;
    margin-left: 50px;
}
#banner .innerbox p{
    width: 355px;
    font-size: 20px;
    color: white;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 40px;
    text-align: center;
}
/* 特色 */
#feature .div1{
    width: 400px;
    height: 210px;
    background:  blueviolet;
    float: left;
    margin-top: 30px;
    opacity: 0.3;
    color: white;
    margin-bottom: 30px;
}
#feature .div1 h3{
    text-align: center;
    font-size: 24px;
    padding-top: 30px;
}
#feature .div1 p{
    font-size: 16px;
    width: 300px;
    text-align: center;
    padding-top: 10px;
    margin-left: 50px;
  }
#feature .div2{
    width: 400px;
    height: 210px;
    background: beige;
    float: left;
    margin-top: 30px;
    color: white;
    margin-bottom: 30px;
}
#feature .div2 h3{
    text-align: center;
    font-size: 24px;
    padding-top: 30px;
}
#feature .div2 p{
    font-size: 16px;
    width: 300px;
    text-align: center;
    padding-top: 10px;
    margin-left: 50px;
  } 
#feature .div3{
    width: 400px;
    height: 210px;
    background: blueviolet;
    float: left;
    margin-top: 30px;
    opacity: 0.3;
    color: white;
    margin-bottom: 30px;
}  
#feature .div3 h3{
    text-align: center;
    font-size: 24px;
    padding-top: 30px;
}
#feature .div3 p{
    font-size: 16px;
    width: 300px;
    text-align: center;
    padding-top: 10px;
    margin-left: 50px;
  }
/* 产品展示 */
#products .productshow{
    font-size: 24px;
    font-weight: normal;
    line-height: 60px;
    background: url(../images/nav_bg02.png) no-repeat left bottom;
    margin-bottom: 30px;
}
#products .productshow span{
    font-size: 16px;
    color: #bbb8b5;
}
/* 产品左边 */

#products  .leftbox {
    width:600px;
    height: 580px;
    float: left;   
}
#products  .leftbox div{
    width: 270px;
    height: 275px;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    position: relative;
}
/* 第一个div */
#products  .leftbox div .mask1{
    width: 270;
    height: 275px;
    background: url(../images/pic01-01.jpg);
    position: absolute;
    top:0;
    left: 0;
    /* 隐藏蒙板 */
    display: none;
}
/* 显示蒙板 */
#products  .leftbox div:hover .mask1{
    display: block;
}
/* 第二个div */
#products  .leftbox div .mask2{
    width: 270;
    height: 275px;
    background: url(../images/pic02-01.jpg);
    position: absolute;
    top:0;
    left: 0;
    /* 隐藏蒙板 */
    display: none;
}
/* 显示蒙板 */
#products  .leftbox div:hover .mask2{
    display: block;
}
/* 第三个div */
#products  .leftbox div .mask3{
    width: 270;
    height: 275px;
    background: url(../images/pic03-01.jpg);
    position: absolute;
    top:0;
    left: 0;
    /* 隐藏蒙板 */
    display: none;
}
/* 显示蒙板 */
#products  .leftbox div:hover .mask3{
    display: block;
}
/* 第四个div */
#products  .leftbox div .mask4{
    width: 270;
    height: 275px;
    background: url(../images/pic04-01.jpg);
    position: absolute;
    top:0;
    left: 0;
    /* 隐藏蒙板 */
    display: none;
}
/* 显示蒙板 */
#products  .leftbox div:hover .mask4{
    display: block;
}

/* 产品右边 */
#products  .rightbox div{
    width: 570px;
    height: 580px; 
    float: left;  
    margin-left: 30px;
    margin-bottom: 30px;
    position: relative;
}
#products .rightbox div img{
    width: 570px;
    height: 580px;
}
/* 关于我们 */
#abouts {
    height: 510px;
    background: url(../images/banner3.jpg) no-repeat center;
}
#abouts div{
    width: 690px;
    padding-top:50px ;
    padding-left:20px; 
}
/* 关于我们文字 */
#abouts div h3{
    font-size: 20px;
    text-align: center; 
    line-height: 60px;
    font-weight: normal;
    background: url(../images/line_bg.png) no-repeat center bottom;
    margin-bottom: 20px;
}
#abouts div p{
    font-size: 14px;
    line-height: 30px;
    color: #6b6b6b;
}
#abouts div a{
    display: inline-block;
    width: 170px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    color: white;
    background: #25bbce ;
    border-radius: 25px;
    margin-left: 270px;
    margin-top: 30px;
}
/* 新闻动态 */
#news .newsactive{
    font-size: 24px;
    font-weight: normal;
    line-height: 60px;
    background: url(../images/nav_bg02.png) no-repeat left bottom;
    margin-bottom: 30px;
    margin-top: 30px;
}
#news .newsactive span{
    font-size: 16px;
    color: #bbb8b5;
    
}
#news div>div{
    width: 370px;
}
#news div>div img{
    width:380px;
    height: 250px;
}
#news div>div ul li{
    line-height: 34px;
    border-bottom: 1px dashed #d9d9dc;
}
#news div>div ul li a{
    font-size: 14px;
    color: #6a6a6a;
    padding-right: 5px;
}
#news div>div ul li span{
    font-size: 12px;
    color: #a5a5b1;
    float: right; 
}
#news div>div ul li a:first-child{
    color: #09bbec;
}
/* 盒子间距 */
#news div div{
    float: left;
    margin-right: 30px;
}
/* 页脚 */
#footer{
    background:#141414;
    margin-top: 30px;
    font-size: 14px;
    color: #818388;
}
#footer .address{
    width: 440px;
    margin-top: 30px;
    float: left;
}
#footer .address img{
    width: 156px;
    height: 47px;
}
#footer .address p{
    background: url(../images/icon.jpg) no-repeat left center ;
    line-height: 44px;
    padding-left: 30px;
    margin-top: 25px;
}
/* 第二个盒子 */
#footer .links{
    width: 320px;
    float: left;
    margin-top: 20px;
    margin-left: 30px;
}
#footer .links h3{
    font-size: 18px;
    color: white;
    line-height: 60px;
    background: url(../images/nav_bg02.png) no-repeat;
    margin-bottom: 20px;
}
#footer .links ul li{
    width: 160px;
    float: left;
    line-height: 40px;

}
#footer .links ul li a{
    color: #818388;
}
/* 第三个盒子 */
#footer .search{
    width: 320px;
    float: left;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 50px;
}
#footer .search {
    width: 320px;
    float: left;
}
#footer .search h3{
    font-size: 18px;
    color: white;
    line-height: 60px;
    background: url(../images/nav_bg02.png) no-repeat;
    margin-bottom: 20px;
}
/* 搜索 */
#footer .search .txt {
    float: left;
    width: 220px;
    height: 46px;
    border: 0;
    font: 16px;
    color: #818388;
    text-indent: 10px;
    margin-bottom: 30px;
}
#footer .search .btn {
    float: left;
    width: 100px;
    height: 46px;
    border: 0;
    font: 16px;
    color: white;
    background: #3aa27f;
    float: left;
    margin-bottom: 30px;    
}
#footer .search .txt{
    background: #333333;
}
#footer .search input{
    margin-bottom: 10px;
    margin-top: 10px;
}
/* 精灵图 */
.icon{
    display: inline-block;
    /* 第一步设置宽高 */
    width: 30px;
    height: 30px;
    /* 第二步设置背景 */
    background: url(../images/fenxiang.png) no-repeat;
    vertical-align: middle;
    margin-left: 5px;
   }
   /* 第三步具体实现坐标 */
.icon-wx{
       background-position: -43px 0px;
}
.icon-wb{
    background-position: -1px  0px;
}
#footer .copyright{
    line-height: 75px;
    background: black;
    text-align: center;
}