0
0

WEB前端-CSS精灵技术

WEB前端-CSS精灵技术

一、css精灵技术

网址：http://mil.news.sina.com.cn/china/2018-08-31/doc-ihiixyeu1558608.shtml

示意图

  1.      网页加载每一张图片都需要对服务器进行一次请求，所以对服务器的负荷会很大，可以将多个小图放到一张大图上，每个地方使用小图片都对大图进行背景定位即可，这样只需要加载一张大图片，对服务器只做一次请求，可以减少服务器的开销，提供网站的性能

微信案例

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>微信案例</title>
  4.     <style type="text/css">
  5.         .box{
  6.             height:74px;
  7.             background:url(img/wx_bg.jpg);
  8.             padding-left:300px;
  9.         }
  10.         ul{
  11.             list-style:none;
  12.             padding:0;
  13.             margin:0;
  14.         }
  15.         li{
  16.             float:left;
  17.             margin-top:20px;
  18.             margin-right:20px;
  19.         }
  20.         a{
  21.             display:inline-block;
  22.             text-decoration: none;
  23.             color:#fff;
  24.             height:33px;
  25.             background:url(img/wxli_bg.png) left -192px;
  26.             line-height:33px;
  27.             padding-left:17px;
  28.         }
  29.         span{
  30.             display:inline-block;
  31.             height:33px;
  32.             background:url(img/wxli_bg.png) right -192px;
  33.             line-height:33px;
  34.             padding-right:17px;
  35.         }
  36.         a:hover{
  37.             color:green;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="box">
  43.         <ul>
  44.             <li><a href="#"><span>首页</span></a></li>
  45.             <li><a href="#"><span>下载吧</span></a></li>
  46.             <li><a href="#"><span>公共平台</span></a></li>
  47.         </ul>
  48.     </div>
  49. </body>

示意图

二、滑动门效果

概念：3个盒子浮动，左边和右边写宽高，负责加载两边的背景，中间的盒子宽度不定，让文字撑开 

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>滑动门</title>
  4.     <style type="text/css">
  5.         .box{
  6.             height:33px;
  7.             margin-left:300px;
  8.         }
  9.         .box div{
  10.             float:left;
  11.             height:33px;
  12.         }
  13.         .left{
  14.             width:18px;
  15.             background:url(img/left.png);
  16.         }
  17.         .center{
  18.             line-height:33px;
  19.             color:#fff;
  20.             background:url(img/center.png);
  21.         }
  22.         .right{
  23.             width:17px;
  24.             background:url(img/right.png);
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="box">
  30.         <div class="left"></div>
  31.         <div class="center">这是文字进来了</div>
  32.         <div class="right"></div>
  33.     </div>    
  34. </body>

效果图

三、ps简单操作

1.放大缩小

按住alt键滚动鼠标

示意图

2.移动

按住空格键使用鼠标抓取

示意图

3.量尺寸

使用矩形选框工具

示意图

4.采集颜色

使用吸管工具

示意图

5.文字复制

使用文本工具

示意图

6.切图片

使用切片工具

四、梅兰练习

引入字体图标css和当前文件的css

  1. <link rel="stylesheet" type="text/css" href="font/iconfont.css">
  2. <link rel="stylesheet" type="text/css" href="css/index.css">

顶部代码：

  1. <!-- 顶部开始 -->
  2. <div class="top container">
  3.     <div class="content clearfix">
  4.         <div class="welcome">您还，欢迎来到建材网！</div>
  5.         <ul>
  6.             <li><a href="#">建材首页</a></li>
  7.             <li><a href="#">我的商务室</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
  8.             <li><a href="#">我的收藏</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
  9.             <li><a href="#">建材服务</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
  10.             <li><a href="#">客服中心</a></li>
  11.             <li><a href="#">网站导航</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
  12.         </ul>
  13.     </div>
  14. </div>
  15. <!-- 顶部结束 -->

顶部css

  1. /* CSS Document */
  2. /* 公共 */
  3. *{
  4.     padding:0;
  5.     margin:0;
  6. }
  7. .container{
  8.     width:100%;
  9. }
  10. .content{
  11.     width:970px;
  12.     margin:0 auto;
  13. }
  14. ul{
  15.     list-style:none;
  16. }
  17. a{
  18.     text-decoration:none;
  19.     color:#000;
  20. }
  21. .clearfix:after{
  22.     content:"";
  23.     display:block;
  24.     clear:both;
  25. }
  26. /* 顶部 */
  27. .top{
  28.     background:#f7f7f7;
  29.     border-bottom:1px solid #d8d8d8;
  30.     line-height:26px;
  31.     font-size:12px;
  32. }
  33. .top .welcome{
  34.     float:left;
  35. }
  36. .top ul{
  37.     float:right;
  38. }
  39. .top ul li{
  40.     float:left;
  41.     padding:0 8px;
  42.     text-align:center;
  43. }
  44. .top ul li i{
  45.     font-size:12px;
  46.     margin-left:4px;
  47. }

效果图

logo和搜索html

  1. <!-- logo和导航开始 -->
  2. <div class="container">
  3.     <div class="content clearfix search">
  4.         <img src="images/logo.jpg">
  5.         <form class="search">
  6.             <input type="text" placeholder="请输入关键字">
  7.             <input type="submit" value="搜索" />
  8.         </form>
  9.     </div>
  10. </div>
  11. <!-- 导航和搜索结束 -->
  12. logo和搜索css
  13. /* 导航和搜索 */
  14. .logo{
  15.     float:left;
  16. }
  17. .search form{
  18.     float:right;
  19.     margin-top:29px;
  20.     width:528px;
  21.     height:40px;
  22.     border:1px solid #c9c9c9;
  23. }
  24. .search form input{
  25.     float:left;
  26.     border:none;
  27. }
  28. .search form input[type="text"]{
  29.     width:416px;
  30.     height:28px;
  31.     margin:5px;
  32.     margin-right:0;
  33.     border:1px solid #a6a6a6;
  34.     padding-left:4px;
  35. }
  36. .search form input[type="submit"]{
  37.     width:98px;
  38.     height:30px;
  39.     background:#2f70d0;
  40.     color:#fff;
  41.     margin-top:5px;
  42. }

效果图

导航部分html

  1. <!-- 导航部分开始 -->
  2. <div class="container">
  3.     <div class="content nav clearfix">
  4.         <ul>
  5.             <li><a class="on" href="#">首页</a></li>
  6.             <li><a href="#">建筑材料</a></li>
  7.             <li><a href="#">儿童安全座椅</a></li>
  8.             <li><a href="#">工艺美术品</a></li>
  9.         </ul>
  10.     </div>
  11. </div>
  12. <!-- 导航部分结束 -->

导航css

  1. /* 导航 */
  2. .nav{
  3.     border-bottom:2px solid #0266a3;
  4.     height:25px;
  5.     margin-bottom:10px;
  6. }
  7. .nav ul li{
  8.     float:left;
  9. }
  10. .nav ul li a{
  11.     padding:0 16px;
  12.     display:inline-block;
  13.     height:25px;
  14.     text-align:center;
  15.     line-height:25px;
  16.     font-size:14px;
  17. }
  18. .nav ul li a.on,.nav ul li a:hover{
  19.     background:#0266a3;
  20.     color:#fff;
  21. }

效果图

banner部分html

  1. <!-- banner部分开始 -->
  2. <div class="container">
  3.     <div class="content banner clearfix">
  4.         <div class="menu">
  5.             <h3>商机市场</h3>
  6.             <ul>
  7.                 <li><a href="#"><img src="images/icon_1.png"><span>建筑材料</span></a></li>
  8.                 <li><a href="#"><img src="images/icon_2.png"><span>儿童安全座椅</span></a></li>
  9.                 <li><a href="#"><img src="images/icon_3.png"><span>工艺美术品</span></a></li>
  10.                 <li><a href="#"><img src="images/icon_4.png"><span>建筑材料</span></a></li>
  11.                 <li><a href="#"><img src="images/icon_5.png"><span>儿童安全座椅</span></a></li>
  12.                 <li><a href="#"><img src="images/icon_6.png"><span>工艺美术品</span></a></li>
  13.             </ul>
  14.         </div>
  15.         <img src="images/banner.jpg" />
  16.         <div class="message">
  17.             <div class="introduce">
  18.                 <h4>建材通大众版</h4>
  19.                 <img src="images/s_logo.jpg">
  20.                 <p>
  21.                     价格实惠，量身为营销预算不多的供应商所设。了解详情
  22.                 </p>
  23.             </div>
  24.             <div class="contact">
  25.                 <span>找信息或者发信息遇到问题？</span>
  26.                 <p>
  27.                     0571-89938887
  28.                 </p>
  29.                 <button>留言咨询</button>
  30.             </div>
  31.         </div>
  32.     </div>
  33. </div>
  34. <!-- banner部分结束 -->

banner部分css

  1. /* banner */
  2. .banner>div{
  3.     float:left;
  4. }
  5. .banner .menu{
  6.     width:200px;
  7.     height:210px;
  8.     background:#ebf0f6;
  9. }
  10. .banner .menu h3{
  11.     background:#0266a3;
  12.     font-size:14px;
  13.     line-height:30px;
  14.     color:#fff;
  15.     padding-left:20px;
  16. }
  17. .banner .menu ul li a{
  18.     line-height:28px;
  19.     font-size:14px;
  20. }
  21. .banner .menu ul li a img{
  22.     vertical-align:middle;
  23.     margin:0 12px 0 8px;
  24. }
  25. .banner>img{
  26.     margin:0 9px 0 11px;
  27.     float:left;
  28. }
  29. .banner .message .introduce{
  30.     width:227px;
  31.     height:91px;
  32.     background:#f7faff;
  33.     border:1px solid #e0e6f0;
  34. }
  35. .banner .message .introduce h4{
  36.     font-size:12px;
  37.     padding-left:18px;
  38.     padding-top:7px;
  39. }
  40. .banner .message .introduce img{
  41.     margin-top:20px;
  42.     margin-left:10px;
  43.     float:left;
  44. }
  45. .banner .message .introduce p{
  46.     float:left;
  47.     width:156px;
  48.     font-size:12px;
  49.     margin-top:25px;
  50.     margin-left:10px;
  51.     line-height:20px;
  52. }
  53. .banner .message .contact{
  54.     width:229px;
  55.     height:82px;
  56.     background:#f7f7f7;
  57.     margin-top:21px;
  58.     text-align:center;
  59.     padding-top:12px;
  60. }
  61. .banner .message .contact span{
  62.     color:#999;
  63. }
  64. .banner .message .contact p{
  65.     background:url(../images/phone.jpg) 35px top no-repeat;
  66.     margin-top:9px;
  67.     color:#3f9ce0;
  68.     font-size:14px;
  69. }
  70. .banner .message .contact button{
  71.     width:74px;
  72.     height:21px;
  73.     border:none;
  74.     border:1px solid #afc6e7;
  75.     border-radius:2px;
  76.     font-size:12px;
  77.     line-height:21px;
  78.     text-align:left;
  79.     padding-left:25px;
  80.     color:#1a649d;
  81.     background:url(../images/button_bg.jpg) no-repeat 5px 2px;
  82.     letter-spacing:-1px;
  83. }

效果图

建筑材料html

  1. <!-- 建筑材料开始 -->
  2. <div class="container">
  3.     <div class="content pro1 clearfix">
  4.         <h3>建筑材料</h3>
  5.         <ul>
  6.             <li>
  7.                 <div class="pro-info">
  8.                     <a href="#"><img src="images/c1.png"></a>
  9.                     <div class="info">
  10.                         <a href="#">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</a>
  11.                         <p>
  12.                             自动换挡&nbsp;安全耐用<br>
  13.                             稳定性好&nbsp;抗氧化强
  14.                         </p>
  15.                         <span>
  16.                             <b>239.00</b>
  17.                             <s>￥386.00</s>
  18.                         </span>
  19.                     </div>
  20.                 </div>
  21.                 <div class="shopping">
  22.                     <button>立即购买</button>
  23.                     <p>限量<span>99</span>件&nbsp;已售出<span>20</span>件</p>
  24.                 </div>
  25.             </li>
  26.             <li>
  27.                 <div class="pro-info">
  28.                     <a href="#"><img src="images/c2.png"></a>
  29.                     <div class="info">
  30.                         <a href="#">威尔舒木地板12mm厚网络超值特</a>
  31.                         <p>
  32.                             防滑抗污&nbsp;清理简单
  33.                             扣型紧密&nbsp;环保健康
  34.                         </p>
  35.                         <span>
  36.                             <b>10.00</b>
  37.                             <s>￥68.00</s>
  38.                         </span>
  39.                     </div>
  40.                 </div>
  41.                 <div class="shopping">
  42.                     <button>立即购买</button>
  43.                     <p>限量<span>100</span>件&nbsp;已售出<span>8</span>件</p>
  44.                 </div>
  45.             </li>
  46.             <li>
  47.                 <div class="pro-info">
  48.                     <a href="#"><img src="images/c3.png"></a>
  49.                     <div class="info">
  50.                         <a href="#">好艺达高档太空铝三件套3500套</a>
  51.                         <p>
  52.                             经典的设计风格<br>
  53.                             油脂的产品品质
  54.                         </p>
  55.                         <span>
  56.                             <b>99.00</b>
  57.                             <s>￥447.00</s>
  58.                         </span>
  59.                     </div>
  60.                 </div>
  61.                 <div class="shopping">
  62.                     <button>立即购买</button>
  63.                     <p>限量<span>100</span>件&nbsp;已售出<span>51</span>件</p>
  64.                 </div>
  65.             </li>
  66.             <li>
  67.                 <div class="pro-info">
  68.                     <a href="#"><img src="images/c4.png"></a>
  69.                     <div class="info">
  70.                         <a href="#">好太太晾衣架&nbsp;8818&nbsp;晒被架</a>
  71.                         <p>
  72.                             自动换挡&nbsp;安全耐用
  73.                             稳定性好&nbsp;抗氧化强
  74.                         </p>
  75.                         <span>
  76.                             <b>350.00</b>
  77.                             <s>0.00</s>
  78.                         </span>
  79.                     </div>
  80.                 </div>
  81.                 <div class="shopping">
  82.                     <button>立即购买</button>
  83.                     <p>限量<span>100</span>件&nbsp;已售出<span>6</span>件</p>
  84.                 </div>
  85.             </li>
  86.         </ul>
  87.         <div class="pro-news">
  88.             <h4>建材资讯</h4>
  89.             <ul>
  90.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  91.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  92.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  93.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  94.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  95.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  96.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  97.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  98.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  99.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  100.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  101.                 <li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
  102.             </ul>
  103.         </div>
  104.     </div>
  105. </div>

建筑材料css

  1. /* 建筑材料 */
  2. .pro1{
  3.     margin-top:14px;
  4. }
  5. .pro1 h3{
  6.     height:34px;
  7.     background:#ecf1f7;
  8.     line-height:34px;
  9.     border-top:2px solid #c3d7e4;
  10.     font-size:14px;
  11.     padding-left:22px;
  12.     margin-bottom:12px;
  13. }
  14. .pro1>ul{
  15.     float:left;
  16.     width:718px;
  17.     height:344px;
  18.     border:1px solid #d8d8d8;
  19.     padding:0 5px;
  20. }
  21. .pro1>ul li{
  22.     padding-top:14px;
  23.     padding-left:22px;
  24.     padding-bottom:12px;
  25.     float:left;
  26.     border-bottom:1px solid #eee;
  27.     width:336px;
  28. }
  29. .pro1>ul li .pro-info>a{
  30.     float:left;
  31.     width:97px;
  32.     height:100px;
  33.     border:1px solid #cacaca;
  34.     text-align:center;
  35. }
  36. .pro1>ul li .pro-info>.info{
  37.     float:left;
  38.     margin-left:10px;
  39. }
  40. .pro1>ul li .pro-info>.info>a{
  41.     display:block;
  42.     font-size:14px;
  43.     margin-top:6px;
  44. }
  45. .pro1>ul li .pro-info>.info>p{
  46.     color:#863e01;
  47.     font-size:10px;
  48.     width:100px;
  49.     margin-top:10px;
  50. }
  51. .pro1>ul li .pro-info>.info>span{
  52.     display:block;
  53.     margin-top:16px;
  54. }
  55. .pro1>ul li .pro-info>.info>span b{
  56.     color:#c50934;
  57.     font-size:14px;
  58.     margin-right:25px;
  59. }
  60. .pro1>ul li .pro-info>.info>span s{
  61.     color:#555;
  62.     font-size:8px;
  63. }
  64. .pro1>ul li .shopping button{
  65.     border:none;
  66.     margin-top:14px;
  67.     float:left;
  68.     background:#0a84e3;
  69.     width:99px;
  70.     height:26px;
  71.     text-align:center;
  72.     line-height:26px;
  73.     color:#fff;
  74. }
  75. .pro1>ul li .shopping p{
  76.     float:left;
  77.     margin-left:10px;
  78.     font-size:12px;
  79.     margin-top:26px;
  80. }
  81. .pro1>ul li .shopping p span{
  82.     color:#c50934;
  83. }
  84. .pro1 .pro-news{
  85.     float:right;
  86.     border:1px solid #e0e6f0;
  87.     width:228px;
  88. }
  89. .pro1 .pro-news h4{
  90.     background:#fcfcfc;
  91.     font-size:12px;
  92.     border-bottom:1px solid #e0e6f0;
  93.     line-height:28px;
  94.     height:28px;
  95.     padding-left:15px;
  96. }
  97. .pro1 .pro-news ul{
  98.     list-style-type:square;
  99.     font-size:12px;
  100.     padding-left:20px;
  101.     line-height:24px;
  102.     padding-top:5px;
  103.     height:310px;
  104. }

效果图

儿童安全座椅html

  1. <!-- 儿童安全座椅开始 -->
  2. <div class="container">
  3.     <div class="content pro2 clearfix">
  4.         <h3>儿童安全座椅</h3>
  5.         <div class="pro-info">
  6.             <p>
  7.                 <span>ISOFIX接口</span>
  8.                 <a href="#">详情点击>></a>
  9.             </p>
  10.             <ul class="clearfix">
  11.                 <li>
  12.                     <a href="#"><img src="images/et01.png"></a>
  13.                     <span>英国百代适-至尊者(带<br />ISOFIX接口)奔驰宝马专用</span>
  14.                     <p>适合年龄：9个月-4岁</p>
  15.                     <p>市场价：<s>￥5580元</s></p>
  16.                     <p>直销价：<b>￥3380元</b></p>
  17.                 </li>
  18.                 <li>
  19.                     <a href="#"><img src="images/et02.png"></a>
  20.                     <span>欧贝儿童安全座椅3-12岁<br>ISOFIX儿童汽车安全座椅</span>
  21.                     <p>适合年龄：3-12岁</p>
  22.                     <p>市场价：<s>￥1980元</s></p>
  23.                     <p>直销价：<b>￥1380元</b></p>
  24.                 </li>
  25.                 <li>
  26.                     <a href="#"><img src="images/et03.png"></a>
  27.                     <span>西班牙JANE(INDY&nbsp;PLUS<br>TEAM)3-12岁&nbsp;H65带ISOfix</span>
  28.                     <p>适合年龄：3-12岁</p>
  29.                     <p>市场价：<s>￥2980元</s></p>
  30.                     <p>直销价：<b>￥1980元</b></p>
  31.                 </li>
  32.                 <li>
  33.                     <a href="#"><img src="images/et04.png"></a>
  34.                     <span>欧贝儿童安全座椅3-12岁<br>ISOFIX儿童汽车安全座椅</span>
  35.                     <p>适合年龄：3-12岁</p>
  36.                     <p>市场价：<s>￥1980元</s></p>
  37.                     <p>直销价：<b>￥1380元</b></p>
  38.                 </li>
  39.             </ul>
  40.         </div>
  41.         <div class="pro-hot">
  42.             <img src="images/et_right.png">
  43.             <img src="images/et_right_bottom.png">
  44.         </div>
  45.     </div>
  46. </div>
  47. <!-- 儿童安全座椅结束 -->

儿童安全座椅css

  1. /* 儿童安全座椅 */
  2. .pro2 h3{
  3.     background:#ecf1f7;
  4.     height:34px;
  5.     border-top:2px solid #c3d7e4;
  6.     padding-left:22px;
  7.     line-height:34px;
  8.     font-size:14px;
  9.     margin-top:15px;
  10. }
  11. .pro2 .pro-info{
  12.     float:left;
  13.     width:726px;
  14.     
  15. }
  16. .pro2 .pro-info>p{
  17.     height:34px;
  18.     border-bottom:2px solid #4daee1;
  19. }
  20. .pro2 .pro-info>p span{
  21.     float:left;
  22.     width:123px;
  23.     background:#4daee1;
  24.     height:23px;
  25.     margin-top:11px;
  26.     border-top-left-radius:8px 7px;
  27.     border-top-right-radius:29px 100%;
  28.     color:#fff;
  29.     padding-left:21px;
  30. }
  31. .pro2 .pro-info>p a{
  32.     float:right;
  33.     font-size:12px;
  34.     color:#1a66b3;
  35.     margin-top:17px;
  36.     margin-right:10px;
  37. }    
  38. .pro2 .pro-info>ul{
  39.     border:1px solid #cacaca;
  40.     border-top:none;
  41.     display:flex;
  42.     flex-direction:row;
  43.     justify-content:space-around;
  44. }    
  45. .pro2 .pro-info>ul li{
  46.     float:left;
  47.     width:163px;
  48.     text-align:center;
  49.     font-size:12px;
  50.     height:300px;
  51. }    
  52. .pro2 .pro-info>ul li>a{
  53.     width:163px;
  54.     height:169px;
  55.     display:block;
  56.     margin-bottom:5px;
  57.     margin-top:5px;
  58. }
  59. .pro2 .pro-info>ul li>span{
  60.     line-height:19px;
  61. }    
  62. .pro2 .pro-info>ul li>p{
  63.     color:#999;
  64.     line-height:24px;
  65. }    
  66. .pro2 .pro-info>ul li>p b{
  67.     color:#a10000;
  68. }
  69. .pro2 .pro-hot{
  70.     float:left;
  71.     margin-left:18px;
  72. }    
  73. .pro2 .pro-hot img:first-child{
  74.     display:block;
  75.     border:1px solid #cbcbcb;
  76.     margin-top:13px;
  77.     margin-bottom:10px;
  78. }

效果图

工艺美术品html

  1. <!-- 工艺美术品开始 -->
  2. <div class="container">
  3.     <div class="content pro1 pro3 clearfix">
  4.         <h3>工艺美术品</h3>
  5.         <ul>
  6.             <li>
  7.                 <div class="pro-info">
  8.                     <a href="#"><img src="images/c1.png"></a>
  9.                     <div class="info">
  10.                         <a href="#">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</a>
  11.                         <p>
  12.                             自动换挡&nbsp;安全耐用<br>
  13.                             稳定性好&nbsp;抗氧化强
  14.                         </p>
  15.                         <span>
  16.                             <b>239.00</b>
  17.                             <s>￥386.00</s>
  18.                         </span>
  19.                     </div>
  20.                 </div>
  21.                 <div class="shopping">
  22.                     <button>立即购买</button>
  23.                     <p>限量<span>99</span>件&nbsp;已售出<span>20</span>件</p>
  24.                 </div>
  25.             </li>
  26.             <li>
  27.                 <div class="pro-info">
  28.                     <a href="#"><img src="images/c2.png"></a>
  29.                     <div class="info">
  30.                         <a href="#">威尔舒木地板12mm厚网络超值特</a>
  31.                         <p>
  32.                             防滑抗污&nbsp;清理简单
  33.                             扣型紧密&nbsp;环保健康
  34.                         </p>
  35.                         <span>
  36.                             <b>10.00</b>
  37.                             <s>￥68.00</s>
  38.                         </span>
  39.                     </div>
  40.                 </div>
  41.                 <div class="shopping">
  42.                     <button>立即购买</button>
  43.                     <p>限量<span>100</span>件&nbsp;已售出<span>8</span>件</p>
  44.                 </div>
  45.             </li>
  46.             <li>
  47.                 <div class="pro-info">
  48.                     <a href="#"><img src="images/c3.png"></a>
  49.                     <div class="info">
  50.                         <a href="#">好艺达高档太空铝三件套3500套</a>
  51.                         <p>
  52.                             经典的设计风格<br>
  53.                             油脂的产品品质
  54.                         </p>
  55.                         <span>
  56.                             <b>99.00</b>
  57.                             <s>￥447.00</s>
  58.                         </span>
  59.                     </div>
  60.                 </div>
  61.                 <div class="shopping">
  62.                     <button>立即购买</button>
  63.                     <p>限量<span>100</span>件&nbsp;已售出<span>51</span>件</p>
  64.                 </div>
  65.             </li>
  66.             <li>
  67.                 <div class="pro-info">
  68.                     <a href="#"><img src="images/c4.png"></a>
  69.                     <div class="info">
  70.                         <a href="#">好太太晾衣架&nbsp;8818&nbsp;晒被架</a>
  71.                         <p>
  72.                             自动换挡&nbsp;安全耐用
  73.                             稳定性好&nbsp;抗氧化强
  74.                         </p>
  75.                         <span>
  76.                             <b>350.00</b>
  77.                             <s>0.00</s>
  78.                         </span>
  79.                     </div>
  80.                 </div>
  81.                 <div class="shopping">
  82.                     <button>立即购买</button>
  83.                     <p>限量<span>100</span>件&nbsp;已售出<span>6</span>件</p>
  84.                 </div>
  85.             </li>
  86.         </ul>
  87.         <div class="pro-news">
  88.             <h4>建材商社</h4>
  89.             <div class="textimg clearfix">
  90.                 <img src="images/subtitle.png">
  91.                 <p>在装灯具时，如果装上分控开关，可以省去很多烦恼。因为如果只有一个总开关</p>
  92.             </div>
  93.             <ul>
  94.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  95.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  96.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  97.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  98.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  99.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  100.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  101.                 <li><a href="#"><span>[采暖论坛]</span>精心洗选大半年，终于满足小</a></li>
  102.             </ul>
  103.         </div>
  104.     </div>
  105. </div>
  106. <!-- 工艺美术品结束 -->

工艺美术品css

  1. /* 工艺品 */
  2. .pro3 .pro-news{
  3.     border:none;
  4. }
  5. .pro3 .pro-news .textimg{
  6.     margin-top:14px;
  7.     color:#777;
  8. }
  9. .pro3 .pro-news .textimg img{
  10.     float:left;
  11. }
  12. .pro3 .pro-news .textimg p{
  13.     float:left;
  14.     width:108px;
  15.     font-size:12px;
  16.     margin-left:7px;
  17.     line-height:21px;
  18. }    
  19. .pro3 .pro-news>ul{
  20.     list-style:none;
  21.     padding:0;
  22.     margin:0;
  23.     height:auto;
  24. }    
  25. .pro3 .pro-news>ul>li>a{
  26.     color:#444;
  27. }
  28. .pro3 .pro-news>ul>li>a>span{
  29.     color:#999;
  30. }

效果图

友情链接html

  1. <!-- 友情链接开始 -->
  2. <div class="container">
  3.     <div class="content friendlink clearfix">
  4.         <ul>
  5.             <li>友情链接：</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="#">央视网盟</a></li>
  12.             <li><a href="#">央视网盟</a></li>
  13.             <li><a href="#">央视网盟</a></li>
  14.             <li><a href="#">央视网盟</a></li>
  15.             <li><a href="#">央视网盟</a></li>
  16.             <li><a href="#">央视网盟</a></li>
  17.             <li><a href="#">央视网盟</a></li>
  18.             <li><a href="#">央视网盟</a></li>
  19.             <li><a href="#">央视网盟</a></li>
  20.             <li><a href="#">央视网盟</a></li>
  21.             <li><a href="#">央视网盟</a></li>
  22.             <li><a href="#">央视网盟</a></li>
  23.             <li><a href="#">央视网盟</a></li>
  24.             <li><a href="#">央视网盟</a></li>
  25.         </ul>
  26.     </div>
  27. </div>
  28. <!-- 友情链接结束 -->

友情链接css

  1. /* 友情链接 */    
  2. .friendlink{
  3.     padding-top:23px;
  4.     border-top:1px solid #ddd;
  5.     margin-top:18px;
  6.     padding-bottom:28px;
  7. }
  8. .friendlink ul li{
  9.     float:left;
  10.     margin-right:8px;
  11.     font-size:12px;
  12.     line-height:26px;
  13. }
  14. .friendlink ul li a{
  15.     color:#666;
  16. }

效果图

底部html

  1. <!-- 底部开始 -->
  2. <div class="container">
  3.     <div class="content footer">
  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="">关于我们</a></li>
  12.             <li><a href="">关于我们</a></li>
  13.             <li><a href="">关于我们</a></li>
  14.             <li><a href="">关于我们</a></li>
  15.         </ul>
  16.         <p>版权所有2000-2012 服务热线：0571-89938887 请与我们联系：Service@BMlink 建材网会员互动群：153120106</p>
  17.         <span>本站网络实名：中间网本站通用网址：中国建材网 浙B2-20060159</span>
  18.     </div>
  19. </div>
  20. <!-- 底部结束 -->

底部css

  1. /* 底部 */    
  2. .footer{
  3.     border-top:3px solid #0a7ec3;
  4.     text-align:center;
  5.     padding-top:16px;
  6. }
  7. .footer ul{
  8.     display:inline-block;
  9. }
  10. .footer ul li{
  11.     float:left;
  12.     font-size:12px;
  13. }
  14. .footer ul li:first-child a{
  15.     border-left:none;
  16. }
  17. .footer ul li a{
  18.     padding:0 10px;
  19.     border-left:1px solid #ccc;
  20. }    
  21. .footer p{
  22.     font-size:12px;
  23.     line-height:38px;
  24. }    
  25. .footer span{
  26.     font-size:12px;
  27. }

效果图

标签： 前端 html
本文转载自: https://blog.csdn.net/syh_SYH0321/article/details/127573438
版权归原作者 蒲竺 所有， 如有侵权，请联系我们删除。
登录后发布评论

“WEB前端-CSS精灵技术”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？