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>

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

@@ -0,0 +1,29 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}

BIN
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/rem.html/img/changan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 462 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/rem.html/img/collect_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/rem.html/img/down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/rem.html/img/good.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/rem.html/img/img_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/rem.html/img/video.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 394 KiB

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

@@ -0,0 +1,209 @@
<!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">
<link rel="stylesheet" href="./clear.css">
<title>Document</title>
<script src="./rem.js"></script>
</head>
<style>
body {
font-size: 0;
}
.header {
height: 1rem;
background-color: rgb(0 0 0 / 70%);
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.24rem;
padding-right: 0.4rem;
position: fixed;
width: 100%;
top: 0;
left: 0;
box-sizing: border-box;
z-index: 999;
}
.header img {
height: 0.65rem;
}
.open {
width: 1.44rem;
height: 0.52rem;
background-color: #d0302c;
border-radius: 0.08rem;
font-size: 0.24rem;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.conter {
margin-top: 1rem;
}
.conter .video {
height: 4.22rem;
padding-bottom: 0.59rem;
position: relative;
}
.conter .video::after {
content: "";
width: 100%;
height: 1px;
background: #960b0b;
display: inline-block;
transform: scaleY(0.5);
position: absolute;
bottom: 0;
left: 0;
}
.conter .conter_title {
font-size: 0.36rem;
color: #333333;
margin-bottom: 0.3rem;
margin-top: 0.59rem;
padding-left: 0.32rem;
padding-right: 0.52rem;
}
.conter .time {
font-size: 0.23rem;
color: #999999;
padding-left: 0.32rem;
}
.conter .zan {
display: flex;
align-items: center;
justify-content: space-between;
}
.zan .zan_left {
display: flex;
align-items: center;
}
.zan_lef .zan_left_s {
display: flex;
align-items: center;
justify-content: center;
}
.zan_left_s .inp {
width: 0.28rem;
height: 0.28rem;
padding-left: 0.25rem;
padding-right: 0.1rem;
}
.zan_left_s span {
font-size: 0.24rem;
color: #999999;
padding-right: 0.59rem;
}
.zan_left .zan_left_z {
display: flex;
align-items: center;
justify-content: center;
}
.zan_left_z .good {
width: 0.26rem;
height: 0.27rem;
padding-right: 0.1rem;
}
.zan_left_z span {
font-size: 0.24rem;
color: #999999;
}
.zan_right {
display: flex;
align-items: center;
justify-content: center;
}
.zan_right span {
font-size: 0.24rem;
color: #999999;
}
.zan_right .down {
width: 0.17rem;
height: 0.1rem;
padding-right: 0.24rem;
padding-left: 0.28rem;
}
.recommend {}
.recommend .recommend_title {
font-size: 0.28rem;
color: #d0302c;
}
</style>
<body>
<div class="header">
<img src="./img/zbh_h5_img_logo.png" alt="">
<div class="open">打开</div>
</div>
<div class="conter">
<img class="video" src="./img/video.png" alt="">
<div class="conter_title">香港24小时 | 8月25日发生了什么？暴力局面再次升级</div>
<div class="time">2019-04-30 10:45</div>
<div class="zan">
<div class="zan_left">
<div class="zan_left_s">
<img class="inp" src="./img/input_icon_collect_small.png" alt="">
<span>收藏</span>
</div>
<div class="zan_left_z">
<img class="good" src="./img/good.png" alt="">
<span>12</span>
</div>
</div>
<div class="zan_right">
<span>简介</span>
<img class="down" src="./img/down.png" alt="">
</div>
</div>
<div class="recommed">
<div class="title">相关推荐</div>
<div class="item">
<div class="item_top">
<div class="photo">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
</div>
<div class="bottom">一生中总要有个夏天给海岛，我的9天8夜</div>
</div>
</div>
</div>
</body>
</html>

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

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}