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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-128/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;
}

51
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-128/css/index.css Normal file
View File

@@ -0,0 +1,51 @@
.header {
width: 100%;
height: 1.8rem;
position: fixed;
left: 0;
top: 0;
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.6rem;
border-bottom: 0.02rem solid #f3f4f7;;
}
.header img {
width: 0.38rem;
height: 0.68rem;
}
.header span {
font-size: 0.68rem;
color: #333333;
}
.header div {
width: 0.38rem;
height: 0.68rem;
}
.list {
background: #5697f4;
width: 13.8rem;
height: 7.8rem;
margin: 2.82rem auto 0;
border-radius: 0.3rem;
text-align: center;
padding-top: 1.12rem;
}
.list p {
font-size: 0.52rem;
color: #ffffff;
}
.list img {
width: 1.84rem;
height: 1.84rem;
margin-bottom: 0.64rem;
}
.list .one {
margin-bottom: 1.9rem;
}
.list .two {
margin-bottom: 1.26rem;
}

0
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-128/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-128/img/jia.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-128/img/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

36
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-128/index.html Normal file
View File

@@ -0,0 +1,36 @@
<!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">
<img src="./img/left.png" alt="">
<span>余额提现</span>
<div></div>
</div>
<div class="content">
<div class="list">
<p class="one">您还没有绑定银行卡，请绑定银行卡后再进行余额提现</p>
<img src="./img/jia.png" alt="">
<p class="two">添加银行卡</p>
</div>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

11
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-128/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";
}

17
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/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;
}

96
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/css/index.css Normal file
View File

@@ -0,0 +1,96 @@
.header {
width: 100%;
height: 0.9rem;
top: 0;
left: 0;
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.42rem;
box-sizing: border-box;
z-index: 999;
}
.header img {
width: 0.15rem;
height: 0.29rem;
}
.header p {
font-size: 0.34rem;
color: #333333;
}
.header div {
width: 0.15rem;
height: 0.29rem;
}
.content {
margin-top: 0.9rem;
}
.content_top {
display: flex;
position: relative;
justify-content: center;
}
.content_top img {
width: 0.27rem;
height: 0.28rem;
position: absolute;
left: 0.68rem;
top: 0.14rem;
}
.content_top input {
width: 6.9rem;
height: 0.56rem;
background-color: #f0f0f0;
border-radius: 0.28rem;
border: solid 0.01rem #d5d5d5;
padding-left: 0.87rem;
box-sizing: border-box;
}
.content_mid {
display: flex;
justify-content: space-between;
padding: 0.34rem 0.59rem 0.24rem 0.66rem;
}
.mid_one,.mid_two,.mid_the,.mid_four {
font-size: 0.24rem;
}
.mid_one {
color: #ff7b41;
}
.mid_the img {
width: 0.15rem;
height: 0.19rem;
}
.mid_four img {
width: 0.18rem;
height: 0.23rem;
}
.content_bottom {
display: flex;
flex-wrap: wrap;
padding-left: 0.25rem;
}
.content_bottom li {
width: 3.4rem;
height: 5rem;
background-color: #ffffff;
border-radius: 0.1rem;
margin-right: 0.19rem;
margin-bottom: 0.48rem;
}
.content_bottom img {
width: 3.46rem;
height: 3.46rem;
}
.bottom_list {
font-size: 0.24rem;
color: #3f3f3f;
margin: 0.19rem 0.27rem 0.26rem 0.13rem
}
.bottom_nums {
font-size: 0.28rem;
color: #ff7b41;
margin-left: 0.13rem;
}

0
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/img/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/img/ser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/img/share.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/img/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/img/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

66
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/index.html Normal file
View File

@@ -0,0 +1,66 @@
<!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">
<img src="./img/left.png" alt="">
<p>商品列表</p>
<div></div>
</div>
<div class="content">
<div class="content_top">
<img src="./img/ser.png" alt="">
<input type="text" placeholder="搜索">
</div>
<ul class="content_mid">
<li class="mid_one">最新</li>
<li class="mid_two">销量</li>
<li class="mid_the">
<span>价格</span>
<img src="./img/top.png" alt="">
</li>
<li class="mid_four">
<span>筛选</span>
<img src="./img/share.png" alt="">
</li>
</ul>
<ul class="content_bottom">
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

11
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-13/js/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";
}

17
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/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;
}

175
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/css/index.css Normal file
View File

@@ -0,0 +1,175 @@
.header {
width: 100%;
height: 0.9rem;
left: 0;
top: 0;
position: fixed;
display: flex;
align-items: center;
padding-left: 0.21rem;
background-color: #ffffff;
z-index: 999;
}
body {
background: #f2f2f2;
}
.header_left {
width: 0.2rem;
height: 0.35rem;
}
.header_right {
display: flex;
position: relative;
margin-left: 0.48rem;
}
.header_right img {
width: 0.32rem;
height: 0.34rem;
position: absolute;
left: 0.24rem;
top: 0.13rem;
}
.header_right input {
width: 6.31rem;
height: 0.6rem;
background-color: #f2f2f2;
border-radius: 0.3rem;
padding-left: 0.74rem;
box-sizing: border-box;
}
.content {
margin-top: 0.9rem;
}
.content_top {
padding-left: 0.36rem;
background-color: #ffffff;
}
.content_list {
display: flex;
overflow-x: scroll;
width: 100%;
height: 0.94rem;
align-items: center;
}
.top_list {
font-size: 0.3rem;
color: #5697f4;
margin-right: 0.39rem;
flex-shrink: 0;
}
.top_menu {
font-size: 0.3rem;
color: #424242;
margin-right: 0.24rem;
flex-shrink: 0;
}
.top_bottom {
width: 0.31rem;
height: 0.04rem;
background-color: #5697f4;
margin-left: 0.13rem;
}
.content_bottom {}
.content_bottom li {
background: #fff;
margin-top: 0.12rem;
}
.bottom_title {
display: flex;
justify-content: space-between;
align-items: center;
height: 0.73rem;
padding: 0 0.32rem;
}
.title_list {
display: flex;
align-items: center;
}
.title_list .list_one {
width: 0.24rem;
height: 0.25rem;
}
.title_list .list_two {
width: 0.1rem;
height: 0.18rem;
}
.title_list span {
font-size: 0.26rem;
color: #333333;
margin: 0 0.18rem;
}
.bottom_title p {
font-size: 0.26rem;
color: #5697f4;
}
.bottom_commodity {}
.commodity_list {
display: flex;
justify-content: space-between;
padding: 0 0.35rem 0.22rem;
}
.commodity_name {
margin: 0 0.55rem 0 0.18rem;
}
.commodity_list img {
width: 1.36rem;
height: 1.37rem;
}
.commodity_name {}
.commodity_name .name_one {
font-size: 0.3rem;
color: #444444;
width: 3.9rem;
margin-bottom: 0.33rem;
}
.commodity_name .name_two {
font-size: 0.24rem;
color: #aaaaaa;
}
.commodity_nums {}
.commodity_nums .name_the {
font-size: 0.3rem;
color: #000000;
}
.commodity_nums .name_four {
font-size: 0.24rem;
color: #aaaaaa;
margin-left: 0.55rem;
}
.commodity_money {
padding-left: 2.45rem;
padding-right: 0.28rem;
}
.commodity_money p {
font-size: 0.24rem;
color: #000000;
}
.commodity_ser {
display: flex;
justify-content: end;
padding-top: 0.2rem ;
}
.commodity_del {
width: 1.28rem;
height: 0.46rem;
font-size: 0.24rem;
color: #888888;
border-radius: 0.23rem;
border: solid 0.01rem #dddddd;
line-height: 0.46rem;
text-align: center;
margin-right: 0.11rem;
}
.commodity_eva {
width: 1.28rem;
height: 0.46rem;
font-size: 0.24rem;
color: #5697f4;
border-radius: 0.23rem;
border: solid 0.01rem #5697f4;
line-height: 0.46rem;
text-align: center;
}

0
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/img/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/img/one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/img/right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/img/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/img/the.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/img/two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

123
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/index.html Normal file
View File

@@ -0,0 +1,123 @@
<!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">
<img class="header_left" src="./img/left.png" alt="">
<div class="header_right">
<img src="./img/search.png" alt="">
<input type="text" placeholder="搜索我的订单">
</div>
</div>
<div class="content">
<div class="content_top">
<ul class="content_list">
<li class="top_list">全部</li>
<li class="top_menu">待付款</li>
<li class="top_menu">待发货</li>
<li class="top_menu">待收货</li>
<li class="top_menu">待评价</li>
<li class="top_menu">已完成</li>
<li class="top_menu">售后</li>
</ul>
<div class="top_bottom"></div>
</div>
<ul class="content_bottom">
<li>
<div class="bottom_title">
<div class="title_list">
<img class="list_one" src="./img/shop.png" alt="">
<span>面包自营</span>
<img class="list_two" src="./img/right.png" alt="">
</div>
<p>待评价</p>
</div>
<ul class="bottom_commodity">
<li class="commodity_list">
<img src="./img/one.png" alt="">
<div class="commodity_name">
<p class="name_one">包子芝麻小蛋糕美味香脆新品正品包邮</p>
<p class="name_two">独立包装+原味</p>
</div>
<div class="commodity_nums">
<p class="name_the">￥38.8</p>
<p class="name_four">X1</p>
</div>
</li>
<li class="commodity_list">
<img src="./img/two.png" alt="">
<div class="commodity_name">
<p class="name_one">包子奶酪蛋糕美味新品正品包邮发货</p>
<p class="name_two">整箱x24+奶酪</p>
</div>
<div class="commodity_nums">
<p class="name_the">￥61.2</p>
<p class="name_four">X1</p>
</div>
</li>
</ul>
<div class="commodity_money">
<p>共2件商品，合计：￥100.00 (含运费￥0.00)</p>
<div class="commodity_ser">
<div class="commodity_del">删除订单</div>
<div class="commodity_eva">评价</div>
</div>
</div>
</li>
<li>
<div class="bottom_title">
<div class="title_list">
<img class="list_one" src="./img/shop.png" alt="">
<span>面包自营</span>
<img class="list_two" src="./img/right.png" alt="">
</div>
<p>已完成</p>
</div>
<div class="commodity_list">
<img src="./img/the.png" alt="">
<div class="commodity_name">
<p class="name_one">包子香脆牛角酥美味香脆新品当天发货</p>
<p class="name_two">包装+芝麻</p>
</div>
<div class="commodity_nums">
<p class="name_the">￥30.0</p>
<p class="name_four">X3</p>
</div>
</div>
<div class="commodity_money">
<p>共3件商品，合计：￥9.00 (含运费￥0.00)</p>
<div class="commodity_ser">
<div class="commodity_del">删除订单</div>
<div class="commodity_eva">评价</div>
</div>
</div>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

11
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-133/js/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";
}

17
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/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;
}

124
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/css/index.css Normal file
View File

@@ -0,0 +1,124 @@
body {
background: #f3f4f7;
}
.header {
width: 100%;
height: 1.8rem;
position: fixed;
top: 0;
left: 0;
background: #fff;
padding-left: 0.25rem;
padding-top: 0.67rem;
box-sizing: border-box;
}
.header img {
width: 0.38rem;
height: 0.68rem;
}
.content {
margin-top: 1.8rem;
}
.name {
display: flex;
padding-top: 1.8rem;
padding-left: 0.48rem;
background: #fff;
}
.name_pic {
width: 2.4rem;
height: 2.4rem;
}
.name_list {
margin-left: 0.58rem;
}
.name_one {
display: flex;
align-items: baseline;
margin-bottom: 0.48rem;
}
.name_one span {
font-size: 0.72rem;
line-height: 0.72rem;
color: #000000;
margin-right: 0.2rem;
}
.name_one img {
width: 0.54rem;
height: 0.54rem;
}
.name_list ul li {
font-size: 0.52rem;
color: #868686;
margin-bottom: 0.34rem;
}
.name_mes {
margin-top: 0.34rem;
background: #fff;
padding-left: 0.46rem;
}
.mes_list_one {
font-size: 0.64rem;
color: #000000;
margin-right: 0.75rem;
}
.mes_list_two {
font-size: 0.64rem;
color: #868686;
}
.name_mes li img {
width: 0.28rem;
height: 0.48rem;
padding-right: 0.5rem;
}
.name_mes li {
display: flex;
justify-content: space-between;
align-items: center;
height: 2.18rem;
border-bottom: 0.02rem solid #dcdcdc;
}
.name_mes li:last-child {
border: none;
}
.mes_list_the {
font-size: 0.64rem;
color: #000000;
margin-right: 2rem;
}
.mes_list_four {
font-size: 0.64rem;
color: #5a6f92;
}
.name_bottom {
background: #fff;
margin-top: 0.34rem;
}
.name_bottom_one {
width: 0.72rem;
height: 0.68rem;
margin-right: 0.3rem;
}
.name_bottom_two {
width: 0.64rem;
height: 0.68rem;
margin-right: 0.3rem;
}
.name_bottom span {
font-size: 0.64rem;
color: #5a6f92;
margin-right: 0.3rem;
}
.name_bottom li {
height: 2.16rem;
display: flex;
justify-content: center;
align-items: center;
}
.name_bottom li:first-child {
border-bottom: 0.02rem solid #dcdcdc;
}

0
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/img/aa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/img/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/img/mes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/img/pic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/img/rab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/img/wm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

79
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/index.html Normal file
View File

@@ -0,0 +1,79 @@
<!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">
<img src="./img/left.png" alt="">
</div>
<div class="content">
<div class="name">
<img class="name_pic" src="./img/pic.png" alt="">
<div class="name_list">
<div class="name_one">
<span>张可</span>
<img src="./img/wm.png" alt="">
</div>
<ul>
<li>昵称：小可爱</li>
<li>ID：1234555</li>
<li>地区：安徽合肥</li>
</ul>
</div>
</div>
<ul class="name_mes">
<li>
<div class="mes_list">
<span class="mes_list_one">好友备注</span>
<span class="mes_list_two">张可</span>
</div>
<img src="./img/aa.png" alt="">
</li>
<li>
<div class="mes_list">
<span class="mes_list_the">手机</span>
<span class="mes_list_four">1300000000</span>
</div>
</li>
<li>
<div class="mes_list">
<span class="mes_list_the">生日</span>
<span class="mes_list_two">1993-12-12</span>
</div>
<img src="./img/aa.png" alt="">
</li>
<li>
<div class="mes_list">
<span class="mes_list_one">朋友圈</span>
</div>
<img src="./img/aa.png" alt="">
</li>
</ul>
<ul class="name_bottom">
<li>
<img class="name_bottom_one" src="./img/mes.png" alt="">
<span>发消息</span>
</li>
<li>
<img class="name_bottom_two" src="./img/rab.png" alt="">
<span>删除</span>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

11
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-33/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";
}

17
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-58/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-58/img/five.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-58/img/one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/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";
}

17
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/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;
}

241
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/css/index.css Normal file
View File

@@ -0,0 +1,241 @@
.header {
width: 100%;
height: 0.9rem;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.45rem 0 0.3rem;
box-sizing: border-box;
border: 0.02rem solid #f7f7f7;
z-index: 999;
}
.header img {
width: 0.19rem;
height: 0.34rem;
}
.header p {
font-size: 0.34rem;
color: #333333;
}
.header span {
font-size: 0.28rem;
color: #347ef4;
}
.content {
margin-top: 0.9rem;
}
.content_top {
display: flex;
padding-top: 0.25rem;
}
.top_left {
display: flex;
flex-direction: column;
position: relative;
padding-left: 0.24rem;
}
.top_left img {
width: 0.8rem;
height: 0.8rem;
}
.top_left div {
width: 0.68rem;
height: 0.24rem;
background-color: #ffe0e8;
border-radius: 0.03rem;
border: solid 0.01rem #fd4a75;
font-size: 0.2rem;
color: #fd4a75;
line-height: 0.24rem;
text-align: center;
position: absolute;
left: 0.3rem;
top: 0.68rem;
}
.top_right {
padding-left: 0.24rem;
width: 100%;
}
.right_list {}
.list_the {
font-size: 0.24rem;
color: #979da7;
margin-top: 0.26rem;
margin-bottom: 0.18rem;
}
.list_one {
font-size: 0.28rem;
color: #333333;
}
.list_two {
font-size: 0.28rem;
color: #292929;
}
.rifht_commodity {
width: 4.5rem;
height: 4.5rem;
position: relative;
}
.rifht_commodity img {
width: 4.5rem;
height: 4.5rem;
}
.rifht_commodity p {
font-size: 0.24rem;
color: #ffffff;
position: absolute;
right: 0.09rem;
bottom: 0.11rem;
}
.right_address {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 0.42rem;
margin-top: 0.2rem;
}
.address_list {}
.address_one {
font-size: 0.24rem;
color: #5a6f92;
margin-bottom: 0.09rem;
}
.address_two {
font-size: 0.24rem;
color: #797979;
}
.address_mes {
display: flex;
}
.address_mes img {
width: 0.39rem;
height: 0.37rem;
margin-left: 0.36rem;
}
.content_bottom {
width: 6.23rem;
height: 3.6rem;
background-color: #f7f7f7;
border-radius: 0.1rem;
margin-left: 1.03rem;
margin-top: 0.27rem;
}
.bottom_title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.22rem 0.2rem 0.38rem 0.2rem;
border-bottom: 0.01rem solid #dedede;
}
.bottom_title p {
font-size: 0.28rem;
color: #5a6f92;
}
.title_choice {
display: flex;
}
.title_choice span {
font-size: 0.24rem;
color: #5a6f92;
}
.title_choice img {
width: 0.38rem;
height: 0.38rem;
margin-left: 0.21rem;
}
.bottom_list {
display: flex;
padding-left: 0.22rem;
padding-top: 0.15rem;
}
.list_mes {
width: 0.36rem;
height: 0.34rem;
}
.list_reply {
margin-left: 0.12rem;
}
.reply_sev {
display: flex;
margin-bottom: 0.28rem;
}
.reply_one {
width: 0.7rem;
height: 0.7rem;
}
.reply_two {
display: flex;
padding: 0 0.23rem;
align-items: center;
}
.reply_the {}
.reply_four {
font-size: 0.24rem;
color: #666666;
margin-bottom: 0.17rem;
}
.reply_five {
font-size: 0.3rem;
color: #333333;
}
.reply_six {
width: 0.38rem;
height: 0.38rem;
}
.reply_chat {
display: flex;
}
.reply_chat img {
width: 0.7rem;
height: 0.7rem;
}
.reply_eight {
margin-left: 0.22rem;
}
.reply_eight p {
font-size: 0.24rem;
color: #666666;
}
.reply_nine {
font-size: 0.28rem;
color: #5a6f92;
}
.reply_ten {
font-size: 0.28rem;
color: #2f7af4;
}
.reply_ele {
font-size: 0.28rem;
color: #333333;
}
.reply_twe {
display: flex;
margin-top: 0.2rem;
}
.footer {
width: 100%;
height: 0.98rem;
bottom: 0;
left: 0;
position: fixed;
display: flex;
}
.footer_left {
background-color: #b4d2fc;
font-size: 0.34rem;
color: #ffffff;
width: 50%;
line-height: 0.98rem;
text-align: center;
}
.footer_right {
background-color: #5697f4;
font-size: 0.34rem;
color: #ffffff;
width: 50%;
line-height: 0.98rem;
text-align: center;
}

0
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/ball.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/head.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/headtwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/mes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/ri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/img/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

106
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!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">
<img src="./img/left.png" alt="">
<p>详情</p>
<span>删除</span>
</div>
<div class="content">
<div class="content_top">
<div class="top_left">
<img src="./img/head.png" alt="">
<div>6年店</div>
</div>
<div class="top_right">
<div class="right_list">
<p class="list_one">新手体验店</p>
<p class="list_the">来自：今日新款</p>
<p class="list_two">本月上新31款</p>
</div>
<div class="rifht_commodity">
<img src="./img/shop.png" alt="">
<p>￥ 36.00</p>
</div>
<div class="right_address">
<div class="address_list">
<p class="address_one">东莞.厂家直供一层30号</p>
<p class="address_two">19/04/24 11:21</p>
</div>
<div class="address_mes">
<img src="./img/heart.png" alt="">
<img src="./img/mes.png" alt="">
</div>
</div>
</div>
</div>
<div class="content_bottom">
<div class="bottom_title">
<p>评论</p>
<div class="title_choice">
<span>全选</span>
<img src="./img/ball.png" alt="">
</div>
</div>
<div class="bottom_list">
<img class="list_mes" src="./img/mes.png" alt="">
<div class="list_reply">
<ul>
<li class="reply_sev">
<img class="reply_one" src="./img/headtwo.png" alt="">
<div class="reply_two">
<div class="reply_the">
<p class="reply_four">童装批发市场</p>
<p class="reply_five">款式好看款式好看款式好看款式好看</p>
</div>
<img class="reply_six" src="./img/ri.png" alt="">
</div>
</li>
<li class="reply_chat">
<img src="./img/head.png" alt="">
<div class="reply_eight">
<p>新手体验店</p>
<div class="reply_twe">
<span class="reply_nine">回复</span> <span class="reply_ten">童装批发市场</span> <span
class="reply_ele">：需要吗？</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_left">取消</div>
<div class="footer_right">删除</div>
</div>
</body>
<script src="./js/rem.js"></script>
</html>

11
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/rem/1-62/js/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";
}