devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【HTML+CSS】小兔鲜儿网站首页（静态网页）_htmlcss首页代码

作者：盐析白兔 | 2024-05-23 09:03:41

赞

踩

htmlcss首页代码

目  录

一、项目介绍

二、网页示意图

三、开发流程

1.前期准备工作

2.编辑基本样式（base.css）

3.快捷导航部分

3.1 HTML部分

3.2 common.css部分

4.尾部版权部分

4.1 HTML部分

4.2 common.css部分

5.banner图部分

5.1 HTML部分

5.2 index.css部分

6.新鲜好物部分

6.1 HTML部分

6.2 index.css部分

7.生鲜部分

7.1 HTML部分

7.2 index.css部分

一、项目介绍

    小兔鲜儿网站首页是利用HTML+CSS进行开发，网站首页包括四部分内容，分别是快捷导航、banner图、新鲜好物、生鲜、尾部版权。

二、网页示意图

 

 

 

 三、开发流程

1.前期准备工作

        创建如下图所示的文件目录，css文件夹包含三个css文件，分别是base.css、common.css、index.css，images存放固定的照片，uploads存放随时更新的照片。

        base.css主要对首页的基本样式进行编辑。

        common.css主要对所有页面的重复部分进行编辑，包括快捷导航和尾部版权部分。

        index.css主要对网站首页其余部分进行编辑，包括banner图、新鲜好物、生鲜部分。

2.编辑基本样式（base.css）

  1. /* 基础公共样式 */
  2. /* 清除默认样式的代码 */
  3. /* 去除常见标签默认的 margin 和 padding */
  4. body,
  5. h1,
  6. h2,
  7. h3,
  8. h4,
  9. h5,
  10. h6,
  11. p,
  12. ul,
  13. ol,
  14. li,
  15. dl,
  16. dt,
  17. dd,
  18. input {
  19.   margin: 0;
  20.   padding: 0;
  21. }
  22.  
  23. /* 內减模式 */
  24. * {
  25.     box-sizing: border-box;
  26. }
  27.  
  28. /* 设置网页统一的字体大小、行高、字体系列相关属性 */
  29. body {
  30.   font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
  31.     "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  32.   color: #333;
  33. }
  34.  
  35. /* 去除列表默认样式 */
  36. ul,
  37. ol {
  38.   list-style: none;
  39. }
  40.  
  41. /* 去除默认的倾斜效果 */
  42. em,
  43. i {
  44.   font-style: normal;
  45. }
  46.  
  47. /* 去除a标签默认下划线，并设置默认文字颜色 */
  48. a {
  49.   text-decoration: none;
  50.   color: #333;
  51. }
  52.  
  53. /* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
  54. img {
  55.   vertical-align: middle;
  56. }
  57.  
  58. /* 去除input默认样式 */
  59. input {
  60.   border: none;
  61.   outline: none;
  62.   color: #333;
  63. }
  64.  
  65. /* 左浮动 */
  66. .fl {
  67.   float: left;
  68. }
  69.  
  70. /* 右浮动 */
  71. .fr {
  72.   float: right;
  73. }
  74.  
  75. /* 双伪元素清除法 */
  76. .clearfix::before,
  77. .clearfix::after {
  78.   content: "";
  79.   display: table;
  80. }
  81. .clearfix::after {
  82.   clear: both;
  83. }

3.快捷导航部分

3.1 HTML部分

  1.     <!-- 快捷导航 -->
  2.     <div class="shortcut"> 
  3.         <div class="wrapper">
  4.             <ul>
  5.                 <li><a href="#">请先登录</a></li>
  6.                 <li><a href="#">免费注册</a></li>
  7.                 <li><a href="#">我的订单</a></li>
  8.                 <li><a href="#">会员中心</a></li>
  9.                 <li><a href="#">帮助中心</a></li>
  10.                 <li><a href="#">在线客服</a></li>
  11.                 <li><a href="#"><span></span>请先登录</a></li>
  12.             </ul>
  13.         </div>
  14.     </div>
  15.  
  16.     <!-- 头部 -->
  17.     <div class="header wrapper">
  18.         <div class="logo">
  19.             <h1><a href="#">小兔鲜儿</a></h1>
  20.         </div>
  21.         <div class="nav">
  22.             <ul>
  23.                 <li><a href="#">首页</a></li>
  24.                 <li><a href="#">生鲜</a></li>
  25.                 <li><a href="#">美食</a></li>
  26.                 <li><a href="#">餐厨</a></li>
  27.                 <li><a href="#">电器</a></li>
  28.                 <li><a href="#">居家</a></li>
  29.                 <li><a href="#">洗护</a></li>
  30.                 <li><a href="#">孕婴</a></li>
  31.                 <li><a href="#">服装</a></li>
  32.             </ul>
  33.         </div>
  34.         <div class="search">
  35.             <input type="text" placeholder="搜一搜">
  36.             <!-- 定位实现放大镜 -->
  37.             <span></span>
  38.         </div>
  39.         <div class="car">
  40.             <span>2</span>
  41.         </div>
  42.     </div>

3.2 common.css部分

  1. /* 各个页面相同的样式表 */
  2. /* 版心 */
  3. .wrapper{
  4.     width: 1240px;
  5.     margin: 0 auto;
  6. }
  7.  
  8. .shortcut{
  9.     height: 52px;
  10.     background-color: #333;
  11. }
  12.  
  13. .shortcut .wrapper{
  14.     height: 52px;
  15. }
  16.  
  17. .shortcut .wrapper ul{
  18.     float:right;
  19. }
  20.  
  21. .shortcut .wrapper li{
  22.     float: left;
  23.     line-height: 52px;
  24. }
  25.  
  26. .shortcut .wrapper a{
  27.     padding: 0 16px;
  28.     border-right: 1px solid #666;
  29.     font-size: 14px;
  30.     color: #dcdcdc;
  31. }
  32.  
  33. .shortcut .wrapper li:nth-child(7) a{
  34.     border-right: 0;
  35. }
  36.  
  37. .shortcut .wrapper a span{
  38.     display: inline-block;
  39.     width: 11px;
  40.     height: 16px;
  41.     background-image: url(../images/sprites.png);
  42.     background-position: -160px -70px;
  43.     vertical-align: middle;
  44.     margin-right: 8px;
  45. }
  46.  
  47. /* 头部 */
  48. .header{
  49.     margin: 30px auto;
  50.     height: 70px;
  51. }
  52.  
  53. .logo{
  54.     float: left;
  55.     width: 205px;
  56.     height: 70px;
  57. }
  58.  
  59. /* logo搜索引擎优化做法 */
  60. .logo h1{
  61.     width: 205px;
  62.     height: 70px;
  63. }
  64.  
  65. .logo h1 a{
  66.     display: block;
  67.     width: 205px;
  68.     height: 70px;
  69.     background-image: url(../images/logo.png);
  70.     background-size: contain;
  71.     /* 字号归零，让h1里的字看不到 */
  72.     font-size: 0;
  73. }
  74.  
  75. .nav li{
  76.     float: left;
  77.     margin-right: 48px;
  78.     line-height: 70px;
  79. }
  80.  
  81. .nav li a{
  82.     padding-bottom: 7px;
  83. }
  84.  
  85. .nav li a:hover{
  86.     color: #27ba9b;
  87.     border-bottom:1px solid #27ba9b
  88. }
  89.  
  90. .nav{
  91.     float: left;
  92.     margin-left: 40px;
  93.     height: 70px;
  94. }
  95.  
  96. .search{
  97.     position: relative;
  98.     float: left;
  99.     margin-top: 24px;
  100.     margin-left: 34px;
  101.     width: 172px;
  102.     height: 30px;
  103.     border-bottom: 2px solid #e7e7e7;
  104. }
  105.  
  106. .search input{
  107.     padding-left: 30px;
  108.     width: 172px;
  109.     height: 28px;
  110. }
  111.  
  112. .search input::placeholder{
  113.     font-size: 14px;
  114.     color: #ccc;
  115. }
  116.  
  117. .search span{
  118.     position: absolute;
  119.     left: 2px;
  120.     top: 0;
  121.     /* display: inline-block; */
  122.     width: 18px;
  123.     height: 18px;
  124.     background-image: url(../images/sprites.png);
  125.     background-position: -79px -69px;
  126. }
  127.  
  128. .car{
  129.     position:relative;
  130.     float: left;
  131.     margin-top: 28px;
  132.     margin-left: 15px;
  133.     width: 23px;
  134.     height: 23px;
  135.     background-image: url(../images/sprites.png);
  136.     background-position: -119px -69px ;
  137. }
  138.  
  139. .car span{
  140.     /* 绝对定位，盒子具备行内块特点 */
  141.     position: absolute;
  142.     right: -13px;
  143.     top: -6px;
  144.     width: 20px;
  145.     height: 15px;
  146.     background-color: #e26237;
  147.     border-radius: 8px;
  148.  
  149.     font-size: 13px;
  150.     color: #fff;
  151.     text-align: center;
  152.     line-height: 15px;
  153.  
  154. }

4.尾部版权部分

4.1 HTML部分

  1.     <!-- 尾部（版权区域）-->
  2.     <div class="footer">
  3.         <div class="wrapper">
  4.             <div class="top">
  5.                 <ul>
  6.                     <li>
  7.                         <!-- 通过伪元素添加标签实现精灵图 -->
  8.                         <span>价格亲民</span>
  9.                     </li>
  10.                     <li>
  11.                         <span>物流快捷</span>
  12.                     </li>
  13.                     <li>
  14.                         <span>品质新鲜</span>
  15.                     </li>
  16.                 </ul>
  17.             </div>
  18.             <div class="bottom">
  19.                 <p>
  20.                     <a href="#">关于我们</a> |
  21.                     <a href="#">帮助中心</a> |
  22.                     <a href="#">售后服务</a> |
  23.                     <a href="#">配送与验收</a> |
  24.                     <a href="#">商务合作</a> |
  25.                     <a href="#">搜索推荐</a> |
  26.                     <a href="#">友情链接</a> |
  27.                 </p>
  28.                 <p>
  29.                     CopyRight@小兔鲜儿
  30.                 </p>
  31.             </div>
  32.         </div>
  33.     </div>

4.2 common.css部分

  1. /* 尾部（版权区域） */
  2. .footer{
  3.     height: 342px;
  4.     background-color: #333;
  5. }
  6.  
  7. .footer .wrapper{
  8.     width: 1393px;
  9. }
  10.  
  11. .footer .top{
  12.     padding-top: 60px;
  13.     padding-left: 135px;
  14.     height: 175px;
  15.     border-bottom: 3px solid #434343;
  16. }
  17.  
  18. .footer .top li{
  19.     position: relative;
  20.     float: left;
  21.     margin-right: 300px;
  22.     width: 195px;
  23.     height: 58px;
  24.  
  25.     line-height: 58px;
  26. }
  27.  
  28. .footer .top li:last-child{
  29.     margin-right: 0;
  30. }
  31.  
  32. /* 伪元素添加的标签是行内显示模式 */
  33. .footer .top li::before{
  34.     position: absolute;
  35.     /* display: inline-block; */
  36.     content: '';
  37.     width: 58px;
  38.     height: 58px;
  39.     background-image: url(../images/sprites.png);
  40.     vertical-align: middle;
  41. }
  42.  
  43. .footer .top li span{
  44.     margin-left: 80px;
  45.     font-size: 28px;
  46.     color: #fff;
  47. }
  48.  
  49. /* 第二个li里边的before添加背景图位置属性 */
  50. .footer .top li:nth-child(2)::before{
  51.     background-position: -64px 0;
  52. }
  53.  
  54. /* 第三个li里边的before添加背景图位置属性 */
  55. .footer .top li:nth-child(3)::before{
  56.     background-position: -130px 0;
  57. }
  58.  
  59. .footer .bottom{
  60.     padding-top:40px ;
  61.     font-size: 14px;
  62.     color: #999;
  63.     text-align: center;
  64. }
  65.  
  66. .footer .bottom a {
  67.     font-size: 14px;
  68.     color: #999;
  69. }
  70.  
  71. .footer .bottom p{
  72.     margin-bottom: 20px;
  73. }

5.banner图部分

5.1 HTML部分

  1. <!-- banner图区域 -->
  2.     <div class="banner">
  3.         <div class="wrapper">
  4.             <!-- 有多少个图，就有多少个li -->
  5.             <ul>
  6.                 <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
  7.             </ul>
  8.  
  9.             <!-- 侧导航 -->
  10.             <div class="aside">
  11.                 <ul>
  12.                     <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
  13.                     <li><a href="#">美食<span>面点 干果</span></a></li>
  14.                     <li><a href="#">餐厨<span>数码产品</span></a></li>
  15.                     <li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
  16.                     <li><a href="#">居家<span>奶粉 玩具 辅食</span></a></li>
  17.                     <li><a href="#">洗护<span>洗发水 美妆</span></a></li>
  18.                     <li><a href="#">孕婴<span>奶粉 玩具</span></a></li>
  19.                     <li><a href="#">服饰<span>男装 女装</span></a></li>
  20.                     <li><a href="#">杂货<span>户外 图书</span></a></li>
  21.                     <li><a href="#">品牌<span>品牌制造</span></a></li>
  22.                 </ul>
  23.             </div>
  24.  
  25.             <!-- 箭头 -->
  26.             <!-- prev：上一个 -->
  27.             <a href="#" class="prev"></a>
  28.             <!-- next：下一个 -->
  29.             <a href="#" class="next"></a>
  30.  
  31.             <!-- 底部原点 -->
  32.             <!-- 描述选中状态： current/active-->
  33.             <ol>
  34.                 <li></li>
  35.                 <li></li>
  36.                 <li class="current"></li>
  37.                 <li></li>
  38.                 <li></li>
  39.             </ol>
  40.         </div>
  41.     </div>

5.2 index.css部分

  1. /* banner */
  2. .banner {
  3.     height: 500px;
  4.     background-color: #f5f5f5;
  5. }
  6.  
  7. .banner .wrapper {
  8.     position: relative;
  9.     height: 500px;
  10.     background-color: pink;
  11. }
  12.  
  13. /* 侧导航 */
  14. .banner .aside{
  15.     position: absolute;
  16.     left:0;
  17.     top: 0;
  18.     width: 250px;
  19.     height: 500px;
  20.     background-color: rgba(0,0,0,.8);
  21. }
  22.  
  23. .banner .aside li{
  24.     height: 50px;
  25.     line-height: 50px;
  26. }
  27.  
  28. .banner .aside a{
  29.     position: relative;
  30.     padding-left: 35px;
  31.     padding-right: 19px;
  32.     /* 宽度和父级一样 */
  33.     display: block;
  34.     height: 50px;
  35.     font-size: 16px;
  36.     color: #fff;
  37. }
  38.  
  39. .banner .aside span{
  40.     margin-left: 15px;
  41.     font-size: 14px;
  42. }
  43.  
  44. .banner .aside a:hover{
  45.     background-color: #27ba9b;
  46. }
  47.  
  48.  
  49. /* a的里边最后的位置添加箭头 */
  50. .banner .aside a::after{
  51.     position: absolute;
  52.     right: 19px;
  53.     top: 19px;
  54.     content: '';
  55.     width: 6px;
  56.     height: 11px;
  57.     background-image: url(../images/sprites.png);
  58.     background-position:-80px -110px;
  59. }
  60.  
  61. /* 箭头部分 */
  62. .prev,
  63. .next{
  64.     position: absolute;
  65.     top:228px;
  66.     width: 45px;
  67.     height: 45px;
  68.     background-color: rgba(0,0,0,.2);
  69.     background-image: url(../images/sprites.png);
  70.     border-radius: 50%;
  71. }
  72.  
  73. .prev{
  74.     left:260px;
  75.     background-position: 15px -60px;
  76. }
  77.  
  78. .next{
  79.     right: 10px;
  80.     background-position: -23px -60px;
  81. }
  82.  
  83. /* 底部原点 */
  84. .banner ol{
  85.     position: absolute;
  86.     left: 680px;
  87.     bottom: 30px;
  88.     width: 200px;
  89.     height: 10px;
  90. }
  91.  
  92. .banner ol li{
  93.     float: left;
  94.     margin-right: 15px;
  95.     border-radius: 50%;
  96.     width: 10px;
  97.     height: 10px;
  98.     background-color:rgba(255,255,255,0.4);
  99.     cursor: pointer;
  100. }
  101.  
  102. .banner ol .current{
  103.     background-color: #fff;
  104. }

6.新鲜好物部分

6.1 HTML部分

  1.  <!-- 新鲜好物 -->
  2.     <div class="goods wrapper">
  3.         <!-- hd header 头部-->
  4.         <div class="hd">
  5.             <h2>新鲜好物 <span>新鲜出炉 品质靠谱</span></h2>
  6.             <a href="#">查看全部</a>
  7.         </div>
  8.         <!-- bd body 身体、内容 -->
  9.         <div class="bd clearfix">
  10.             <ul>
  11.                 <li>
  12.                     <a href="#">
  13.                         <img src="./uploads/new_goods_1.jpg" alt="">
  14.                         <h3>睿米无线吸尘器F8</h3>
  15.                         <div>￥<span>899</span></div>
  16.                         <b>新品</b>
  17.                     </a>
  18.                 </li>
  19.                 <li>
  20.                     <a href="#">
  21.                         <img src="./uploads/new_goods_2.jpg" alt="">
  22.                         <h3>智能环绕3D空调</h3>
  23.                         <div>￥<span>1299</span></div>
  24.                         <b>新品</b>
  25.                     </a>
  26.                 </li>
  27.                 <li>
  28.                     <a href="#">
  29.                         <img src="./uploads/new_goods_3.jpg" alt="">
  30.                         <h3>广东糯米煲仔饭</h3>
  31.                         <div>￥<span>129</span></div>
  32.                         <b>新品</b>
  33.                     </a>
  34.                 </li>
  35.                 <li>
  36.                     <a href="#">
  37.                         <img src="./uploads/new_goods_4.jpg" alt="">
  38.                         <h3>罗西机械智能手表</h3>
  39.                         <div>￥<span>3399</span></div>
  40.                         <b>新品</b>
  41.                     </a>
  42.                 </li>
  43.             </ul>
  44.         </div>
  45.     </div>

6.2 index.css部分

  1. /* 新鲜好物 */
  2. .goods .hd{
  3.     height: 114px;
  4.     line-height: 114px;
  5. }
  6.  
  7. .goods .hd h2{
  8.     float: left;
  9.     height: 114px;
  10.     font-size: 29px;
  11.     font-weight: 400;
  12. }
  13.  
  14. .goods .hd h2 span{
  15.     margin-left: 34px;
  16.     font-size: 16px;
  17.     color:#999;
  18. }
  19. .goods .hd a{
  20.     float:right;
  21.     color:#999;
  22. }
  23.  
  24. .goods .hd a::after{
  25.     content: '';
  26.     display: inline-block;
  27.     margin-left: 15px;
  28.     width: 7px;
  29.     height: 13px;
  30.     background-image: url(../images/sprites.png);
  31.     background-position: 0 -110px;
  32.     vertical-align: middle;
  33. }
  34.  
  35. .goods .bd li{
  36.     position: relative;
  37.     float: left;
  38.     margin-right: 8px;
  39.     width: 304px;
  40.     height: 405px;
  41.     background-color: #f0f9f4;
  42.     text-align: center;
  43. }
  44.  
  45. .goods .bd li:nth-child(4n){
  46.     margin-right: 0;
  47. }
  48.  
  49. .goods .bd li img{
  50.     width: 304px;
  51. }
  52.  
  53. .goods .bd li h3{
  54.     margin: 20px 0 10px 0;
  55.     font-size: 20px;
  56.     font-weight: 400;
  57. }
  58.  
  59. .goods .bd li div{
  60.     color:#9a2e1f;
  61.     font-size: 18px
  62. }
  63.  
  64. .goods .bd li span{
  65.     font-size: 24px;
  66. }
  67.  
  68. .goods .bd li b{
  69.     position: absolute;
  70.     left: 17px;
  71.     top: 18px;
  72.     width: 28px;
  73.     height: 51px;
  74.     border: 1px solid #27ba9b;
  75.     border-radius: 2px;
  76.     font-size: 18px;
  77.     color:#27ba9b;
  78.     font-weight: 400;
  79.     line-height: 24px;
  80. }

7.生鲜部分

7.1 HTML部分

  1. <!-- 生鲜 -->
  2.     <div class="shengxian wrapper">
  3.         <div class="hd">
  4.             <h2>生鲜</h2>
  5.             <a href="#" class="more">查看全部</a>
  6.             <ul>
  7.                 <li><a href="#">水果</a></li>
  8.                 <li><a href="#">蔬菜</a></li>
  9.                 <li><a href="#">肉禽蛋</a></li>
  10.                 <li><a href="#">裤装</a></li>
  11.                 <li><a href="#">衬衫</a></li>
  12.                 <li><a href="#">T恤</a></li>
  13.                 <li><a href="#">内衣</a></li>
  14.             </ul>
  15.         </div>
  16.         <div class="bd clearfix">
  17.             <div class="left">
  18.                 <a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
  19.             </div>
  20.             <div class="right">
  21.                 <ul>
  22.                     <li>
  23.                         <a href="#">
  24.                             <img src="./uploads/fresh_goods_1.jpg" alt="">
  25.                             <h3>美威 智利原味三文鱼排<br>
  26.                                 240g/袋 4片装<br>
  27.                                 海鲜年货</h3>
  28.                             <div>￥<span>59</span></div>
  29.                         </a>
  30.                     </li>
  31.                     <li>
  32.                         <a href="#">
  33.                             <img src="./uploads/fresh_goods_2.jpg" alt="">
  34.                             <h3>红功夫 麻辣小龙虾1.5kg<br>
  35.                                 4-6钱/25-32只<br>
  36.                                 火锅食材</h3>
  37.                             <div>￥<span>79</span></div>
  38.                         </a>
  39.                     </li>
  40.                     <li>
  41.                         <a href="#">
  42.                             <img src="./uploads/fresh_goods_3.jpg" alt="">
  43.                             <h3>三都港 冷冻无公害黄花鱼<br>
  44.                                 700g 2条 袋装<br>
  45.                                 海鲜水产</h3>
  46.                             <div>￥<span>49</span></div>
  47.                         </a>
  48.                     </li>
  49.                     <li>
  50.                         <a href="#">
  51.                             <img src="./uploads/fresh_goods_4.jpg" alt="">
  52.                             <h3>渔公码头 大连鲜食入味<br>
  53.                                 即食海参 辽参刺参<br>
  54.                                 调味海</h3>
  55.                             <div>￥<span>899</span></div>
  56.                         </a>
  57.                     </li>
  58.                     <li>
  59.                         <a href="#">
  60.                             <img src="./uploads/fresh_goods_5.jpg" alt="">
  61.                             <h3>越南白心火龙果4个装<br>
  62.                                 标准果400-550g<br>
  63.                                 新鲜水果</h3>
  64.                             <div>￥<span>20</span></div>
  65.                         </a>
  66.                     </li>
  67.                     <li>
  68.                         <a href="#">
  69.                             <img src="./uploads/fresh_goods_6.jpg" alt="">
  70.                             <h3>广西沃柑 新鲜水果<br>
  71.                                 柑橘1.5kg<br>
  72.                                 新鲜水果</h3>
  73.                             <div>￥<span>10</span></div>
  74.                         </a>
  75.                     </li>
  76.                     <li>
  77.                         <a href="#">
  78.                             <img src="./uploads/fresh_goods_7.jpg" alt="">
  79.                             <h3>进口 牛油果 6个装<br>
  80.                                 单果重约130-180g<br>
  81.                                 新鲜水果</h3>
  82.                             <div>￥<span>50</span></div>
  83.                         </a>
  84.                     </li>
  85.                     <li>
  86.                         <a href="#">
  87.                             <img src="./uploads/fresh_goods_8.jpg" alt="">
  88.                             <h3>泰国进口山竹5A级 500g<br>
  89.                                 新鲜水果</h3>
  90.                             <div>￥<span>60</span></div>
  91.                         </a>
  92.                     </li>
  93.                 </ul>
  94.             </div>
  95.         </div>
  96.     </div>

7.2 index.css部分

  1. /* 生鲜 */
  2. .shengxian .hd{
  3.     height: 96px;
  4.     line-height :96px;
  5. }
  6.  
  7.  
  8. .shengxian .hd h2{
  9.     float: left;
  10.     height: 96x;
  11.     font-size: 29px;
  12.     font-weight: 400;
  13. }
  14.  
  15. .shengxian .hd .more{
  16.     float:right;
  17.     color:#999;
  18. }
  19.  
  20. .shengxian .hd .more::after{
  21.     content: '';
  22.     display: inline-block;
  23.     margin-left: 15px;
  24.     width: 7px;
  25.     height: 13px;
  26.     background-image: url(../images/sprites.png);
  27.     background-position: 0 -110px;
  28.     vertical-align: middle;
  29. }
  30.  
  31. .shengxian .hd ul{
  32.     float: right;
  33.     margin-right: 65px;
  34. }
  35.  
  36. .shengxian .hd ul li{
  37.     float: left;
  38. }
  39.  
  40. .shengxian .hd ul li a{
  41.     padding: 2px 7px;
  42.     margin: 0 6px;
  43. }
  44.  
  45. .shengxian .hd ul li a:hover{
  46.     background-color: #27ba9b;
  47.     color: #fff;
  48. }
  49.  
  50. .shengxian .bd .left{
  51.     float: left;
  52.     width: 240px;
  53.     height: 610px;
  54. }
  55.  
  56. .shengxian .bd .right{
  57.     float: right;
  58.     width: 990px;
  59.     height: 610px;
  60. }
  61.  
  62. .shengxian .bd .right li{
  63.     float: left;
  64.     margin-right: 8px;
  65.     margin-bottom: 8px;
  66.     width: 240px;
  67.     height: 300px;
  68. }
  69.  
  70. .shengxian .bd .right li:nth-child(4n){
  71.     margin-right: 0;
  72. }
  73.  
  74. .shengxian .bd .right li:hover{
  75.     border: 2px solid #27ba9b;
  76. }
  77. .shengxian .bd .right li img{
  78.     width: 232px;
  79.     height: 200px;
  80. }
  81.  
  82. .shengxian .bd .right li h3{
  83.     width: 232px;
  84.     font-size: 14px;
  85.     font-weight: 700;
  86. }
  87.  
  88. .shengxian .bd .right li div{
  89.     color:#9a2e1f;
  90.     font-size: 18px
  91. }
  92.  
  93. .shengxian .bd .right li span{
  94.     font-size: 24px;
  95. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/612210
推荐阅读
相关标签

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

  

闽ICP备14008679号