devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

30个html+CSS和html5动画经典案例_html和css简单例子

作者：我家小花儿 | 2024-02-29 17:23:07

赞

踩

html和css简单例子

4.淘宝商品展示

 

                                   

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>产品展示</title>
  8.     <style type="text/css">
  9.       * {
  10.         margin: 0px;
  11.         padding: 0px;
  12.       }
  13.       .product {
  14.         width: 268px;
  15.        border-radius: 3px;
  16.         border: 5px solid #ddd;
  17.         margin: 50px auto 0px;
  18.         text-align: center;
  19.  
  20.       }
  21.       .product p.describle{
  22.         color: #845f3f;
  23.         font-size: 16px;
  24.       }
  25.       .text{
  26.         height: 100px;
  27.         border-radius: 5px;
  28.         background-color: #f8f8f8;
  29.       }
  30.       a{
  31.         text-decoration: none;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="product">
  37.       <div class="pic">
  38.         <img src="12.png" alt="图片"width="150px"height="200px "style="margin-top: 5px; margin-bottom: 20px;"
  39.       />
  40.       <p class="describle" style="margin-bottom:25px;">快速煮水，安心使用</p>
  41.       </div>
  42.       <div class="text">
  43.         <!-- 通过设置buttons属性中的font-size为0px可设置按钮亦或是图片不留间隙 -->
  44.         <div class="buttons" style="padding-top: 10px;">
  45.           <!-- cursor:pointer;是css属性设置鼠标翻上去变成手 -->
  46.           <a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; background-color:#D64187; color: white; border-radius: 3px; border: transparent; width: 50px;">直播中</button></a>
  47.           <a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; color: red;background-color: white; border: #845f3f solid 1px; border-radius: 3px;">特惠</button></a>
  48.           <a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; color: aquamarine; border: aquamarine solid 1px; border-radius: 3px; background-color:white;">30天保健价</button></a>
  49.           <a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; color: aquamarine; border: aquamarine solid 1px; border-radius: 3px; background-color: white;">售后免邮</button></a>
  50.           
  51.         </div>
  52.         <h3>云米电水壶</h3>
  53.         <p style="color: red;">￥59</p>
  54.       </div>
  55.     </div>
  56.   </body>
  57. </html>

需要注意的地方：

1.设置块间距如图片 按钮等

  

 <!-- 通过设置buttons属性中的font-size为0px可设置按钮亦或是图片不留间隙 -->

 2.边框三要素颜色、线条类型、线条像素值缺一不可.否则边框无法显示。

color: white; border-radius: 3px;

运行效果如图所示：

 试用场景：淘宝商品展示。橱窗展示。

5.html+css实战小案例，CSS小米商城首页侧边导航栏效果

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>侧边栏</title>
  8.     <style type="text/css">
  9.       * {
  10.         margin: 0px;
  11.         padding: 0px;
  12.       }
  13.       ul{
  14.         list-style: none;
  15.       }
  16.       a{
  17.         text-decoration: none;
  18.       }
  19.       .all {
  20.         position: absolute;
  21.         width: 100%;
  22.         height: 100%;
  23.         background-image: linear-gradient(to right, #fdb787, #c6ffdd);
  24.       }
  25.       .menu {
  26.         width: 300px;
  27.      
  28.         background-color: rgba(255, 255, 255, 0.5);
  29.         margin: 50px auto 0px; /*上  左右  下*/
  30.       }
  31.       .menu ul{
  32.         
  33.         padding: 20px 0px;
  34.       }
  35.       .menu ul li{
  36.         height: 42px;
  37.         /* 垂直居中 */
  38.         line-height: 42px;
  39.  
  40.  
  41.       }
  42.       .menu ul li a{
  43.         /* 设置块元素,目的是为了让a标签占据整行 */
  44.         
  45.         display: block;
  46.         /* 文字首行缩进2个字 加字 */
  47.         text-indent: 2em;
  48.         background-image: url('5箭头.png');
  49.         background-repeat: no-repeat;
  50.         background-position: 255px;
  51.       }
  52.       .menu ul li a:hover{
  53.         /* 设置块元素,目的是为了让a标签占据整行 */
  54.         background-color: #ff6700;
  55.         display: block;
  56.         /* 文字首行缩进2个字 加字 */
  57.         text-indent: 2em;
  58.         background-image: url('5箭头.png');
  59.         background-repeat: no-repeat;
  60.         background-position: 255px;
  61.       }
  62.     </style>
  63.   </head>
  64.   <body>
  65.     <!-- 包裹整体所有代码包裹在这里面. -->
  66.     <div class="all">
  67.       <div class="menu">
  68.         <ul>
  69.           <li><a href="https://www.baidu.com/" target="blank">手机</a></li>
  70.           <li><a href="https://www.baidu.com/" target="blank">电视</a></li>
  71.           <li><a href="https://www.baidu.com/" target="blank">笔记本 平板</a></li>
  72.           <li><a href="https://www.baidu.com/" target="blank">家电</a></li>
  73.           <li><a href="https://www.baidu.com/" target="blank">出行 穿戴</a></li>
  74.           <li><a href="https://www.baidu.com/" target="blank">智能路由器</a></li>
  75.           <li><a href="https://www.baidu.com/" target="blank">电源 配件</a></li>
  76.           <li><a href="https://www.baidu.com/" target="blank">健康 儿童</a></li>
  77.           <li><a href="https://www.baidu.com/" target="blank">耳机 音响</a></li>
  78.           <li><a href="https://www.baidu.com/" target="blank">生活 箱包</a></li>
  79.         </ul>
  80.  
  81.       </div>
  82.     </div>
  83.   </body>
  84. </html>

需要注意的地方：

  1.  .menu ul li a{
  2.         /* 设置块元素,目的是为了让a标签占据整行 */
  3.         display: block;
  4.         /* 文字首行缩进2个字 加字 */
  5.         text-indent: 2em;
  6.         background-image: url('5箭头.png');
  7.         background-repeat: no-repeat;
  8.         background-position: 255px;
  9.       }

运行效果

 应用场景；左侧菜单，二级菜单导航栏下拉列表

6.第五节：html+css实战小案例，不定向水平居中解决方案开发精美分页效果

代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>分页效果</title>
  8.     <style type="text/css">
  9.         *{
  10.             padding: 0px;
  11.             margin: 0px;
  12.         }
  13.         .foot{
  14.             margin-top: 20px;
  15.             width: 100%;
  16.             height: 200px;
  17.             background-color: aquamarine;
  18.             text-align: center;
  19.             font-size: 0px;
  20.             padding: 100px 0px;
  21.         }
  22.         .foot a{
  23.             border: 1px solid #ddd;
  24.             background-color: #fff;
  25.             display: inline-block;
  26.             padding: 0px 10px;
  27.             height: 30px;
  28.             text-decoration: none;
  29.             line-height: 30px;
  30.             color: #333;
  31.             font-size: 14px;
  32.             margin: 0px 2px;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="all">
  38.         <div class="foot">
  39.             <a href="">&lt;</a><a href="">1</a>
  40.             <a href="">2</a>
  41.             <a href="">3</a>
  42.             <a href="">4</a>
  43.             <a href="">5</a>
  44.             <a href="">...</a>
  45.             <a href="">100</a>
  46.             <a href="">&gt;</a>
  47.  
  48.             
  49.         </div>
  50.         <div class="foot"></div>
  51.         <div class="foot"></div>
  52.     </div>
  53.     
  54. </body>
  55. </html>

运行效果：

 需要注意的地方：

 在编译过程中浏览器会默认把回车空格进行编译

解决办法：

应用场景：进行分页设置 

7.CSS打造精美选项卡菜单效果

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>css打造精美选项卡</title>
  8.     <style type="text/css">
  9.         body{
  10.             margin: 0px;
  11.         }
  12.         .tab{
  13.             width: 800px;
  14.             background-color: #f7f7f7;
  15.             border-radius: 50px;
  16.             margin: 50px auto 0px;
  17.             font-size: 0px;
  18.             padding: 5px 0px;
  19.         }
  20.         .tab span{
  21.             border-radius: 25px;
  22.             height: 40px;
  23.             display: inline-block;
  24.             padding: 0px 40px;
  25.             line-height: 40px;
  26.             font-size: 16px;
  27.         }
  28.         .tab span i{
  29.             width: 26px;
  30.             height: 25px;
  31.  
  32.             display: inline-block;
  33.             background-image: url('7css精美选项卡icon.png');
  34.             /* 只针对行内块级元素有效 */
  35.             vertical-align: middle;
  36.             margin-right: 5px;
  37.            
  38.  
  39.         }
  40.  
  41.         .icon2{
  42.             background-position: -26px 0px;
  43.         }
  44.         .icon3{
  45.             
  46.             background-position: -52px 0px;
  47.         }
  48.         .icon4{
  49.             background-position: -78px 0px;
  50.         }
  51.         .icon5{
  52.             background-position: -104px 0px;
  53.         }
  54.  
  55.         .icon7{
  56.             background-position: -26px 25px;
  57.         }
  58.  
  59.         .icon2{
  60.             background-position: -26px 0px;
  61.         }
  62.         .icon3{
  63.             
  64.             background-position: -52px 0px;
  65.         }
  66.         .icon4{
  67.             background-position: -78px 0px;
  68.         }
  69.         .icon5{
  70.             background-position: -104px 0px;
  71.         }
  72.         
  73.     </style>
  74. </head>
  75. <body>
  76.  
  77.         <div class="tab">
  78.             <span class="current" ><i class="icon1"></i>备孕期间</span>
  79.             <span class="current"><i class="icon2"></i>怀孕</span>
  80.             <span class="current"><i class="icon3"></i>0-1岁</span>
  81.             <span class="current"><i class="icon4"></i>1-2岁</span>
  82.             <span class="current"><i class="icon5"></i>2-3岁</span>
  83.         </div>
  84.  
  85.         <div class="tab">
  86.             <span class="current" style="background-color: pink;"><i class="icon7"></i>备孕期间</span>
  87.             <span class="current"><i class="icon8"></i>怀孕</span>
  88.             <span class="current" ><i class="icon9"></i>0-1岁</span>
  89.             <span class="current"><i class="icon10"></i>1-2岁</span>
  90.             <span class="current"><i class="icon11"></i>2-3岁</span>
  91.         </div>
  92.  
  93.   
  94. </body>
  95. </html>

运行结果

需要注意的地方：

涉及到了

 

 CSS精灵图技术就是把每一个需要用到的图放到一个里面

尽量使用类选择器

8.前端必会的三种CSS网页布局技术

代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>布局格式</title>
  8.     <style type="text/css">
  9.         *{
  10.             margin: 0px;
  11.             padding: 0px;
  12.         }
  13.         .all{
  14.             position: relative;
  15.             width: 100%;
  16.             height: 100%;
  17.             background-color: antiquewhite;
  18.         }
  19.         .container{
  20.             width: 1000px;
  21.             height: 1500px;
  22.             border: 2px solid black;
  23.             margin: 0px auto 0px;
  24.         }
  25.         .column2{
  26.            
  27.             border: 2px solid black;
  28.         }
  29.         .column2-1{
  30.             width: 700px;
  31.             height: 300px;
  32.             background-color: red;
  33.             float: left;
  34.         }
  35.         .column2-2{
  36.             width: 280px;
  37.             height: 300px;
  38.             background-color: yellow;
  39.             float: right;
  40.         }
  41.         .clear{
  42.             clear: both;
  43.             /* 清楚左右浮动 */
  44.         }
  45.         .column3{
  46.             margin-top: 20px;
  47.             margin-bottom: 20px;
  48.             border: 2px solid blue;
  49.         }
  50.         .column3-1{
  51.             width: 200px;
  52.             height: 300px;
  53.             background-color: aqua;
  54.             float: left;
  55.         }
  56.         .column3-2{
  57.             width: 400px;
  58.             height: 300px;
  59.             background-color: coral;
  60.             float: left;
  61.             margin: 0px 10px;
  62.         }
  63.         .column3-3{
  64.             width: 360px;
  65.             height: 300px;
  66.             background-color: blueviolet;
  67.             float: right;
  68.         }
  69.         .clear{
  70.             clear: both;
  71.             /* 清楚左右浮动 */
  72.         }
  73.        
  74.         .column-n ul{
  75.             
  76.             list-style: none;
  77.         }
  78.         .column-n ul li{
  79.            background-color: aquamarine;
  80.             width: 190px;
  81.             height: 200px;
  82.             float: left;
  83.             margin: 5px;
  84.         }
  85.     </style>
  86. </head>
  87. <body>
  88.     <div class="all">
  89.         <div class="container" >
  90.             <div class="column2">
  91.                 <div class="column2-1"></div>
  92.                 <div class="column2-2"></div>
  93.                 <div class="clear"></div>
  94.             </div>
  95.             <!-- 三列 -->
  96.             <div class="column3 clearfix">
  97.                 <div class="column3-1"></div>
  98.                 <div class="column3-2"></div>
  99.                 <div class="column3-3"></div>
  100.                 <div class="clear"></div>
  101.             </div>
  102.             <div class="column-n">
  103.                 <ul>
  104.                     <li></li>
  105.                     <li></li>
  106.                     <li></li>
  107.                     <li></li>
  108.                     <li></li>
  109.                     <li></li>
  110.                     <li></li>
  111.                     <li></li>
  112.                     <li></li>
  113.                     <li></li>
  114.                 </ul>
  115.             </div>
  116.  
  117.  
  118.  
  119.  
  120.         </div>
  121.     </div>
  122. </body>
  123. </html>

这个布局格式需要基本掌握

9. 酷狗音乐热榜效果

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>酷狗热搜</title>
  8.     <style type="text/css">
  9.         body,h3,h4,p{
  10.             margin: 0px;
  11.             padding: 0px;
  12.         }
  13.         a{
  14.             text-decoration: none;
  15.         }
  16.         
  17.         
  18.         .music-hot{
  19.             width: 350px;
  20.             height: 500px;
  21.            
  22.             margin: 50px auto 0px;
  23.         }
  24.         .music-hot h3{
  25.         
  26.             font-weight: 100;
  27.             height: 40px;
  28.             line-height: 40px;
  29.         }
  30.         .music-hot h3 span{
  31.             font-size: 28px;
  32.         }
  33.         .music-hot h3 span i{
  34.             color: #00a7f6;
  35.             font-style: normal
  36.         }
  37.         .music-hot h3 a{
  38.             font-size: 16px;
  39.             color: #9c9e9c;
  40.             float: right;
  41.         }
  42.  
  43.         .music-hot .item{
  44.             height: 98px;
  45.             background-color: #f6f6f6;
  46.             margin-top: 20px;
  47.         }
  48.         .music-hot .item .item-img{
  49.             width: 98px;
  50.             height: 98px;
  51.             background-color: #00a7f6;
  52.             float: left;
  53.         }
  54.         .music-hot .item .item-text{
  55.             width: 232px;
  56.             height: 98px;
  57.             float: right;
  58.             background: url(../img/9-1.png) no-repeat right center;
  59.         }
  60.         img{
  61.             width: 98px;
  62.             height: 98px;
  63.         }
  64.         .music-hot .item .item-text h4{
  65.             font-size: 16px;
  66.             padding: 8px 0px;
  67.         } 
  68.         .music-hot .item .item-text p{
  69.             font-size: 14px;
  70.             color: #555;
  71.             line-height: 25px;
  72.         }
  73.         .music-hot .item .item-text p a{
  74.             color: #555;
  75.         }
  76.         .music-hot .item .item-text p a:hover{
  77.             color: #ff627f;
  78.         }
  79.  
  80.         .music-hot .item .item-text p a:hover span{
  81.             color: #ff627f;
  82.         }
  83.         .music-hot .item .item-text p span{
  84.             color: #9999;
  85.         }
  86.         
  87.  
  88.     </style>
  89. </head>
  90. <body>
  91.     <div class="music-hot">
  92.         <h3><a href="">更多</a><span><i>热门</i>榜单</span></h3>
  93.         <div class="item">
  94.             <div class="item-img">
  95.                 <img src="..\img\9-2.jpg" alt="飙升榜">
  96.             </div>
  97.             <div class="item-text">
  98.                 <h4>酷狗音乐飙升榜</h4>
  99.                 <p><a href="">1.很受伤（Live）- <span>郁可唯</span></a></p>
  100.                 <p><a href="">2.Lemon（柠檬）- <span>米津玄师</a></span></p>
  101.  
  102.             </div>
  103.         </div>
  104.         <div class="item">
  105.             <div class="item-img">
  106.                 <img src="..\img\9-3.jpg" alt="">
  107.             </div>
  108.             <div class="item-text">
  109.                 <h4>酷狗音乐飙升榜</h4>
  110.                 <p><a href="">1.很受伤（Live）- <span>郁可唯</span></a></p>
  111.                 <p><a href="">2.Lemon（柠檬）- <span>米津玄师</a></span></p>
  112.  
  113.             </div>
  114.         </div>
  115.         <div class="item">
  116.             <div class="item-img">
  117.                 <img src="..\img\9-4.jpg" alt="">
  118.             </div>
  119.             <div class="item-text">
  120.                 <h4>酷狗音乐飙升榜</h4>
  121.                 <p><a href="">1.很受伤（Live）- <span>郁可唯</span></a></p>
  122.                 <p><a href="">2.Lemon（柠檬）- <span>米津玄师</a></span></p>
  123.  
  124.             </div>
  125.         </div>
  126.     </div>
  127. </body>
  128. </html>

 运行效果：

 注意的地方：绝对路径的设置

关于url（）和 src路径

 这两处需要注意一下。

 应用场景 ：热门导航 热门列表项

10.CSS开发小米商城产品栏目展示效果

 代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>小米商城</title>
  8.     <style type="text/css">
  9.         ul{
  10.             margin: 0px;
  11.             padding: 0px;
  12.             list-style: none;
  13.         }
  14.         body{
  15.             margin: 0px;
  16.             padding: 0px;
  17.             background-color: #ddd;
  18.         }
  19.         h4,h3,p{
  20.             padding: 0px;
  21.             margin: 0px;
  22.         }
  23.         a{
  24.             text-decoration: none;
  25.             color: #000;
  26.         }
  27.         .product{
  28.             width: 1226px;
  29.             /* height: 700px; */
  30.             margin: 50px auto 0px;
  31.         }
  32.         .product .product-hot{
  33.             width: 234px;
  34.             /* height: 614px; */
  35.             background-color: aquamarine;
  36.             float: left;
  37.         }
  38.         .product .product-hot img{
  39.             display: block;
  40.         }
  41.         .product .product-list{
  42.             width: 992px;
  43.             /* height: 614px; */
  44.           
  45.             float: right;
  46.         }
  47.         .clearfix::after{
  48.             content: "";
  49.             display: block;
  50.             clear: both;
  51.         }
  52.         .product-list ul li{
  53.            
  54.             width: 234px;
  55.             height: 300px;
  56.             float: left;
  57.             margin-left:14px ;
  58.             margin-bottom:14px ;
  59.             background-color: #fff;
  60.         }
  61.         .product-list ul li a{
  62.            
  63.            display: block;
  64.            height: inherit;
  65.            text-align: center;
  66.            padding-top: 30px;
  67.            /* 怪异盒子模型 宽高+上内外边距 */
  68.            box-sizing: border-box;
  69.        }
  70.         .product-list ul li:nth-last-child(1){
  71.             height: 143px;
  72.         }
  73.         .product-list ul li:nth-last-child(2){
  74.             height: 143px;
  75.         }
  76.         .product-list ul li a img{
  77.             width: 160px;
  78.            
  79.         }
  80.         .product-list ul li a h3{
  81.             font-size: 14px;
  82.             font-weight: 400;
  83.             padding: 0px 5px 0px;
  84.             /* 文字不要换行 y1行显示*/
  85.             white-space: nowrap;
  86.             /* 超出的部分隐藏 */
  87.             text-overflow: ellipsis;
  88.             overflow:hidden;
  89.         }
  90.         .product-list ul li a .desc{
  91.             font-size: 14px;
  92.             color: #999;
  93.         }
  94.         .product-list ul li a p.price{
  95.             padding-top: 15px;
  96.         }
  97.         .product-list ul li a p.price span{
  98.             font-size: 14px;
  99.             color: orange;
  100.             margin-right: 10px;
  101.         }
  102.         .product-list ul li a p.price del{
  103.             font-size: 14px;
  104.             color: #999;
  105.         }
  106.         .product-list ul li .txt{
  107.             width: 100px;
  108.             /* background-color: blue; */
  109.             float: left;
  110.             margin-left: 20px;
  111.         }
  112.         .product-list ul li .img{
  113.             width: 80px;
  114.             height: 80px;
  115.             float: right;
  116.             margin-right: 20px;
  117.         }
  118.         .product-list ul li .txt h4{
  119.             font-size:14px ;
  120.             font-weight: 400;
  121.             text-align: left;
  122.         }
  123.         .product-list ul li .txt p{
  124.             margin-top: 15px;
  125.             font-size:14px;
  126.             text-align: left;
  127.             color: orange;
  128.         }
  129.         .product-list ul li .more{
  130.             margin-top: 20px;
  131.         }
  132.         .product-list ul li .txt h4.ti{
  133.             padding-top: 20px;
  134.             font-size: 20px;
  135.         }
  136.         .product-list ul li .txt p.hot{
  137.             color: #999;
  138.         }
  139.  
  140.     </style>
  141. </head>
  142. <body>
  143.     <div class="product clearfix">
  144.         <div class="product-hot">
  145.             <!-- img标签是一个行内块级元素，默认有空隙 -->
  146.             <!-- 导致插入的图片产生空隙，需要转换为行块级元素 -->
  147.             <a href=""><img src="../img/mi00.webp" style="width: 234px;" alt=""></a>
  148.         </div>
  149.         <div class="product-list">
  150.             <ul class=" clearfix">
  151.                 <li><a href="#"><img src="../img/mi01.webp" alt="">
  152.                     <h3>Xiaomi Watch S1</h3>
  153.                     <p class="desc">腕事俱备</p>
  154.                     <p class="price"><span>1099元起</span>  <del>2099元起</del></p>
  155.                     </a>
  156.                 </li>
  157.                 <li><a href="#"><img src="../img/mi02.webp" alt="">
  158.                     <h3>Xiaomi Watch S1</h3>
  159.                     <p class="desc">腕事俱备</p>
  160.                     <p class="price"><span>1099元起</span>  <del>2099元起</del></p>
  161.                     </a>
  162.                 </li>
  163.                 <li><a href="#"><img src="../img/mi03.webp" alt="">
  164.                     <h3>Xiaomi Watch S1</h3>
  165.                     <p class="desc">腕事俱备</p>
  166.                     <p class="price"><span>1099元起</span>  <del>2099元起</del></p>
  167.                     </a>
  168.                 </li>
  169.                 <li><a href="#"><img src="../img/mi04.webp" alt="">
  170.                     <h3>Xiaomi Watch S1</h3>
  171.                     <p class="desc">腕事俱备</p>
  172.                     <p class="price"><span>1099元起</span>  <del>2099元起</del></p>
  173.                     </a>
  174.                 </li>
  175.                 <li><a href="#"><img src="../img/mi05.webp" alt="">
  176.                     <h3>Xiaomi Watch S1</h3>
  177.                     <p class="desc">腕事俱备</p>
  178.                     <p class="price"><span>1099元起</span>  <del>2099元起</del></p>
  179.                     </a>
  180.                 </li>
  181.                 <li><a href="#"><img src="../img/mi06.webp" alt="">
  182.                     <h3>Xiaomi Watch S1</h3>
  183.                     <p class="desc">腕事俱备</p>
  184.                     <p class="price"><span>1099元起</span>  <del>2099元起</del></p>
  185.                     </a>
  186.                 </li>
  187.                 <li><a href="#"><img src="../img/mi07.webp" alt="">
  188.                     <h3>Xiaomi Watch S1</h3>
  189.                     <p class="desc">腕事俱备</p>
  190.                     <p class="price"><span>1099元起</span>  <del>2099元起</del></p>
  191.                     </a>
  192.                 </li>
  193.                 <!-- 9/10 -->
  194.                 <li><a href="#">
  195.                     <div class="txt">
  196.                         <h4>Redmi Bus 青春旗舰版</h4>
  197.                         <p>999元</p>
  198.                     </div>
  199.                     <div class="img"><img src="../img/mi08.webp" style="width: 80px;" alt=""></div>
  200.  
  201.                 </a></li>
  202.                 <li><a href="#">
  203.                     <div class="txt">
  204.                         <h4 class="ti">浏览更多</h4>
  205.                         <p class="hot">热门</p>
  206.                     </div>
  207.                     <div class="img more"><img  src="../img/circle-arrow.svg" style="width: 48px;" alt=""></div>
  208.                 </a></li>
  209.             </ul>
  210.         </div>
  211.     </div>
  212. </body>
  213. </html>

需要注意的地方：

提到了怪异盒子模型：box-sizing: border-box;这样设置可以使得原本

实际高度变为border的设置高度

此外

 /* 文字不要换行 y1行显示*/

            white-space: nowrap;

            /* 超出的部分隐藏 */

            text-overflow: ellipsis;

            overflow:hidden;

img是行内块级元素，默认格式存在空隙，导致插入的图片有空隙，需要转换为块级元素

运行效果

 

 应用场景，列表项，分栏，图片的设置

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

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

  

闽ICP备14008679号