landaiqing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
landaiqing
2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
Html-Css/homework/05-作业.html Normal file
View File

@@ -0,0 +1,110 @@
<!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>
#app {
box-sizing: border-box;
border: 1px solid #ccc;
padding: 15px;
width: 300px;
margin: 0 auto;
}
#app .header h1 {
font-size: 18px;
border-bottom:solid 1px #ccc ;
padding-bottom: 10px;
}
#app .header h1 span {
padding-left: 15px;
color: rgba(200, 200,2000, .6);
}
ul {
padding-left: 0;
}
ul li {
list-style: none;
/* display: flex; */
align-items: center;
margin: 10px 0;
/* 文本溢出隐藏 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul li::before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
padding-right: 10px 0;
padding-top: 3px;
background-image: url(https://static.zzhitong.com/lesson-files/html/img/7-3.png);
background-repeat: no-repeat;
background-position: 0px 5px;
}
ul li:nth-child(2)::before {
background-position: 0px -24px;
}
ul li:nth-child(3)::before {
background-position: 0px -52px;
}
ul li:nth-child(4)::before {
background-position: 0px -84px;
}
ul li:nth-child(5)::before {
background-position: 0px -115px;
}
ul li:nth-child(6)::before {
background-position: 0px calc(-115px + -32px);
}
ul li:nth-child(7)::before {
background-position: 0px calc(-115px + -32px + -30px);
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<h1>潮流排行 <span>Most Read</span></h1>
</div>
<div class="content">
<ul>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
</ul>
</div>
</div>
</body>
</html>