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

53
历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/橱窗.HTML/box.html Normal file
View File

@@ -0,0 +1,53 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
height: 70px;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
ul li {
flex-grow: inherit;
}
</style>
</head>
<body>
<ul>
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
<li>首页5</li>
<li>首页6</li>
<li>首页7</li>
<li>首页8</li>
<li>首页9</li>
<li>首页10</li>
</ul>
</body>
</html>

33
历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/橱窗.HTML/css/clear.css Normal file
View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的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;
}
body {
font-size: 0px;
}

39
历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/橱窗.HTML/css/index.css Normal file
View File

@@ -0,0 +1,39 @@
body{
display: flex;
flex-direction: column;
height: 100vh;
}
.header{}
.content{
height:100%;
flex: 1;
}
.footer{
height: 1rem;
background-color: #000000;
display: flex;
align-items: center;
justify-content: space-around;
}
.footer li{
font-size: 0.24rem;
color: #ffffff;
position: relative;
}
.footer .active{
font-size: 0.3rem;
}
.footer .active ::after{
content: "";
width:0.51rem;
height: 0.03rem;
position: absolute;
background-color: #ffffff;
border-radius: 0.015rem;
left: 50%;
transform: translateX(-50%);
bottom: -0.24rem;
}

90
历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/橱窗.HTML/index.html Normal file
View File

@@ -0,0 +1,90 @@
<!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>
<script src="./rem.js"></script>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/scode.png" alt="">
<ul>
<li class="active">推荐</li>
<li>关注</li>
<li>直播</li>
</ul>
<img src="./img/search.png" alt="">
</div>
</div>
<div class="content">
<div class="shop">
<div class="shop_name">
<img src="./img/shop.png" alt="">
<span>美林美妆合肥店&nbsp;&nbsp;&nbsp;>7KM</span>
</div>
<div class="shop_goods">
<img class="shop_goods_img" src="./img/item.png" alt="">
<div class="shop_goods_text">
<div class="goods_title">夏季网纱半身裙中长款纱……</div>
<div class="goods_price">
<span class="price">¥68.00</span>
<span class="goods_select">
<span>精选</span>
</span>
</div>
<div class="goods_nums">已卖1020</div>
</div>
<img class="shop_goods_car" src="./img/car.png" alt="">
</div>
<div class="shop_music">
<img src="./img/music.png" alt="">
<span>你像花儿一样美（DJ）版</span>
</div>
</div>
<div class="user">
<div class="user_avter">
<img class="user_it" src="./img/item.png" alt="">
<img class="add" src="./img/add.png" alt="">
</div>
<ul class="list">
<li>
<img src="./img/like.png" alt="">
<p>71.1W</p>
</li>
<li>
<img src="./img/share.png" alt="">
<p>分享</p>
</li>
<li>
<img src="./img/comment.png" alt="">
<p>评论</p>
</li>
<li>
<img src="./img/dz.png" alt="">
<p>购物袋</p>
</li>
</ul>
</div>
</div>
<ul class="footer">
<li class="active">首页</li>
<li>好友</li>
<li>购物车</li>
<li>首圈子</li>
<li>我的</li>
</ul>
</body>
</html>

11
历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/橱窗.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";
}