247 lines
5.8 KiB
HTML
247 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>作业</title>
|
|
<style>
|
|
.body {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 320px;
|
|
height: 650px;
|
|
}
|
|
|
|
.head {
|
|
position: relative;
|
|
}
|
|
|
|
.writer {
|
|
display: inline;
|
|
color: silver;
|
|
}
|
|
|
|
.img {
|
|
position: absolute;
|
|
left: 70%;
|
|
top: 2px;
|
|
}
|
|
|
|
.more {
|
|
margin: 0;
|
|
position: absolute;
|
|
left: 78%;
|
|
top: 0px;
|
|
color: silver;
|
|
}
|
|
|
|
.ul {
|
|
position: relative;
|
|
}
|
|
|
|
.list1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.list1-1 {
|
|
width: 48px;
|
|
height: 48px;
|
|
left: 5px;
|
|
size: 14px;
|
|
position: absolute;
|
|
}
|
|
|
|
.guanzhu1 {
|
|
color: springgreen;
|
|
position: absolute;
|
|
left: 80%;
|
|
}
|
|
|
|
.name1 {
|
|
position: absolute;
|
|
left: 60px;
|
|
}
|
|
|
|
.introduction1 {
|
|
position: absolute;
|
|
top: 55px;
|
|
font-size: 8px;
|
|
color: silver;
|
|
left: 60px;
|
|
}
|
|
|
|
.list1-2 {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 5px;
|
|
}
|
|
|
|
.guanzhu2 {
|
|
color: springgreen;
|
|
position: absolute;
|
|
left: 80%;
|
|
top: 100px;
|
|
}
|
|
|
|
.name2 {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 60px;
|
|
}
|
|
|
|
.introduction2 {
|
|
position: absolute;
|
|
top: 125px;
|
|
font-size: 8px;
|
|
color: silver;
|
|
left: 60px;
|
|
}
|
|
|
|
.list1-3 {
|
|
position: absolute;
|
|
top: 170px;
|
|
left: 7px;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.guanzhu3 {
|
|
color: springgreen;
|
|
position: absolute;
|
|
left: 80%;
|
|
top: 170px;
|
|
}
|
|
|
|
.name3 {
|
|
position: absolute;
|
|
top: 170px;
|
|
left: 60px;
|
|
}
|
|
|
|
.introduction3 {
|
|
position: absolute;
|
|
top: 193px;
|
|
font-size: 8px;
|
|
color: silver;
|
|
left: 60px;
|
|
}
|
|
|
|
.list1-4 {
|
|
position: absolute;
|
|
top: 230px;
|
|
left: 7px;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.guanzhu4 {
|
|
color: springgreen;
|
|
position: absolute;
|
|
left: 80%;
|
|
top: 230px;
|
|
}
|
|
|
|
.name4 {
|
|
position: absolute;
|
|
top: 230px;
|
|
left: 60px;
|
|
}
|
|
|
|
.introduction4 {
|
|
position: absolute;
|
|
top: 253px;
|
|
font-size: 8px;
|
|
color: silver;
|
|
left: 60px;
|
|
}
|
|
|
|
|
|
.list1-5 {
|
|
position: absolute;
|
|
top: 300px;
|
|
left: 7px;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.guanzhu5 {
|
|
color: springgreen;
|
|
position: absolute;
|
|
left: 80%;
|
|
top: 300px;
|
|
}
|
|
|
|
.name5 {
|
|
position: absolute;
|
|
top: 300px;
|
|
left: 60px;
|
|
}
|
|
|
|
.introduction5 {
|
|
position: absolute;
|
|
top: 323px;
|
|
font-size: 8px;
|
|
color: silver;
|
|
left: 60px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="box">
|
|
<div class="head">
|
|
<p class="writer">推荐作者</p>
|
|
<img class="img" src="./1624096674(1).jpg" alt="">
|
|
<p class="more">换一批</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="list">
|
|
<ul>
|
|
<li class="list1">
|
|
<img class="list1-1" src="./list1.webp" alt="">
|
|
<a class="name1">卢璐说</a>
|
|
<a class="guanzhu1">+关注</a>
|
|
<p class="introduction1">写了2033.7k字·34.2k喜欢</p>
|
|
</li>
|
|
<li class="list2">
|
|
<img class="list1-2" src="./list2.webp" alt="">
|
|
<a class="name2">Hobbit霍比特人</a>
|
|
<a class="guanzhu2">+关注</a>
|
|
<p class="introduction2">写了422.5k字·1.8k喜欢</p>
|
|
</li>
|
|
<li class="list3">
|
|
<img class="list1-3" src="./list3.webp" alt="">
|
|
<a class="name3">野狐狸</a>
|
|
<a class="guanzhu3">+关注</a>
|
|
<p class="introduction3">写了394.6k字·6.4k喜欢</p>
|
|
</li>
|
|
<li class="list4">
|
|
<img class="list1-4" src="./list4.webp" alt="">
|
|
<a class="name4">简书钻首席小管家</a>
|
|
<a class="guanzhu4">+关注</a>
|
|
<p class="introduction4">写了456.7k字·109.9k喜欢</p>
|
|
</li>
|
|
<li class="list5">
|
|
<img class="list1-5" src="./list5.webp" alt="">
|
|
<a class="name5">闫泽华</a>
|
|
<a class="guanzhu5">+关注</a>
|
|
<p class="introduction5">写了255.6k字·4.7k喜欢</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |