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

17
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/css/clear.css Normal file
View File

@@ -0,0 +1,17 @@
/* 专门用来清除标签的默认样式的 */
li {
list-style: none; /* 清除li标签的小圆点 */
}
a {
text-decoration: none; /* 清除a标签的下划线 */
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input {
outline: none;
}

171
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/css/index.css Normal file
View File

@@ -0,0 +1,171 @@
.header {
width: 8.64rem;
height: 1.6rem;
background: #a4a4a7;
border-radius: 0.8rem;
margin-top: 1.08rem;
margin-left: 0.48rem;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 0.68rem;
box-sizing: border-box;
}
.header_left img {
width: 1.4rem;
height: 1.4rem;
margin-top: 0.2rem;
margin-left: 0.14rem;
}
.header_mid .top {
font-size: 0.52rem;
color: #ffffff;
}
.header_mid .bottom {
font-size: 0.44rem;
color: #ffffff;
}
.header_right {
width: 2.1rem;
height: 0.9rem;
background: #ea4e3d;
border-radius: 0.48rem;
display: flex;
justify-content: center;
align-items: center;
}
.header_right img {
width: 0.68rem;
height: 0.48rem;
}
.header_right span {
font-size: 0.48rem;
color: #ffffff;
}
.content {
position: relative;
}
.content .name {
position: absolute;
left: 0.28rem;
top: 12.68rem;
}
.name_one {
width: 7rem;
height: 1rem;
background-color: #4799ee;
border-radius: 0.2rem;
opacity: 0.4;
display: flex;
align-items: center;
padding-left: 0.34rem;
margin-bottom: 0.62rem;
}
.name_one img {
width: 0.68rem;
height: 0.48rem;
}
.name_one span {
font-size: 0.52rem;
color: #ffffff;
}
.name_list {
width: 6.48rem;
height: 1rem;
background-color: #000000;
border-radius: 0.5rem;
opacity: 0.4;
display: flex;
align-items: center;
padding-left: 0.46rem;
margin-bottom: 0.26rem;
}
.name_list .list_one {
font-size: 0.52rem;
color: #4799ee;
}
.name_list .list_two {
font-size: 0.52rem;
color: #ffffff;
}
.content_bottom {
display: flex;
align-items: center;
position: absolute;
left: 0.6rem;
top: 16.28rem;
}
.bottom_left {
display: flex;
}
.bottom_left img {
width: 3.3rem;
height: 3.3rem;
border-radius: 0.2rem 0.2rem 0rem
}
.bottom_left li {
background: #fff;
margin-right: 0.2rem;
}
.left_one {
font-size: 0.4rem;
color: #000000;
margin-top: 0.16rem;
margin-bottom: 0.34rem;
margin-left: 0.26rem;
}
.left_two {
font-size: 0.4rem;
color: #ea4e3d;
margin-left: 0.26rem;
}
.bottom_right img {
width: 0.52rem;
height: 2.8rem;
}
.footer {
display: flex;
position: fixed;
width: 100%;
height: 2rem;
bottom: 0;
left: 0;
align-items: center;
padding-left: 0.8rem;
padding-right: 0.58rem;
}
.footer img {
width: 1.26rem;
height: 1.26rem;
}
.footer input {
background-color: #000000;
border-radius: 0.62rem;
opacity: 0.4;
padding-left: 0.5rem;
height: 1.26rem;
margin-left: 0.2rem;
margin-right: 0.58rem;
}
.footer_right {
display: flex;
}
.footer_left,.footer_right li {
width: 1.26rem;
height: 1.26rem;
}
.footer_right li {
margin-right: 0.3rem;
}
body {
background: url(../img/the.png);
background-size: 100%;
background-repeat: no-repeat;
}

0
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/css/public.css Normal file
View File

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/end.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/five.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/four.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/heard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/share.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/six.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/the.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/img/two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

92
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/index.html Normal file
View File

@@ -0,0 +1,92 @@
<!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="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_left">
<img src="./img/one.png" alt="">
</div>
<div class="header_mid">
<p class="top">昵称 | ID：12345</p>
<p class="bottom">7455观看| 首尔市</p>
</div>
<div class="header_right">
<img src="./img/two.png" alt="">
<span>关注</span>
</div>
</div>
<div class="content">
<ul class="name">
<li class="name_one">
<img src="./img/two.png" alt="">
<span>我是嘟嘟嘴 关注了主播</span>
</li>
<li class="name_list">
<span class="list_one">小飞仙：</span>
<span class="list_two">我下单啦查看下</span>
</li>
<li class="name_list">
<span class="list_one">小飞仙：</span>
<span class="list_two">我下单啦查看下</span>
</li>
</ul>
<div class="content_bottom">
<ul class="bottom_left">
<li class="left_list">
<img src="./img/four.png" alt="">
<p class="left_one">品牌经典多…</p>
<p class="left_two">￥160.00</p>
</li>
<li>
<img src="./img/five.png" alt="">
<p class="left_one">品牌彩二十…</p>
<p class="left_two">￥160.00</p>
</li>
<li class="left_list">
<img src="./img/four.png" alt="">
<p class="left_one">品牌经典多…</p>
<p class="left_two">￥160.00</p>
</li>
<li class="left_list">
<img src="./img/four.png" alt="">
<p class="left_one">品牌经典多…</p>
<p class="left_two">￥160.00</p>
</li>
</ul>
<div class="bottom_right">
<img src="./img/six.png" alt="">
</div>
</div>
</div>
<div class="footer">
<div class="footer_left">
<img src="./img/shop.png" alt="">
</div>
<input type="text" placeholder="说些什么...">
<ul class="footer_right">
<li>
<img src="./img/share.png" alt="">
</li>
<li>
<img src="./img/heard.png" alt="">
</li>
<li>
<img src="./img/end.png" alt="">
</li>
</ul>
</div>
</body>
<script src="./js/rem.js"></script>
</html>

11
历届学生/fontendsix/项目练习/学生项目/蔡敏/练习/rem/1-58/js/rem.js Normal file
View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 50)
};
window.onresize = function () {
getRem(750, 50)
};
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";
}