devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML/CSS网页制作-----家居网_家居网制作html源代码

作者：在线问答5 | 2024-08-18 07:34:38

赞

踩

家居网制作html源代码

目录

网页优化

HTML部分代码

css部分代码

效果展示

网页优化

       1， 抽取css公共样式

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

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

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

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

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

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

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

              着陆页：公司宣传的页面

核心代码

HTML部分代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <!-- 引入样式重置表 -->
  9.     <link rel="stylesheet" href="css/reset.css">
  10.     <!-- 引入公用样式表 -->
  11.     <link rel="stylesheet" href="css/common.css">
  12.      <!-- 引入自定义样式表 -->
  13.      <link rel="stylesheet" href="css/index.css">
  14. </head>
  15. <body>
  16.     <!-- 头部 -->
  17.     <div id="header">
  18.         <div class="top">
  19.         <div class="container">
  20.             <div class="left">欢迎来到HOUSE家居网！</div>
  21.             <div class="right">
  22.                 <a href="#"><img src="images/tel.png" alt=""> 400-00-000xxx</a>
  23.                 <a href="#"><img src="images/mail.png" alt="">12345678@qq.com</a>
  24.             </div>
  25.              </div>
  26.         </div>
  27.         <!-- 菜单 -->
  28.         <div class="menu">
  29.         <div class="container">
  30.             <img src="images/logo.png" alt="" class="logo">
  31.                 <ul class="nav">
  32.                     <li class="active"><a href="#">首页</a></li>
  33.                     <li><a href="./web template.html">关于我们</a>
  34.                     <!-- 子菜单 -->
  35.                     <ul class="submenu">
  36.                         <li>子菜单一</li>
  37.                         <li>子菜单二</li>
  38.                         <li>子菜单三</li>
  39.                     </ul>
  40.                     </li>
  41.                     <li><a href="#">产品展示</a></li>
  42.                     <li><a href="#">新闻动态</a></li>
  43.                     <li><a href="#">在线留言</a></li>
  44.                     <li><a href="#">联系我们</a></li>
  45.                 </ul>
  46.             </div>
  47.         </div>
  48.     </div>
  49.     <!-- banner -->
  50.     <div id="banner">
  51.         <!-- 里面的盒子 -->
  52.         <div class="innerbox">
  53.             <!-- 标题 -->
  54.            <h1>精致生活 简单爱</h1>
  55.            <!-- 内容 -->
  56.            <p>用细节缔造美好家居,触碰你心中的柔软      给您无微不至的关怀</p>
  57.         </div>
  58.     </div>
  59.     <!-- 特色和产品 -->
  60.     <div class="container">
  61.         <!-- 特色 -->
  62.         <div id="feature">
  63.             <!-- 第一个盒子 -->
  64.             <div class="div1">
  65.                 <h3>品质高 经久耐用</h3>
  66.                 <p>当前家纺市场上的优秀代表，从织造、染色、印花及整理包装的整个流程，我们都做的十分仔细，而且在环保性上，也有很好的表现</p>
  67.             </div>
  68.             <!-- 第二个盒子 -->
  69.             <div class="div2">
  70.                 <h3>品质高 经久耐用</h3>
  71.                 <p>公司全体员团结奋进、开拓进取，为创建特色鲜明、质量一流的名牌产品而不懈努力。公司凭借高素质的人才队伍，先进的工艺和一流、完善的企业管理</p>
  72.             </div>
  73.             <!-- 第三个盒子 -->
  74.             <div class="div3">
  75.                 <h3>先进的工艺技术</h3>
  76.                 <p>家纺依靠科技进步、倡导绿色消费，让消费者充分体会到品牌文化所带来的无穷魅力，专业致力于功能性家纺，产品有真丝系列、婚庆系列、时尚系列</p>
  77.             </div>
  78.         </div>
  79.         <!-- 产品 -->
  80.         <div id="products">
  81.                 <!-- 标题 -->
  82.               <h3 class="productshow">产品展示
  83.               <span>OUR PRODUCTS</span> 
  84.               </h3> 
  85.                 <!-- 产品 -->  
  86.                 <div class="clearfix">
  87.                     <!-- 左边 -->
  88.                     <div class="leftbox  ">
  89.                             <div> <img src="images/pic01.jpg" alt="">
  90.                                 <!-- 蒙板 -->
  91.                             <div class="mask1"></div>
  92.                     </div> 
  93.                             <div> <img src="images/pic02.jpg" alt="">
  94.                                 <!-- 蒙板 -->
  95.                             <div class="mask2"></div>
  96.                             </div>
  97.                             <div> <img src="images/pic03.jpg" alt="">
  98.                             <!-- 蒙板 -->
  99.                             <div class="mask3"></div></div>
  100.                             <div> <img src="images/pic04.jpg" alt="">
  101.                             <!-- 蒙板 -->
  102.                             <div class="mask4"></div></div>
  103.                     </div>
  104.                     <!-- 右边 -->
  105.                     <div class="rightbox">
  106.                          <div> <img src="images/pic05.jpg" alt=""></div>
  107.                         
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.             </div>
  112.     </div>
  113.     <!-- 关于我们 -->
  114.     <div id="abouts">
  115.         <div class="container">
  116.          <div>
  117.              <!-- 标题 -->
  118.              <h3>关于我们</h3>
  119.              <!-- 内容 -->
  120.              <p class="tcenter">**家纺有限公司现有员工1000余人，资产总额9000万元。下设：纺纱分厂、毛巾分厂、绣花分厂、家纺分厂和进出口公司。先后在韩国、欧洲、日本、美国、澳大利亚、新加坡、中东、非洲等十几个国家和地区建立了稳定的销售网络和分公司。被省、市政府评为“先进企业”“功勋企业”“外贸出口先进单位”，同时被授予“AAA”级信用企业。**公司凭借高素质的人才队伍，先进的工艺和一流、完善的企业管理，赢得了国内外客户的良好赞誉，使得企业很快发展成为集纺、织、印、染、绣花为一体的家纺集团。公司先后荣获了“中国驰名商标”、“**名牌”、“**省著名商标”等荣誉称号。公司通过了ISO9001：2000......</p>
  121.              <!-- 阅读更多 -->
  122.              <a href="">READ MORE</a>
  123.          </div>
  124.    
  125.         </div>
  126.    
  127.         </div>
  128.     <!-- 新闻动态 -->
  129.     <div class="container clearfix">
  130.     <div id="news">
  131.          <!-- 标题 -->
  132.          <h3 class="newsactive">新闻动态 
  133.                 <span> NEWS CENTER</span> 
  134.         </h3> 
  135.         <!-- 内容 -->
  136.         <div>
  137.             <!-- 第一个盒子 -->
  138.             <div>
  139.                 <!-- 图片 -->
  140.                 <img src="./images/pic06.jpg" alt="">
  141.                 <!-- 新闻列表 -->
  142.                 <ul>
  143.                     <li>
  144.                             <a href="#">[行业资讯]</a>
  145.                             <a href="#">家纺行业的四大走向</a>
  146.                             <span>2021-10-20</span>
  147.                     </li>
  148.                     <li>
  149.                             <a href="#">[行业资讯]</a>
  150.                             <a href="#">家纺行业：从价值链的薄弱环节找到</a>
  151.                             <span>2021-10-20</span>
  152.                     </li>
  153.                     <li>
  154.                             <a href="#">[行业资讯]</a>
  155.                             <a href="#">2009年净利润同比增长34.4</a>
  156.                             <span>2021-10-20</span>
  157.                     </li>
  158.                      <li>
  159.                             <a href="#">[行业资讯]</a>
  160.                             <a href="#">家电涨价与降价背后的营销逻辑</a>
  161.                             <span>2021-10-20</span>
  162.                     </li>
  163.                     <li>
  164.                             <a href="#">[行业资讯]</a>
  165.                             <a href="#">高科技家电未来都很低碳</a>
  166.                             <span>2021-10-20</span>
  167.                     </li>
  168.                     <li>
  169.                             <a href="#">[行业资讯]</a>
  170.                             <a href="#">XX网加盟“绿书签”行动</a>
  171.                             <span>2021-10-20</span>
  172.                     </li>
  173.                 </ul>
  174.             </div>
  175.             <!-- 第二个盒子 -->
  176.             <div>
  177.                     <!-- 图片 -->
  178.                     <img src="./images/pic07.jpg" alt="">
  179.                     <!-- 新闻列表 -->
  180.                     <ul>
  181.                         <li>
  182.                                 <a href="#">[公司动态]</a>
  183.                                 <a href="#">迎|“十一”主题优惠即将开幕</a>
  184.                                 <span>2021-8-28</span>
  185.                         </li>
  186.                         <li>
  187.                                 <a href="#">[公司动态]</a>
  188.                                 <a href="#">**家纺驻外办事处相继成立</a>
  189.                                 <span>2021-9-12</span>
  190.                         </li>
  191.                         <li>
  192.                                 <a href="#">[公司动态]]</a>
  193.                                 <a href="#">**家纺驻外办事处相继成立</a>
  194.                                 <span>2021-10-13</span>
  195.                         </li>
  196.                          <li>
  197.                                 <a href="#">[公司动态]</a>
  198.                                 <a href="#">继往开来 搏击10</a>
  199.                                 <span>2021-11-30</span>
  200.                         </li>
  201.                         <li>
  202.                                 <a href="#">[公司动态]</a>
  203.                                 <a href="#">**组团参加第十七届中国（上海）</a>
  204.                                 <span>2021-12-22</span>
  205.                         </li>
  206.                         <li>
  207.                                 <a href="#">[公司动态]</a>
  208.                                 <a href="#"> **家居体验馆盛大开业</a>
  209.                                 <span>2021-12-29</span>
  210.                         </li>
  211.                     </ul>
  212.                 </div>
  213.             <!-- 第三个盒子 -->
  214.             <div>
  215.                     <!-- 图片 -->
  216.                     <img src="./images/pic06.jpg" alt="">
  217.                     <!-- 新闻列表 -->
  218.                     <ul>
  219.                         <li>
  220.                                 <a href="#">[行业资讯]</a>
  221.                                 <a href="#">家纺行业的四大走向</a>
  222.                                 <span>2021-10-20</span>
  223.                         </li>
  224.                         <li>
  225.                                 <a href="#">[行业资讯]</a>
  226.                                 <a href="#">家纺行业：从价值链的薄弱环节找到</a>
  227.                                 <span>2021-10-20</span>
  228.                         </li>
  229.                         <li>
  230.                                 <a href="#">[行业资讯]</a>
  231.                                 <a href="#">2009年净利润同比增长34.4</a>
  232.                                 <span>2021-10-20</span>
  233.                         </li>
  234.                          <li>
  235.                                 <a href="#">[行业资讯]</a>
  236.                                 <a href="#">家电涨价与降价背后的营销逻辑</a>
  237.                                 <span>2021-10-20</span>
  238.                         </li>
  239.                         <li>
  240.                                 <a href="#">[行业资讯]</a>
  241.                                 <a href="#">高科技家电未来都很低碳</a>
  242.                                 <span>2021-10-20</span>
  243.                         </li>
  244.                         <li>
  245.                                 <a href="#">[行业资讯]</a>
  246.                                 <a href="#">XX网加盟“绿书签”行动</a>
  247.                                 <span>2021-10-20</span>
  248.                         </li>
  249.                     </ul>
  250.                 </div>
  251.         </div>
  252.     </div>
  253.     </div>
  254.     <!-- footer -->
  255.     <div id="footer"> 
  256.             <!-- 内容 -->
  257.             <div class="container clearfix">
  258.                 <!-- 第一个盒子 -->
  259.                 <div class="address">
  260.                     <img src="./images/logo2.jpg" alt="">
  261.                     <p>
  262.                             中国上海市xxx区xxx路12号moumou大厦5层5xx室<br>
  263.                             400-000-xxxx   /  (021)-1234578xxx <br> 
  264.                             12385963xxxx@gmail.com  <br>
  265.                     </p>
  266.                 </div>
  267.                 <!-- 第二个盒子 -->
  268.                 <div class="links">
  269.                     <!-- 标题 -->
  270.                     <h3>快速链接</h3>
  271.                     <!-- 列表 -->
  272.                     <ul>
  273.                         <li><a href="">> 网站首页 </a></li>
  274.                         <li><a href="">> 关于我们</a></li>
  275.                         <li><a href="">> 产品展示</a></li>
  276.                         <li><a href="">> 新闻动态</a></li>
  277.                         <li><a href="">> 在线留言</a></li>
  278.                         <li><a href="">> 联系我们</a></li>
  279.                     </ul>
  280.                 </div>
  281.                 <!-- 第三个盒子 -->
  282.                 <div class="search">
  283.                     <h3>站内搜索</h3>
  284.                     <!-- 搜索框 -->
  285.                     <form action="" method="GET" class="clearfix">
  286.                         <input type="text" name="" id="" value="请输入关键字" class="txt">
  287.                         <input type="submit" value="搜索" class="btn">
  288.                     </form>
  289.                     <div>
  290.                         关注我们
  291.                         <i class="icon icon-wb"></i>
  292.                         <i class="icon icon-wx"></i>
  293.                     </div>
  294.                 </div>
  295.             </div>
  296.             <!-- 版权 -->
  297.             <p class="copyright">Copyright &copy; 2009-2011,www.xxxxxx.com,All rights reserved  沪ICP备XXXXXX号 未经同意，不得转载</p>
  298.     </div> 
  299. </body>
  300. </html>

css部分代码

  1. /* 头部 */
  2. #header .top{
  3.    
  4. 	height: 45px;
  5.     background-color: black;
  6.     line-height: 45px;
  7. }
  8. #header .top .left{
  9.     width: 132px;
  10.     height: 16px;
  11.     color: white;
  12.     line-height: middle;
  13.     float: left;
  14. }
  15. #header .top .right{
  16.     float: right;
  17. }
  18. #header .top .right a{
  19.     color: white;
  20.     margin-left: 20px;
  21. }
  22. /* 菜单 */
  23. #header .menu{
  24.     height: 73px;
  25. }
  26. /* logo */
  27. #header .menu .logo{
  28.     margin-top: 28px;
  29.     float: left;
  30.     
  31. }
  32. /* 导航 */
  33. #header .menu .nav{
  34.     height: 45px;
  35.     float: left;
  36.     margin-top: 28px;
  37.     margin-left: 500px;
  38. }
  39. #header .menu .nav>li{
  40.     float: left;
  41.     margin-left: 30px;
  42.     height: 45px;
  43.     line-height: 45px;
  44.     font-size: 16px;
  45.     /* 定位 */
  46.     position: relative;
  47. }
  48. /* 子菜单 */
  49. #header .menu .nav>li .submenu{
  50.     width: 70px;
  51.     background: #15bded;
  52.     position: absolute;
  53.     top: 40px;
  54.     left: 0;
  55.     /* 隐藏 */
  56.     display: none;
  57. }
  58. #header .menu .nav>li .submenu li{
  59.     line-height: 30px;
  60.     text-align: center;
  61.     color: white;
  62.     
  63. }
  64. #header .menu .nav>li .submenu li:not(:last-child){
  65.     border: 1px dashed white;
  66. }
  67. /* 子菜单显示 */
  68. #header .menu .nav>li:hover .submenu{
  69.     display:block; 
  70. }
  71. #header .menu .nav  li a{
  72.     color: black;
  73. }
  74. #header .menu .nav  li.active{
  75.     background: url(../images/nav_move.jpg) no-repeat center;
  76. }
  77. /* 轮播图 */
  78. #banner {
  79.    background: url(../images/banner1.jpg) no-repeat center;
  80.    padding: 165px 0 170px;
  81.    margin-top: 30px;
  82. }
  83.  /* 里面的盒子  */
  84. #banner .innerbox{
  85.     background: url(../images/border.png) no-repeat;
  86.     width: 458px;
  87.     height: 212px;
  88.     margin:0 auto;
  89. }
  90. /* 盒子内字体大小 */
  91. #banner .innerbox h1{
  92.     font-size: 42px;
  93.     color: white;
  94.     padding-top: 20px;
  95.     margin-left: 50px;
  96. }
  97. #banner .innerbox p{
  98.     width: 355px;
  99.     font-size: 20px;
  100.     color: white;
  101.     margin-top: 10px;
  102.     margin-bottom: 5px;
  103.     margin-left: 40px;
  104.     text-align: center;
  105. }
  106. /* 特色 */
  107. #feature .div1{
  108.     width: 400px;
  109.     height: 210px;
  110.     background:  blueviolet;
  111.     float: left;
  112.     margin-top: 30px;
  113.     opacity: 0.3;
  114.     color: white;
  115.     margin-bottom: 30px;
  116. }
  117. #feature .div1 h3{
  118.     text-align: center;
  119.     font-size: 24px;
  120.     padding-top: 30px;
  121. }
  122. #feature .div1 p{
  123.     font-size: 16px;
  124.     width: 300px;
  125.     text-align: center;
  126.     padding-top: 10px;
  127.     margin-left: 50px;
  128.   }
  129. #feature .div2{
  130.     width: 400px;
  131.     height: 210px;
  132.     background: beige;
  133.     float: left;
  134.     margin-top: 30px;
  135.     color: white;
  136.     margin-bottom: 30px;
  137. }
  138. #feature .div2 h3{
  139.     text-align: center;
  140.     font-size: 24px;
  141.     padding-top: 30px;
  142. }
  143. #feature .div2 p{
  144.     font-size: 16px;
  145.     width: 300px;
  146.     text-align: center;
  147.     padding-top: 10px;
  148.     margin-left: 50px;
  149.   } 
  150. #feature .div3{
  151.     width: 400px;
  152.     height: 210px;
  153.     background: blueviolet;
  154.     float: left;
  155.     margin-top: 30px;
  156.     opacity: 0.3;
  157.     color: white;
  158.     margin-bottom: 30px;
  159. }  
  160. #feature .div3 h3{
  161.     text-align: center;
  162.     font-size: 24px;
  163.     padding-top: 30px;
  164. }
  165. #feature .div3 p{
  166.     font-size: 16px;
  167.     width: 300px;
  168.     text-align: center;
  169.     padding-top: 10px;
  170.     margin-left: 50px;
  171.   }
  172. /* 产品展示 */
  173. #products .productshow{
  174.     font-size: 24px;
  175.     font-weight: normal;
  176.     line-height: 60px;
  177.     background: url(../images/nav_bg02.png) no-repeat left bottom;
  178.     margin-bottom: 30px;
  179. }
  180. #products .productshow span{
  181.     font-size: 16px;
  182.     color: #bbb8b5;
  183. }
  184. /* 产品左边 */
  185.  
  186. #products  .leftbox {
  187.     width:600px;
  188.     height: 580px;
  189.     float: left;   
  190. }
  191. #products  .leftbox div{
  192.     width: 270px;
  193.     height: 275px;
  194.     float: left;
  195.     margin-right: 30px;
  196.     margin-bottom: 30px;
  197.     position: relative;
  198. }
  199. /* 第一个div */
  200. #products  .leftbox div .mask1{
  201.     width: 270;
  202.     height: 275px;
  203.     background: url(../images/pic01-01.jpg);
  204.     position: absolute;
  205.     top:0;
  206.     left: 0;
  207.     /* 隐藏蒙板 */
  208.     display: none;
  209. }
  210. /* 显示蒙板 */
  211. #products  .leftbox div:hover .mask1{
  212.     display: block;
  213. }
  214. /* 第二个div */
  215. #products  .leftbox div .mask2{
  216.     width: 270;
  217.     height: 275px;
  218.     background: url(../images/pic02-01.jpg);
  219.     position: absolute;
  220.     top:0;
  221.     left: 0;
  222.     /* 隐藏蒙板 */
  223.     display: none;
  224. }
  225. /* 显示蒙板 */
  226. #products  .leftbox div:hover .mask2{
  227.     display: block;
  228. }
  229. /* 第三个div */
  230. #products  .leftbox div .mask3{
  231.     width: 270;
  232.     height: 275px;
  233.     background: url(../images/pic03-01.jpg);
  234.     position: absolute;
  235.     top:0;
  236.     left: 0;
  237.     /* 隐藏蒙板 */
  238.     display: none;
  239. }
  240. /* 显示蒙板 */
  241. #products  .leftbox div:hover .mask3{
  242.     display: block;
  243. }
  244. /* 第四个div */
  245. #products  .leftbox div .mask4{
  246.     width: 270;
  247.     height: 275px;
  248.     background: url(../images/pic04-01.jpg);
  249.     position: absolute;
  250.     top:0;
  251.     left: 0;
  252.     /* 隐藏蒙板 */
  253.     display: none;
  254. }
  255. /* 显示蒙板 */
  256. #products  .leftbox div:hover .mask4{
  257.     display: block;
  258. }
  259.  
  260. /* 产品右边 */
  261. #products  .rightbox div{
  262.     width: 570px;
  263.     height: 580px; 
  264.     float: left;  
  265.     margin-left: 30px;
  266.     margin-bottom: 30px;
  267.     position: relative;
  268. }
  269. #products .rightbox div img{
  270.     width: 570px;
  271.     height: 580px;
  272. }
  273. /* 关于我们 */
  274. #abouts {
  275.     height: 510px;
  276.     background: url(../images/banner3.jpg) no-repeat center;
  277. }
  278. #abouts div{
  279.     width: 690px;
  280.     padding-top:50px ;
  281.     padding-left:20px; 
  282. }
  283. /* 关于我们文字 */
  284. #abouts div h3{
  285.     font-size: 20px;
  286.     text-align: center; 
  287.     line-height: 60px;
  288.     font-weight: normal;
  289.     background: url(../images/line_bg.png) no-repeat center bottom;
  290.     margin-bottom: 20px;
  291. }
  292. #abouts div p{
  293.     font-size: 14px;
  294.     line-height: 30px;
  295.     color: #6b6b6b;
  296. }
  297. #abouts div a{
  298.     display: inline-block;
  299.     width: 170px;
  300.     height: 50px;
  301.     text-align: center;
  302.     line-height: 50px;
  303.     font-size: 14px;
  304.     color: white;
  305.     background: #25bbce ;
  306.     border-radius: 25px;
  307.     margin-left: 270px;
  308.     margin-top: 30px;
  309. }
  310. /* 新闻动态 */
  311. #news .newsactive{
  312.     font-size: 24px;
  313.     font-weight: normal;
  314.     line-height: 60px;
  315.     background: url(../images/nav_bg02.png) no-repeat left bottom;
  316.     margin-bottom: 30px;
  317.     margin-top: 30px;
  318. }
  319. #news .newsactive span{
  320.     font-size: 16px;
  321.     color: #bbb8b5;
  322.     
  323. }
  324. #news div>div{
  325.     width: 370px;
  326. }
  327. #news div>div img{
  328.     width:380px;
  329.     height: 250px;
  330. }
  331. #news div>div ul li{
  332.     line-height: 34px;
  333.     border-bottom: 1px dashed #d9d9dc;
  334. }
  335. #news div>div ul li a{
  336.     font-size: 14px;
  337.     color: #6a6a6a;
  338.     padding-right: 5px;
  339. }
  340. #news div>div ul li span{
  341.     font-size: 12px;
  342.     color: #a5a5b1;
  343.     float: right; 
  344. }
  345. #news div>div ul li a:first-child{
  346.     color: #09bbec;
  347. }
  348. /* 盒子间距 */
  349. #news div div{
  350.     float: left;
  351.     margin-right: 30px;
  352. }
  353. /* 页脚 */
  354. #footer{
  355.     background:#141414;
  356.     margin-top: 30px;
  357.     font-size: 14px;
  358.     color: #818388;
  359. }
  360. #footer .address{
  361.     width: 440px;
  362.     margin-top: 30px;
  363.     float: left;
  364. }
  365. #footer .address img{
  366.     width: 156px;
  367.     height: 47px;
  368. }
  369. #footer .address p{
  370.     background: url(../images/icon.jpg) no-repeat left center ;
  371.     line-height: 44px;
  372.     padding-left: 30px;
  373.     margin-top: 25px;
  374. }
  375. /* 第二个盒子 */
  376. #footer .links{
  377.     width: 320px;
  378.     float: left;
  379.     margin-top: 20px;
  380.     margin-left: 30px;
  381. }
  382. #footer .links h3{
  383.     font-size: 18px;
  384.     color: white;
  385.     line-height: 60px;
  386.     background: url(../images/nav_bg02.png) no-repeat;
  387.     margin-bottom: 20px;
  388. }
  389. #footer .links ul li{
  390.     width: 160px;
  391.     float: left;
  392.     line-height: 40px;
  393.  
  394. }
  395. #footer .links ul li a{
  396.     color: #818388;
  397. }
  398. /* 第三个盒子 */
  399. #footer .search{
  400.     width: 320px;
  401.     float: left;
  402.     margin-top: 20px;
  403.     margin-bottom: 40px;
  404.     margin-left: 50px;
  405. }
  406. #footer .search {
  407.     width: 320px;
  408.     float: left;
  409. }
  410. #footer .search h3{
  411.     font-size: 18px;
  412.     color: white;
  413.     line-height: 60px;
  414.     background: url(../images/nav_bg02.png) no-repeat;
  415.     margin-bottom: 20px;
  416. }
  417. /* 搜索 */
  418. #footer .search .txt {
  419.     float: left;
  420.     width: 220px;
  421.     height: 46px;
  422.     border: 0;
  423.     font: 16px;
  424.     color: #818388;
  425.     text-indent: 10px;
  426.     margin-bottom: 30px;
  427. }
  428. #footer .search .btn {
  429.     float: left;
  430.     width: 100px;
  431.     height: 46px;
  432.     border: 0;
  433.     font: 16px;
  434.     color: white;
  435.     background: #3aa27f;
  436.     float: left;
  437.     margin-bottom: 30px;    
  438. }
  439. #footer .search .txt{
  440.     background: #333333;
  441. }
  442. #footer .search input{
  443.     margin-bottom: 10px;
  444.     margin-top: 10px;
  445. }
  446. /* 精灵图 */
  447. .icon{
  448.     display: inline-block;
  449.     /* 第一步设置宽高 */
  450.     width: 30px;
  451.     height: 30px;
  452.     /* 第二步设置背景 */
  453.     background: url(../images/fenxiang.png) no-repeat;
  454.     vertical-align: middle;
  455.     margin-left: 5px;
  456.    }
  457.    /* 第三步具体实现坐标 */
  458. .icon-wx{
  459.        background-position: -43px 0px;
  460. }
  461. .icon-wb{
  462.     background-position: -1px  0px;
  463. }
  464. #footer .copyright{
  465.     line-height: 75px;
  466.     background: black;
  467.     text-align: center;
  468. }

效果展示

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/996616
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号