P65第二题(实时热点)参考()-其他

发表于： 3月 19, 2023 3月 19, 2023
分类：其他
标签：其他

P65第二题(实时热点)参考()

如题

思路：

先写出对应的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 }

运行效果自行查看。

————————

如题

思路：