CSS实现--列表布局（简单）

我就是我 2022-12-08 14:10 222阅读 0赞

效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70][]

这个如果想和上面的字体什么都一样推荐一个软件 马克鳗 可以用来测量图片的颜色 尺寸等（软件不放百度网盘了，上传资源了，也可以自己找）

用马克鳗把效果图打开   下面的工具直接进行测量

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 /* 重置默认样式 */
 *{
 margin:0;
 padding: 0;
 }
 body{
 background-color: #dedede;
 }
 .list{
 width: 1300px;
 display: flex; 
 margin:50px auto;
 flex-wrap: wrap;
 }
 .list li{
 width:310px;
 height:440px;
 background-color:white;
 
 border-radius: 10px;
 margin-top:14px;
 box-shadow: 0 0 10px #dedede;
 
 list-style: none;
 
 border-radius: 5px;
 transition: all .2s;
 }
 .list img{
 margin-left: 20px;;
 }
 
 .title{
 font-size:28px;
 color:#333333;
 }
 .smalltitle{
 font-size: 20px;
 color: #b0b0b0;
 margin-top: 10px;
 margin-bottom: 10px;
 }
 .price{
 font-size: 26px;
 color: #ff6700;
 }
 .list p{
 text-align: center;
 }
 .list li:hover{
 box-shadow: 0 10px 20px #aeaeae;
 transform:translateY(-5px);
 }
 </style>
 </head>
 <body>
 <ul class="list">
 <li>
 <img src="./images/img1.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 <li>
 <img src="./images/img2.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 <li>
 <img src="./images/img3.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 <li>
 <img src="./images/img4.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 <li>
 <img src="./images/img5.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 <li>
 <img src="./images/img6.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 <li>
 <img src="./images/img7.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 <li>
 <img src="./images/img8.webp" alt="">
 小米10 青春版 5G
 50倍潜望式变焦 / 轻薄5G手机
 2099元起
 </li>
 </ul>
 </body>
 </html>

效果图![2020091919351773.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70]: /images/20221123/e8915c4cfc82496da56ac3c0395dece4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70 1]: /images/20221123/22d44910d45c453383a6ba6346f1e31b.png
[2020091919351773.gif]: /images/20221123/ae31073970da4400a3d692724101f01b.png