如题
思路：
先写出对应的html，给出书上图片的结构。即：
外面一个框（out）
里面上下两个框（up，down）
上框有图片和一个标题（img，h3）
下框有几个超链接（li套a）
.1.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="1.css"/> 7 </head> 8 <body> 9 <div id="out"> 10 <div id="up"><img src="1.PNG"/><h3>小说排行</h3></div> 11 <div id="down"> 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 </div> 18 </div> 19 </body> 20 </html>
上框垂直居中，故考虑用弹性盒子（flex）
圆角和简单的渐变，网上都容易查到。
上下分界的白线和超链接下面的虚线，都可以设置对应外框的下边界。
利用基本css属性调整好所有颜色、文本样式、大小。
利用盒子模型知识，调整好各种距离和位置。
适当利用外框属性(border)，看清各元素边界，进行调试。
1.css
1 #out{ 2 width: 18.75rem; 3 border: 1px solid; 4 border-radius: 15px; 5 background:linear-gradient(gray,white) 6 } 7 img{ 8 width: 50px; 9 height: 50px; 10 margin-left: 13px; 11 } 12 h3{ 13 display: inline-block; 14 color: white; 15 margin-left: 8px; 16 } 17 #up{ 18 display: flex; 19 align-items: center; 20 border-bottom: 1px solid white; 21 } 22 li{ 23 border-bottom: 1px dashed; 24 margin-left: 18px; 25 padding-top: 8px; 26 padding-bottom: 3px; 27 width: 86%; 28 } 29 a{ 30 margin-left: -15px; 31 text-decoration: none; 32 color: black; 33 } 34 a:hover{ 35 font-size: 17px; 36 } 37 #down{ 38 margin-top: 10px; 39 margin-bottom: 15px; 40 }
运行效果自行查看。
