如题
思路：
先写出对应的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 }
运行效果自行查看。
标签：P65,bottom,border,参考,实时,1px,15px,margin,left From： https://www.cnblogs.com/wanjinliu/p/17234598.html