bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/rem.html/2index.html Normal file
View File

@@ -0,0 +1,293 @@
<!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>Document</title>
<link rel="stylesheet" href="./clear.css">
<script src="./rem.js"></script>
</head>
<style>
body {
font-size: 0;
}
.header {
height: 1rem;
background-color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
z-index: 9999;
padding-left: 0.24rem;
padding-right: 0.4rem;
}
.header .img_logo {
height: 0.65rem;
}
.open {
width: 1.44rem;
height: 0.52rem;
background-color: #d0302c;
border-radius: 0.08rem;
color: #ffffff;
font-size: 0.24rem;
display: flex;
align-items: center;
justify-content: center;
}
.content {
margin-top: 1rem;
}
.content .video {
height: 4.22rem;
}
.content .video_text {
position: relative;
padding-bottom: 0.53rem;
padding-top: 0.59rem;
}
.content .video_text::after {
content: "";
position: absolute;
background-color: #999999;
width: 100%;
height: .02rem;
transform: scaleY(0.5);
display: inline-block;
bottom: 0;
left: 0;
}
.video_text .title {
font-size: 0.36rem;
color: #333333;
padding-left: 0.23rem;
padding-right: 0.52rem;
margin-bottom: 0.3rem;
}
.video_text .time {
font-size: 0.23rem;
color: #999999;
margin-bottom: 0.27rem;
padding-left: 0.23rem;
}
.video_text .action {
display: flex;
align-items: center;
justify-content: space-between;
}
.action .action_left {
display: flex;
align-items: center;
}
.action_left .action_item {
display: flex;
justify-content: center;
align-items: center;
}
.action_left .action_item .collect_small {
width: 0.28rem;
height: 0.28rem;
padding-left: 0.25rem;
padding-right: 0.08rem;
}
.action_left .action_item span {
font-size: 0.24rem;
color: #999999;
}
.action_left .action_item .good {
width: 0.26rem;
height: 0.27rem;
padding-right: 0.1rem;
}
.action_left .action_item span {
font-size: 0.24rem;
color: #999999;
padding-right: 0.86rem;
}
.action .action_right {}
.action .action_right .action_item {}
.action .action_right .action_item span {
font-size: 0.24rem;
color: #999999;
}
.action .action_right .action_item .down {
width: 0.17rem;
height: 0.1rem;
padding-left: 0.1rem;
padding-right: 0.24rem;
}
.recommend {}
.recommend .recommend_title {
height: 1rem;
font-size: 0.32rem;
color: #333333;
display: flex;
align-items: center;
}
.recommend ul {
display: flex;
overflow-x: scroll;
}
.recommend ul li {
margin-right: 0.1rem;
flex-shrink: 0;
width: 2.74rem;
}
.recommend .top {
width: 2.74rem;
height: 1.56rem;
position: relative;
margin-bottom: 0.24rem;
}
.recommend .top img {
width: 100%;
height: 100%;
}
.recommend .top span {
font-size: 0.22rem;
color: #ffffff;
position: absolute;
right: 0.14rem;
bottom: 0.13rem;
}
.recommend .text {
font-size: 0.28rem;
}
.active {
color: #d0302c;
}
</style>
<body>
<div class="header">
<img class="img_logo" src="./img/img_logo.png" alt="">
<div class="open">打开</div>
</div>
<div class="content">
<img class="video" src="./img/video.png" alt="">
<div class="video_text">
<div class="title">香港24小时 | 8月25日发生了什么？暴力局面再次升级</div>
<div class="time">2019-04-30 10:45</div>
<div class="action">
<div class="action_left">
<div class="action_item">
<img class="collect_small" src="./img/collect_small.png " alt="">
<span>收藏</span>
</div>
<div class="action_item">
<img class="good" src="./img/good.png " alt="">
<span>12</span>
</div>
</div>
<div class="action_right">
<div class="action_item">
<span>简介</span>
<img class="down" src="./img/down.png" alt="">
</div>
</div>
</div>
</div>
<div class="recommend">
<div class="recommend_title">相关推荐</div>
<ul>
<li class="active">
<div class="top">
<img class="video" src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天给海岛，我的9天8夜</div>
</li>
<li>
<div class="top">
<img class="video" src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天给海岛，我的9天8夜</div>
</li>
<li>
<div class="top">
<img class="video" src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天给海岛，我的9天8夜</div>
</li>
<li>
<div class="top">
<img class="video" src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天给海岛，我的9天8夜</div>
</li>
<li>
<div class="top">
<img class="video" src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天给海岛，我的9天8夜</div>
</ul>
</div>
</div>
</body>
</html>