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

110
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/IT之家.html Normal file
View File

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

111
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/css定位.html Normal file
View File

@@ -0,0 +1,111 @@
<!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="http://at.alicdn.com/t/font_3246126_4007nvpu8p.css">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.haeder {
width: 1190px;
height: 46px;
}
.center {
text-align: center;
}
.center img {
width: 125px;
height: 40px;
margin-right: 18px;
float: left;
}
.search {
height: 40px;
width: 544px;
border-radius: 10px 0 0 10px;
border: 2px solid #4E6EF2;
float: left;
position: relative;
line-height: 40px;
}
.search input {
width: 443px;
/* border: 1px solid red; */
}
.list {
position: absolute;
left: 0;
top: 0;
margin-left: 10px;
}
.num{
position: absolute;
right: 0;
top: 10px;
background-color: #F5f5f6;
color: #9195a3;
width: 20px;
height: 20px;
line-height: 20px;
margin-right: 10px;
border-radius: 50%;
}
.right{
float: left;
background-color: #4E6EF2;
border: 2px solid #4E6EF2;
height: 40px;
width: 112px;
line-height: 40px;
border-radius:0 10px 10px 0 ;
}
.right a{
color: #FFF;
text-align: center;
}
</style>
<body>
<div class="header">
<div class="center">
<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="">
<div class="search">
<input type="text" placeholder="陆旗">
<div class="list">
<span> 网页</span>
<i class="iconfont icon-xialacaidanjiantou"></i>
</div>
<div class="num">3</div>
</div>
<div class="right">
<a href="">百度一下</a>
</div>
</div>
</div>
</body>
</html>

113
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/css定位2.html Normal file
View File

@@ -0,0 +1,113 @@
<!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="http://at.alicdn.com/t/font_3246126_4007nvpu8p.css">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 1190px;
height: 46px;
}
.center {
text-align: center;
}
.center img {
float: left;
width: 128px;
height: 40px;
}
.search {
float: left;
margin-right: 18px;
width: 543px;
border-radius: 10px 0 0 10px;
border: 2px solid #4E6EF2;
position: relative;
}
.search .left {
line-height: 44px;
}
.left {
top: 10px;
left: 10px;
position: absolute;
}
.left span {}
.left i {}
.num {
position: absolute;
box-sizing: border-box;
width: 100%;
}
input {
box-sizing: border-box;
width: 100%;
color: #333;
}
.right {
float: left;
background-color: #4E6EF2;
border: 2px solid #4E6EF2;
width: 112px;
height: 44px;
font-size: 17px;
border-radius: 0 10px 10px 0;
}
}
.right a {}
</style>
<body>
<div class="main">
<div class="center">
<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="">
<div class="search">
<input type="text" placeholder="搜索">
<div class="left">
<span>网页</span>
<i class="iconfont icon-xialacaidanjiantou"></i>
</div>
<div class="num">3</div>
</div>
<div class="right">
<a href="">百度一下</a>
</div>
</div>
</div>
</body>
</html>

144
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/css浮动.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>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {}
.center {
margin: 0 auto;
width: 1200px;
}
.list {}
h1 {
margin-bottom: 15px;
text-align: center;
}
.recommend {
width: 573px;
height: 50px;
margin: 0 auto;
}
.recommend li {
float: left;
margin: 0 auto;
}
.recommend li :hover {
color: #31c27c;
}
.recommend li a {
font-size: 15px;
margin: 0 24px;
}
.logo {
overflow: hidden;
}
.logo img {
width: 100%;
}
.logo li {
float: left;
width: 224px;
margin-right: 20px;
}
.logo li:last-child {
margin-right: 0 !important;
}
</style>
<body>
<div class="main">
<div class="center">
<div class="list">
<h1>歌单推荐</h1>
<ul class="recommend">
<li>
<a>为你推荐</a>
</li>
<li>
<a>经典</a>
</li>
<li>
<a>经典国语</a>
</li>
<li>
<a>广场舞</a>
</li>
<li>
<a>官方歌单</a>
</li>
<li>
<a>情歌</a>
</li>
</ul>
<ul class="logo">
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

128
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/css浮动2.html Normal file
View File

@@ -0,0 +1,128 @@
<!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>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.header {}
.center {
width: 1200px;
margin: 0 auto;
}
h1 {
color: #000;
font-size: 14px;
margin-bottom: 15px;
text-align: center;
}
.list {
width: 573px;
height: 50px;
margin: 0 auto;
}
.list li {
float: left;
margin: 0 auto;
}
.list li span {
font-size: 15px;
margin: 0 24px;
}
.list li :hover {
color: #31c27c;
}
.logo {
overflow: hidden;
}
.logo li {
float: left;
width: 224px;
}
.logo li img {
width: 100px;
}
</style>
<body>
<div class="header">
<div class="center">
<h1>歌单推荐</h1>
<ul class="list">
<li>
<span>为你推荐</span>
</li>
<li>
<span>情歌</span>
</li>
<li>
<span>网络歌曲</span>
</li>
<li>
<span>官方歌单</span>
</li>
<li>
<span>经典</span>
</li>
</ul>
<ul class="logo">
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1"
alt="">
<p>sss</p>
<p>ccc</p>
</li>
</ul>
</div>
</div>
</body>
</html>

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";
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

29
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/包河直播/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;
}

34
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/包河直播/index.html Normal file
View File

@@ -0,0 +1,34 @@
<!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>
<body>
<div class="header">
<ul class="tittle">
<li>
<span>包河radio</span>
<span>包河TV</span>
<span>融媒直播</span>
</li>
</ul>
<div class="content">
<ul class="photo">
<li>
<img src="" alt="">
<div class="wz">
<p></p>
<span>342252人在看</span>
</div>
<div class="hy">“文字鬼才”马伯庸新书发布座谈会(标题一行就一行)</div>
</li>
</ul>
</div>
</div>
</body>
</html>

11
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/包河直播/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";
}

45
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/搜索.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>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
input {
width: 160px;
height: 38px;
background: url("ss.png") #EEEEEE;
background-repeat: no-repeat;
background-size: 20px;
border-radius: 20px;
padding-left: 5px;
padding-right: 30px;
box-sizing: border-box;
background-position: 135px 8px;
}
</style>
<body>
<input type="text" placeholder="搜索">
</body>
</html>

117
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/盒子模型.html Normal file
View File

@@ -0,0 +1,117 @@
<!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>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.comment {}
.comment_title {
height: 51px;
font-size: 16px;
display: flex;
color: #333333;
align-items: center;
padding: 0 12px;
}
.comment ul {
padding: 14px 12px;
}
.comment ul li {
display: flex;
margin-bottom: 35px;
}
.comment ul li avter {
width: 35px;
height: 36px;
margin-right: 10px;
border-radius: 100%;
}
.comment_content {}
.comment_content .comment_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.comment_top .zan {
display: flex;
}
.comment_content .comment_top .comment_name {
font-size: 14px;
color: #333333;
margin-bottom: 5px;
}
.comment_top .comment_name.zan_img {
width: 13px;
height: 14px;
margin-right: 5px;
}
.comment_top .comment_name span {
font-size: 12px;
color: #999999;
}
.comment_bottom {
font-size: 10px;
color: #999999;
margin-bottom: 19px;
}
.comment_des {
font-size: 14px;
color: #333333;
}
</style>
<body>
<div class="comment">
<div class="comment_title">全部评论</div>
<ul>
<li>
<img class="avter"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="comment_content">
<div class="comment_top">
<div class="comment_name">呆小瓜</div>
<div class="zan">
<img class="zan_img"
src="C:\Users\admin\Desktop\front-end-team\项目练习\学生项目\陆旗\css练习.htmi\zan.png" alt="">
<span>15</span>
</div>
</div>
<div class="coment_bottom">刚刚</div>
</div>
</li>
</ul>
</div>
</body>
</html>

72
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/知乎.html Normal file
View File

@@ -0,0 +1,72 @@
<!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>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 490px;
height: 450px;
border-radius: 4px;
border: 1px solid #d3d3d3;
text-align: center;
}
.main img {
width: 100%;
height: 100%p;
}
.main h1 {
margin: 32px auto 4px;
font-size: 34px;
font-weight: 500;
color: #121212;
}
.main p {
margin: 4px auto 36px;
font-size: 22px;
color: #444;
}
.logo {
width: 350px;
height: 36px;
background-color: #06f;
color: #fff;
font-size: 14px;
border-radius: 3px;
border: 1px solid #06f;
line-height: 36px;
text-align: center;
margin: 0 auto;
}
</style>
<body>
<div class="main">
<img src="https://static.zhihu.com/heifetz/assets/loginBackgroundImg.2c81e205.png" alt="">
<h1>登录一下</h1>
<p>更多精彩内容等你发现</p>
<div class="logo">登录</div>
</div>
</body>
</html>

71
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/知乎css.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 490px;
height: 450px;
border-radius: 4px;
border: 1px solid #d3d3d3;
text-align: center;
}
.main img {
width: 100%;
}
.main h1 {
margin-top: 32px;
margin-bottom: 4px;
font-size: 34px;
color: #121212;
}
.main p {
margin-top: 4px;
margin-bottom: 36px;
font-size: 22px;
color: #444;
}
.main .logo {
width: 350px;
height: 36px;
background-color: #06f;
color: #fff;
border-radius: 3px;
border: 1px solid #06f;
font-size: 14px;
line-height: 36px;
margin: 0 auto;
}
</style>
<body>
<div class="main">
<img src="https://static.zhihu.com/heifetz/assets/loginBackgroundImg.2c81e205.png" alt="">
<h1>登录一下</h1>
<p>更多精彩内容等你发现</p>
<div class="logo">登录</div>
</div>
</body>
</html>

66
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/简书.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>
</head>
<body>
<div class="main">
<div class="main_list">
<p>推荐作者</p>
<div class="main_right">
<img src="" alt="">
<p>换一批</p>
</div>
</div>
<ul class="content">
<ul class="left">
<li>
<img src="" alt="">
<a href=""></a>
<span>写了262.4k字 · 4.8k喜欢</span>
</li>
<li>
<img src="" alt="">
<a href=""></a>
<span>写了262.4k字 · 4.8k喜欢</span>
</li>
<li>
<img src="" alt="">
<a href=""></a>
<span>写了262.4k字 · 4.8k喜欢</span>
</li>
</ul>
<ul class="right">
<li>
<img src="" alt="">
<span>关注</span>
</li>
<li>
<img src="" alt="">
<span>关注</span>
</li>
<li>
<img src="" alt="">
<span>关注</span>
</li>
<li>
<img src="" alt="">
<span>关注</span>
</li>
</ul>
</ul>
<div class="bottom">
<span>查看全部</span>
<img src="" alt="">
</div>
</div>
</body>
</html>

67
历届学生/front-end-team/项目练习/学生项目/陆旗/css练习.htmi/菜鸟教程练习.html Normal file
View File

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