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

144
历届学生/front-end-team/项目练习/学生项目/李康/css练习/hender.html Normal file
View File

@@ -0,0 +1,144 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
width: 1200px;
margin: 0 auto;
}
.header {
height: 66px;
background: #1a1a1a;
}
.header_left {}
.header_left .logo {
padding-top: 15px;
margin-right: 35px;
}
.header_left ul {
line-height: 66px;
opacity: .8;
}
.header_left ul li {
float: left;
margin-left: 15px;
text-align: center;
width: 70px;
}
.header_left ul li a {
font-size: 18px;
color: #fff;
}
.header_right {}
.header_right li {
float: left;
line-height: 66px;
font-size: 18px;
color: #fff;
width: 70px;
opacity: .8;
}
.header_right li a {
font-size: 18px;
color: #fff;
}
.header_right li span {}
.header_right li img {}
</style>
</head>
<body>
<div class="header">
<div class="center">
<div class="header_left left">
<a class="left" href="">
<img class="logo" src="https://img.ithome.com/www/ithome.logo.svg" alt="">
</a>
<ul class="left">
<li class="active">
<a href="">首页</a>
</li>
<li>
<a href="">IT圈</a>
</li>
<li>
<a href="">辣品</a>
</li>
</ul>
</div>
<ul class="header_right right">
<li>
<span>设置</span>
<img src="./more.png" alt="">
</li>
<li>
<a href="">投稿</a>
</li>
<li>
<span>订阅</span>
<img src="./more.png" alt="">
</li>
<li>
<span>软媒应用</span>
<img src="./more.png" alt="">
</li>
<li>
<span>登录</span>
</li>
</ul>
</div>
</div>
</body>
</html>

83
历届学生/front-end-team/项目练习/学生项目/李康/css练习/index.html Normal file
View File

@@ -0,0 +1,83 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.menu {
height: 40px;
background-color: #96b97d;
}
.center {
width: 1260px;
margin: 0 auto;
}
.menu li {
float: left;
line-height: 40px;
margin-right: 20px;
}
.menu li a {
font-size: 14.4px;
color: white;
}
.menu li a:hover {
color: #e3efd9;
}
</style>
</head>
<body>
<div class="menu">
<ul class="center">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
</ul>
</div>
</body>
</html>

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 559 B

33
历届学生/front-end-team/项目练习/学生项目/李康/css练习/rem作业/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;
}

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/rem作业/img/live_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/rem作业/img/notice_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/rem作业/img/playback_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/rem作业/img/video.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 394 KiB

140
历届学生/front-end-team/项目练习/学生项目/李康/css练习/rem作业/inde.html Normal file
View File

@@ -0,0 +1,140 @@
<!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">
<style>
.header {
height: 0.59rem;
}
.title {
width: 6.3rem;
height: 0.59rem;
display: flex;
align-items: center;
justify-content: space-around;
margin-left: 0.6rem;
border-bottom: 0.01rem solid #999;
padding-bottom: 00.11rem;
top: 0;
left: 0;
}
.title li {
font-size: 0.2rem;
}
.content {}
.content ul {
width: 7.02rem;
height: 3.9rem;
background-color: #333333;
margin-left: 0.21rem;
}
ul .surface {
}
.video {
width: 7.02rem;
height: 3.9rem;
position:relative
}
ul li{
margin-bottom: 0.75rem;
}
.Video .bbb {
width: 100%;
height: 100%;
}
.aaa {
width: 1.14rem;
height: 0.36rem;
position: absolute
}
ul li .relate {
width: 6.78rem;
height: 0.29rem;
font-size: 0.3rem;
color: #333333;
}
.Video span {
font-size: 0.24rem;
color: #999999;
margin-left: 0.08rem;
position: absolute
}
</style>
</head>
<body>
<div class="header">
<ul class="title">
<li>包河radio</li>
<li>包河TV</li>
<li>融媒直播</li>
</ul>
</div>
<div class="content">
<ul>
<li>
<div class="Video">
<img class="bbb" src="./img/video.png" alt="">
<img class="aaa" src="./img/live_small.png" alt="">
<span>342252人在看</span>
</div>
<div class="relate">“文字鬼才”马伯庸新书发布座谈会(标题一行就一行)</div>
</li>
<li>
<div class="Video">
<img class="bbb" src="./img/video.png" alt="">
<img class="aaa" src="./img/notice_big.png" alt="">
<span>342252人在看</span>
</div>
<div class="relate">九枚玉和您畅谈陪读生活的酸辣苦涩（字体如果两行就展示两行）</div>
</li>
<li>
<div class="Video">
<img class="bbb" src="./img/video.png" alt="">
<img class="aaa" src="./img/playback_big.png" alt="">
<span>342252人在看</span>
</div>
<div class="relate">连接金融合作蜕变共赢未来</div>
</li>
</ul>
</div>
</body>
</html>

11
历届学生/front-end-team/项目练习/学生项目/李康/css练习/rem作业/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";
}

114
历届学生/front-end-team/项目练习/学生项目/李康/css练习/search.html Normal file
View File

@@ -0,0 +1,114 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.left {
float: left;
}
.search {
width: 282px;
}
.top {
width: 280px;
height: 36px;
border: 1px solid #d9dde0;
}
.top input {
width: 210px;
height: 100%;
padding-left: 3px;
box-sizing: border-box;
}
.top .submit {
width: 70px;
height: 100%;
background: #d22222;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 15px;
}
.menu{
margin-top: 8px ;
margin-left: 10px;
overflow: hidden;
font-size: 14px;
}
.menu li{
float: left;
margin-right: 11px;
color: #777;
}
.menu li :first-child{
margin-right: 0px;
}
.menu li a {
color: #777;
font-size: 14px;
}
</style>
</head>
<body>
<div class="search">
<div class="top">
<input class="left" type="text" placeholder="请输入关键字">
<div class="submit left">搜索</div>
</div>
<ul class="menu">
<li>热搜：</li>
<li>
<a href="">苹果</a>
</li>
<li>
<a href="">俄罗斯</a>
</li>
<li>
<a href="">华为</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">微信</a>
</li>
</ul>
</div>
</body>
</html>

45
历届学生/front-end-team/项目练习/学生项目/李康/css练习/ss.html Normal file
View File

@@ -0,0 +1,45 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
input{
width: 240px;
height: 38px;
background: url("ss.png")#eee ;
background-repeat: no-repeat;
background-size: 30px;
background-position: 200px 4px;
border-radius: 25px;
padding-left: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" placeholder="搜索">
</body>
</html>

33
历届学生/front-end-team/项目练习/学生项目/李康/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;
}

43
历届学生/front-end-team/项目练习/学生项目/李康/css练习/优选/index.css Normal file
View File

@@ -0,0 +1,43 @@
body{
display: flex;
flex-direction: column;
height: 100vh;
}
.hander{
}
.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;
background-color: #ffffff;
border-radius: 0.015rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.24rem;
}

30
历届学生/front-end-team/项目练习/学生项目/李康/css练习/优选/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!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="./index.css">
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<ul class="footer">
<li class="active">首页</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

11
历届学生/front-end-team/项目练习/学生项目/李康/css练习/优选/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";
}

33
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河tv/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;
}

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河tv/img/图层1442.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 KiB

176
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河tv/index.html Normal file
View File

@@ -0,0 +1,176 @@
<!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">
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding-top: 0.37rem;
padding-bottom: 0.3rem;
z-index: 999;
}
.header ul {
display: flex;
align-items: center;
justify-content: space-around;
}
ul li {
font-size: 0.3rem;
color: black;
position:relative;
}
.header .action {
font-size: 0.4rem;
}
ul ::after {
content: "";
position: absolute;
background-color: #e91313;
width: 100%;
height: 0.02rem;
transform: scaleY(0.5);
display: inline-block;
bottom: 0;
left: 0;
}
.content {
margin-top: 1.5rem;
}
.content ul {
padding-top: 0.3rem;
}
.content ul li {
width: 7.02rem;
margin-left: 0.21rem;
}
.content_top li .title {
position: relative;
width: 7.02rem;
height: 3.9rem;
padding-bottom: 0.21rem;
}
.content_top li .title img {
width: 100%;
height: 100%;
}
.content_top li .title .conduct {
width: 1.14rem;
height: 0.36rem;
background-color: #ff5f13;
border-radius: 0.04rem;
position: absolute;
right: 0.14rem;
top: 0.14rem;
font-size: 0.24rem;
display: flex;
align-content: center;
justify-content: center;
}
.content_top li .title p {
font-size: 0.22rem;
color: #e5e5e5;
position: absolute;
right: 0.13rem;
bottom: 0.24rem;
border-radius: 0.04rem;
}
.content_top li .title .introduce {
font-size: 0.3rem;
color: #333333;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li>包河radio</li>
<li>包河TV</li>
<li class="action">融媒直播</li>
</ul>
</div>
<div class="content">
<ul class="content_top">
<li>
<div class="title">
<img src="./img/图层1442.png" alt="">
<span class="conduct">正在直播</span>
<p>342252人在看</p>
</div>
<div class="introduce">“文字鬼才”马伯庸新书发布座谈会(标题一行就一行)</div>
</li>
<li>
<div class="title">
<img src="./img/图层1442.png" alt="">
<span class="conduct">预告</span>
<p>59872人预约</p>
</div>
<div class="introduce">九枚玉和您畅谈陪读生活的酸辣苦涩（字体如果两行就展示两行）</div>
</li>
<li>
<div class="title">
<img src="./img/图层1442.png" alt="">
<span class="conduct">回放</span>
<p>49179人看过</p>
</div>
<div class="introduce">连接金融合作蜕变共赢未来</div>
</li>
</ul>
</div>
</body>
</html>

11
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河tv/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";
}

33
历届学生/front-end-team/项目练习/学生项目/李康/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;
}

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河练习/img/collect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河练习/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练习/包河练习/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练习/包河练习/img/video.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 394 KiB

BIN
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河练习/img/zbh_h5_img_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

269
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河练习/index.html Normal file
View File

@@ -0,0 +1,269 @@
<!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">
</head>
<style>
.pa {
padding-left: 0.25rem;
padding-right: 0.24rem;
}
.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;
left: 0;
top: 0;
width: 100%;
box-sizing: border-box;
z-index: 999;
}
.header img {
height: 0.65rem;
}
.header .open {
width: 1.44rem;
height: 0.52rem;
font-size: 0.24rem;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
background-color: #d0302c;
border-radius: 0.08rem;
}
.content {
margin-top: 1rem;
}
.video {
height: 4.22rem;
}
.video_text {
padding-top: 0.59rem;
border-bottom: 0.01rem solid #e5e5e5;
padding-bottom: 0.53rem;
position: relative;
}
.video_text .title {
font-size: 0.36rem;
color: #333333;
margin-bottom: 0.3rem;
}
.video_text .time {
font-size: 0.23rem;
color: #999999;
margin-bottom: 0.3rem;
}
.video_text .action {
display: flex;
align-items: center;
justify-content: space-between;
}
.video_text .action .action_left {
display: flex;
align-items: center;
}
.action .action_item {
display: flex;
align-items: center;
}
.action .action_item .collect {
width: 0.28rem;
height: 0.28rem;
}
.action .action_item .good {
width: 0.26rem;
height: 0.27rem;
}
.action .action_item .down {
width: 0.17rem;
height: 0.1rem;
margin-left: 0.11rem;
}
.action .action_item span {
margin-left: 0.08rem;
font-size: 0.24rem;
color: #999999;
}
.m_right {
margin-right: 0.6rem;
}
.recommend .recommend_title {
height: 1rem;
background-color: #ffffff;
font-size: 0.32rem;
color: #333333;
display: flex;
align-items: center;
}
.recommend ul {
display: flex;
overflow-x: scroll;
}
.recommend ul li {
width: 2.74rem;
margin-right: 0.1rem;
flex-shrink: 0;
}
.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;
color: #333333;
}
.active .text {
color: #d0302c;
}
</style>
<body>
<div class="header">
<img src="./img/zbh_h5_img_logo.png" alt="">
<div class="open">打开</div>
</div>
<div class="content">
<img src="./img/video.png" alt="" class="video">
<div class="video_text pa">
<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 m_right">
<img class="collect" src="./img/collect.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 pa">相关推荐</div>
<ul class="pa">
<li class="active">
<div class="top">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">
一生中总要有个夏天给海岛，我的9天8夜
</div>
</li>
<li>
<div class="top">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">特朗普说他有绝对权利命令美企退出中国
</div>
</li>
<li>
<div class="top">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">七岁孩子被欺负了，爸爸的做法引起关注...</div>
</li>
</ul>
</div>
</div>
</body>
</html>

11
历届学生/front-end-team/项目练习/学生项目/李康/css练习/包河练习/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";
}