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

63
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/baidu.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>baidu</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/baidu.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_md7snkwkv5.css">
</head>
<body>
<div class="mian">
<div class="top hidden">
<img class="left"
src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="">
<div class="search hidden">
<div class="search_c left">
<span class="wenzi left ">网页</span>
<span></span><i class="iconfont icon-jinrujiantou-copy left "></i></span>
<input type="text" class="left" placeholder="搜索一下">
<div class="shuzi right">3</div>
</div>
<div class="button left">
百度一下
</div>
</div>
<div class="top_r hidden">
<i class="iconfont icon-dian right">
<span class="r_right">马斯克强制员工坐班 德工会回怼 </span>
</i>
</div>
</div>
<div class="">
<ul class="list hidden">
<li class="left">
<a href="">俄乌冲突100天 透露10大信号 </a>
<span class="yellow">热</span>
</li>
<li class="left hidden">
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow left">热</span>
</li>
<li>
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow">热</span>
</li>
<li class="left">
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow">热</span>
</li>
<li>
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow">热</span>
</li>
</ul>
</div>
</div>
</body>
</html>

140
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/bu.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>重写
</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/bu.css">
</head>
<body>
<div class="root">
<div class="mian">
<div class="title">
热点内容
· · · · · ·
<span>(更多)</span>
</div>
<div class="content hidden">
<div class="content_l left hidden">
<ul class="picture left hidden">
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
</ul>
<ul class="list hidden">
<li class="first left">
<a href="">论家庭关系里好好说话的重要性</a>
<div class="mm">
manjon的日记
</div>
<p>今天晚上22:30的时候，老爸给我打电话，说的无非是天气热了，注意防暑之类的日常问候，我刚洗完澡，正打算去洗衣服，于是聊了几分钟和老爸说我要去洗衣服了，打算挂掉...</p>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
</ul>
</div>
<div class="content_r right">
<div class="guanggao">
<img src="https://img9.doubanio.com/view/dale-online/dale_ad/public/f88c6fae4537279.jpg" alt="">
<div class="dingwei">广告</div>
</div>
<div class="button">
<div class="hot">
热门话题
&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·
<span>(去话题广场)</span>
</div>
<ul class="n">
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

46
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/caidan.html Normal file
View File

@@ -0,0 +1,46 @@
<!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="http://at.alicdn.com/t/font_3445167_ty2cnwz6bgn.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<style>
.menu > li {
float: left;
margin-right: 10px;
}
.drop {
display: none;
}
.menu > li:hover .drop {
display: block !important;
}
</style>
</head> -->
<body>
<ul>
<li>
首页1
</li>
<li>
首页1
</li>
<li>
首页1
<ul>
<li>首页1-1</li>
<li>首页1-1</li>
<li>首页1-1</li>
<li>首页1-1</li>
</ul>
</li>
</ul>
</body>
</html>

102
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/baidu.css Normal file
View File

@@ -0,0 +1,102 @@
.mian {
width: 1520px;
height: 121px;
margin: 0 auto;
}
.top {
width: 1190px;
height: 46px;
margin: 0 auto;
margin-top: 20px;
}
.top img {
width: 128px;
height: 40px;
margin-top: -2px;
}
.top .search {
width: 900px;
height: 44px;
}
.search .search_c {
width: 443px;
border-radius: 10px 0 0 10px;
border: 2px solid #4E6EF2;
border-right: 0 !important;
text-align: center;
margin-left: 10px;
line-height: 40px;
height: 40px;
}
.top .search .wenzi {
color: #9195a3;
font-size: 12px;
padding-left: 10px;
}
.top .search input {
height: 16px;
padding: 12px 33px 12px 15px;
margin-left: 10px;
caret-color: #333;
font-size: 16px;
}
.top .search .shuzi {
height: 18px;
width: 18px;
color: #626675;
background-color: red;
text-align: center;
font-size: 12px;
border-radius: 50px;
line-height: 18px;
margin-right: 10px;
margin-top: 10px;
}
.search .button {
width: 112px;
height: 45px;
background-color: #4E6EF2;
color: #fff;
font-size: 17px;
border-radius: 0 10px 10px 0;
text-align: center;
line-height: 45px;
}
.top .top_r{
}
.top_r i{
width: 120px;
/* line-height: 17px; */
font-size: 12px;
color: #666;
margin-top: -12px;
}
.top_r .r_right {
}
.list {
padding: 20px 10px 10px 300px;
}
.list li {
}
.list li a {
color: #333;
font-size: 13px;
}
.yellow{
width: 16px;
height: 16px;
margin-left: 2px;
background-color: #FF9812;
text-align: center;
color: #fff;
line-height: 16px;
border-radius: 4px;
}

148
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/bu.css Normal file
View File

@@ -0,0 +1,148 @@
.root {
width: 100%;
}
.mian {
width: 950px;
margin: 0 auto;
margin-top: 10px;
}
.title {
width: 655px;
font-size: 15px;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
}
.title span {
font-size: 10px;
color: #666666;
}
.content {
width: 950px;
height: 510px;
}
.content .content_l {
width: 655px;
}
.content .content_l .picture {
width: 360px;
margin: -10px 0 0 -10px;
}
.content .content_l .picture li {
float: left;
margin: 10px 0 0 10px;
}
.content .content_l .picture li img {
width: 170px;
height: 170px;
}
.content .content_l .picture li .text {
font-size: 12px;
color: #37a;
}
.content .content_l .picture li .text span {
color: #999;
}
.content .content_l .list {
width: 275px;
float: right;
}
.content .content_l .list .first{
}
.content .content_l .list li a{
color: #37a;
}
.content .content_l .list .first .mm {
color: #999;
}
.content .content_l .list .first p{
color: #666;
line-height: 1.62;
margin-bottom: 15px;
}
.content .content_l .list li{
font-size: 12px;
margin: 10px 0 0 10px;
}
.content .content_r {
width: 265px;
}
.content .content_r .guanggao{
width: 250px;
height: 120px;
position: relative;
}
.content .content_r .guanggao img{
width: 250px;
height: 120px;
}
.content .content_r .guanggao .dingwei{
width: 32px;
height: 20px;
font-size: 12px;
position: absolute;
color: rgb(255, 255, 255);
line-height: 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
right: 0px;
bottom: 0px;
}
.content .content_r .button {
margin-bottom: 30px;
}
.content .content_r .button .hot{
font-size: 15px;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
}
.content .content_r .button .hot span{
font-size: 12px ;
line-height: 150%;
color: #666666;
}
.content .content_r .button .news {
margin-top: -4px;
}
.content .content_r .button .news li {
font-size: 12px;
margin-top: 10px;
}
.content .content_r .button .news li a {
color: #37a;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.3;
}
.content .content_r .button .news li .liulan {
margin-bottom: 15px;
font-size: 13px;
line-height: 1;
color: #aaaaaa;
}

24
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/clear.css Normal file
View File

@@ -0,0 +1,24 @@
/* 清除浏览器默认样式 */
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
html {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}

129
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/douban.css Normal file
View File

@@ -0,0 +1,129 @@
/* .juzhong {
width: 1520px;
height: 510px;
} */
.mian {
width: 950px;
margin: 0 auto;
margin-top: 10px;
}
.mian_l {
width: 655px;
height: 423px;
}
.mian_l .title {
font: 15px Arial, Helvetica, sans-serif;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
}
}
.mian_l .title span{
font: 12px Arial, Helvetica, sans-serif;
line-height: 150%;
color: #666666;
}
.list {
width: 350px;
margin-right: 30px;
color: #999;
}
.list ul{
margin: -10px 0 0 -10px;
}
.list ul li{
float: left;
width: 170px;
vertical-align: top;
font-size: 12px;
margin: 10px 0 0 10px;
zoom: 1;
}
.list ul li img{
width: 170px;
max-height: 170px;
}
.list ul li .text{
color: #37a;
}
.list ul li .text span {
color: #999 !important;
}
.news{
zoom: 1;
color: #666;
width: 275px;
}
.news ul{
font-size: 12px;
}
.mian_l .news ul .first{
margin-top: 0;
}
.mian_l .news ul li {
margin-top: 12px;
height: 20px;
}
.mian_l .news ul li a {
color: #37a;
}
.mian_r{
float: right;
width: 265px;
margin-left: 30px;
margin-top: -423px;
}
.mian_r img{
width: 256px;
height: 125px;
margin: 10px 0px;
}
.mian_r .button{
height: 329px;
}
.mian_r .button .b_hot{
font: 15px Arial, Helvetica, sans-serif;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
height: 22.5px;
}
.mian_r .button .b_hot span{
font: 12px Arial, Helvetica, sans-serif;
line-height: 150%;
color: #666666;
}
.mian_r .button ul{
margin-top: -4px;
height: 298.2px;
}
.mian_r .button ul li{
margin-top: 10px;
color: #999;
line-height: 1;
margin-bottom: 15px;
}
.mian_r .button ul li a{
color: #37a;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.3;
}
.mian_r .button ul li .liulan{
margin-bottom: 15px;
font-size: 13px;
line-height: 1;
color: #aaaaaa;
}

198
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/douding.css Normal file
View File

@@ -0,0 +1,198 @@
.manner {
width:1130px ;
margin: 0 auto;
}
.mian {
width: 1130px;
height: 300px;
/* //水平juzhong */
}
.mian_l{
width: 813px;
height: 275px;
}
.mian_l .top {
height: 40px;
line-height: 40px;
background-color: #f1f1f1;
padding: 0 14px;
font-weight: normal;
border-bottom: 1px solid #e1e1e1;
}
.mian_l .top .text {
font-size: 18px;
color: black;
}
.mian_l .top a {
float: right;
font-size: 12px;
color: #006699;
margin-top: -39px;
}
.list {
width: 813px;
height: 234px;
padding: 0 0 0 18px;
}
.list li {
float: left;
width: 184px;
padding: 10px 0 9px;
margin-right: 14px;
display: inline;
height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
}
.list li i {
color: #4c4c4c;
font-size: 10px;
}
.list li a {
color: #4c4c4c;
padding: 0 0 0 10px;
font-size: 14px;
}
.mian_r {
border: 1px solid #e1e1e1;
width: 300px;
height: 276px;
background: #fff;
margin: 0 0 22px 0;
margin-top: -275px;
}
.mian_r .r_top {
height: 41px;
}
.mian_r .r_top a {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
width: 148px;
width: 50%;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
color: #3e3e3e;
background-color: #f5f6f5;
box-sizing: border-box;
}
.mian_r .r_top .r_top_l {
background-color: #fff !important;
border-bottom: none !important;
}
.mian_r .r_button {
width: 274px;
height: 214px;
}
.mian_r .r_button .text1 {
height: 38px;
margin: 10px 0;
float: left;
width: 272px;
font-size: 14px;
color: #e1e1e1;
border: 1px solid #d5d5d5;
margin-left: 15px;
margin-top: 10px;
}
.mian_r .r_button .text2 {
height: 38px;
margin: 10px 0;
float: left;
width: 272px;
font-size: 14px;
color: #e1e1e1;
border: 1px solid #d5d5d5;
margin-left: 15px;
margin-top: 10px;
}
.mian_r .r_button .foget {
width: 274px;
height: 19.5px;
overflow: hidden;
}
.mian_r .r_button .foget li{
}
.mian_r .r_button .foget li a {
font-size: 12px;
color: #006699;
}
.mian_r .r_button .denglu {
width: 274px;
height: 28px;
color: #fff;
font-size: 14px;
margin-left: 10px;
}
.mian_r .r_button .denglu .dl {
width: 130px;
height: 28px;
line-height: 28px;
background-color: #3086f2;
border-radius: 2px;
text-align: center;
margin-left: 10px;
}
.mian_r .r_button .denglu .wx {
width: 130px;
height: 28px;
line-height: 28px;
background-color: #00be00;
margin-left: 10px;
text-align: center;
color: #fff;
overflow: hidden;
border-radius: 2px;
margin-top: -28px;
}
.mian_r .r_button .banner {
width: 274px;
height: 30px;
margin-left: 10px;
}
.mian_r .r_button .banner li {
margin-top: 35px;
margin-left: 20px;
height: 21px;
}
.mian_r .r_button .banner li a {
width: 42px;
height: 20px;
line-height: 20px;
}
.mian_r .r_button .banner li .qq {
font-size: 14px;
color: #3c3c3c;
}
.mian_r .r_button .banner li .qq i{
color: #006699;
font-size: 14px;
}
.mian_r .r_button .banner a li i:last-child{
font-size: 10px;
color: #2284E2;
}

56
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/jianshu.css Normal file
View File

@@ -0,0 +1,56 @@
.mian {
width: 280px;
}
.title {
height: 20px;
width:100%;
color: #969696;
font-size: 14px;
margin-bottom: 15px;
}
.content li {
margin-bottom: 15px;
}
.content li .picture {
width: 48px;
height: 48px;
border-radius: 100%;
margin-right: 10px;
}
.content .content_top {
width: 222px;
margin-top: 5px;
}
.content .content_top .name {
font-size: 14px;
color: #333;
}
.content .content_top .item_r {
color: #42c02e;
font-size: 13px;
}
.content .content_top .item_r i{
font-size: 10px !important;
}
.content .introduce{
margin-top: 2px;
font-size: 12px;
color: #969696;
}
.bottom {
height: 35px;
width: 280px;
border: 1px solid #dcdcdc;
border-radius: 4px;
background-color: #f7f7f7;
font-size: 13px;
line-height: 35px;
text-align: center;
color: #787878;
}
.bottom i {
font-size: 13px;
}

16
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/public.css Normal file
View File

@@ -0,0 +1,16 @@
/* 公共使用率高的css代码 */
.themeColor {
color: #969696;
}
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}

84
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/qqmusic.css Normal file
View File

@@ -0,0 +1,84 @@
.juzhong {
width: 1200px;
height: 532px;
margin: 0 auto;
}
.mian{
width: 1200px;
height: 532px;
}
.title{
height: 114px;
line-height: 114px;
text-align: center;
font-size: 30px;
color: black;
font-weight: 700;
letter-spacing: 20px;
}
.mune{
height: 50px;
text-align: center;
font-size: 15px;
margin-left: 340px;
}
.mune li {
margin: 0 24px;
color :#333;
float: left;
}
.mune .active{
color: #31c27c;
}
.list{
height: 310px;
margin-right: -20px;
}
.list ul{}
.list ul li{
font-size: 14px;
height: 224px;
float: left;
margin-right: 20px;
}
.list ul li img {
height: 224px;
width: 224px;
}
.list ul li .text{
color: #000;
font-weight: 400;
}
.list ul li .bofang{
color: #999;
height: 22px;
}
.button{
height: 53px;
line-height: 53px;
}
.button ul{
width: 90px;
margin: 0 auto;
}
.button ul .active{
background: rgba(0, 0, 0, 0.3) !important;
}
.button ul li{
width: 12px;
height: 12px;
margin: 0 8px;
border-radius: 100%;
background: #e6e6e6;
float: left;
margin-top: 20.5px;
}

102
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/zhihu.css Normal file
View File

@@ -0,0 +1,102 @@
.mian {
width: 490px;
height: 452px;
background-color: #FFFFFF;
box-shadow: 0px 1px 3px rgb(18 18 18 / 20%);
border-radius: 4px;
margin-top: 10px;
margin-left: 10px;
}
.mian .title {
width: 442px;
height: 72px;
border-bottom: 1px solid #EBEBEB;
margin-left: 24px;
}
.title .text {
color: #121212;
font-size: 20px;
font-weight: 600;
line-height: 72px;
}
.list {
width: 442px;
height: 304px;
font-size: 15px;
}
.list .red {
width: 18px;
height: 18px;
background-color: red;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.list li:first {
height: 42px;
margin-top: 90px;
margin-left: 24px;
}
.list li {
height: 42px;
margin-top: 50px;
margin-left: 24px;
}
.list li a {
margin-left: 4px;
color: #121212;
font-weight: 600;
}
.list li .wenzi {
margin-top: 6px;
margin-left: 22px;
font-size: 12px;
color: #999999;
}
.list .green {
width: 18px;
height: 18px;
background-color: green;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.list .blue {
width: 18px;
height: 18px;
background-color: blue;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.list .yellow {
width: 18px;
height: 18px;
background-color: yellow;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.button{
width: 442px;
height: 46px;
margin-left: 24px;
line-height: 24px;
}
.button .hot {
color: #8590A6;
font-size: 14px;
font-weight: 500;
margin-top: 50px;
}
.button i{
margin-left: -6px;
padding-top: -4px;
}

210
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/zol-leave.css Normal file
View File

@@ -0,0 +1,210 @@
.mian {
width: 1200px;
margin: 0 auto;
}
.title {
height: 44px;
line-height: 44px;
}
.title .title_l {
font-size: 24px;
font-weight: 400;
color: #333;
font-family: 'Microsoft YaHei';
}
.title .title_l span {
margin-right: 8px;
font-weight: 700;
}
.title_r {
}
.title_r li {}
.title_r li a{
font-size: 12px;
float: left;
}
.title .title_r li::after {
content: " ";
width: 0.5px;
height: 12px;
background: #ccc;
display: inline-block;
margin-top: 17px;
margin-left: 7.5px;
margin-right: 7.5px;
}
.title .title_r li a i {
font-size: 12px;
zoom: 0.8;
}
.title .title_r li:last-child::after {
width: 0 !important;
}
.content {
height: 516px;
}
.content .content_l{
width: 300px;
height: 100%;
}
.top {
height: 281px;
background: #52a7d9;
}
.top_t {
background: #1d89bf;
height: 38px;
line-height: 38px;
padding-left: 20px;
padding-right: 15px;
box-sizing: border-box;
}
.top_t .hot {
color: #fff;
font-size: 16px;
}
.top_t ul{
width: 167px;
}
.top_t ul li{
font-size: 14px;
color: #fff;
float: left;
width: 55px;
text-align: center;
}
.top_t ul .active{
background: #52a7d9;
}
.button_list {
padding: 20px 0 10px 20px;
}
.button_list li {
height: 30px;
line-height: 30px;
}
.button_list li:nth-child(1) span,
.button_list li:nth-child(2) span,
.button_list li:nth-child(3) span{
background: #fff;
color: #1d89bf;
}
.button_list li span {
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
display: inline-block;
font-size: 12px;
color: #fff;
}
.button_list li a {
font-size: 12px;
color: #fff;
margin-left: 10px;
}
.more {
height: 53px;
text-align: center;
line-height: 53px;
color: #fff;
font-size: 14px;
border-top: 1px dashed #1d89bf;
width: 260px;
margin: 0 auto;
}
.button {
height: 235px;
padding-top: 25px;
padding-left: 20px;
background: #f5f5f5;
}
.button .button_top{
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.button ul {}
.button ul li {
float: left;
margin-right: 20px;
margin-bottom: 11.5px;
}
.button ul li a{
font-size: 14px;
}
.content_r{
width: 900px;
height: 100%;
}
.r_list{
border-top: 1px solid #ebebeb;
}
.r_list li{
float: left;
padding: 20px 20px 15px;
width: 184px;
height: 195px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb
}
.r_list li img{
width: 160px;
}
.r_list li .title{
font-size: 14px;
word-break: break-all;
}
.r_list li price{
font-size: 12px;
color: #999;
}
.r_list li price span{
font-size: 18px;
color: #f33;
}
.yuan {
height: 53px;
line-height: 53px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
box-sizing: border-box;
}
.yuan ul{
width: 90px;
margin: 0 auto;
}
.yuan ul .active{
background: #42afa7 !important;
}
.yuan ul li{
width: 12px;
height: 12px;
margin: 0 3px;
border-radius: 100%;
background: #e6e6e6;
float: left;
margin-top: 20.5px;
}

77
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/css/zol.css Normal file
View File

@@ -0,0 +1,77 @@
.mian {
width: 1000px;
height: 93px;
margin: 0 auto;
box-sizing: border-box;
}
.logo {
width: 272px;
height: 88px;
margin-top: 40px;
}
.search {
}
.search .tuijian {
margin-top: 45px;
font-size: 12px;
margin-left: 10px;
}
.search .tuijian li{
width: 42px;
height: 20px;
color: #666;
float: left;
}
.search .tuijian li .active{
color: #333;
font-weight: bold;
}
.search_button {
width: 469px;
height: 36px;
margin-top: 6px;
margin-left: 10px;
}
.search_button input {
width: calc(469px - 80px);
height: 36px;
border: 1px solid #ccc;
box-sizing: border-box;
border-right: none;
padding-left: 7px;
font-size: 14px;
}
.search_button .search_text {
width: 80px;
height: 100%;
background: #3686f1;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 36px;
}
.picture {
margin-top: -5px;
}
.picture li{
float: left;
text-align: center;
margin-right: 18px;
}
.picture li:last-child{
margin-right: 0 !important;
}
.picture a {
color: #1f4f88;
font-size: 12px;
}
.picture img {
width: 20px;
height: 20px;
}

115
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/douban.html Normal file
View File

@@ -0,0 +1,115 @@
<!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/douban.css">
</head>
<body>
<div class="juzhong">
<div class="mian hidden">
<div class="mian_l hidden">
<div class="title hidden">
热点内容
· · · · · ·
<span>(更多）</span>
</div>
<div class="list hidden">
<ul>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
</ul>
</div>
<div class="news">
<ul>
<li class="first">
<a href="">媒介蒙太奇 之 观看奥运</a>
<p>媒介蒙太奇·观看奥运 I 2000年9月某天，我刚下课，经过北大某老教学楼旁的某老食堂，里面突然爆出剧烈的欢呼声。那大约是悉尼奥运某场乒乓球或羽毛球决赛，学生们...</p>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
</ul>
</div>
</div>
<div class="mian_r">
<img src="https://img9.doubanio.com/view/dale-online/dale_ad/public/f88c6fae4537279.jpg" alt="">
<div class="button">
<div class="b_hot">
热门话题
· · · · · ·
<span>(去话题广场)</span>
</div>
<ul class="hot_list">
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

103
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/douding.html Normal file
View File

@@ -0,0 +1,103 @@
<!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>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/douding.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_rervreono9h.css">
</head>
<body>
<div class="manner">
<div class="mian hidden">
<div class="mian_l">
<div class="top">
<div class="text">
文档分类
</div>
<span class="hidden">
<a href="">更多></a>
</span>
</div>
<ul class="list hidden">
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
</ul>
</div>
<div class="mian_r right">
<div class="r_top hidden">
<a href="" class="left r_top_l">登录</a>
<a href="" class="left">注册</a>
</div>
<div class="r_button">
<input type="text" class="text1" placeholder="用户名/邮箱/手机号">
<input type="password" class="text2" placeholder="请输入密码">
<div class="foget">
<ul class="hidden">
<li class="right">
<a href="">
| 立即注册
</a>
</li>
<li class="right">
<a href="">
忘记密码？
</a>
</li>
</ul>
</div>
<div class="denglu hidden">
<div class="dl left">登录</div>
<div class="wx right"><i class="iconfont icon-weixin"></i> 微信登陆</div>
</div>
<div class="banner">
<ul class="hidden">
<li class="left">
<a href="" class="qq"><i class="iconfont icon-QQ1"></i>QQ |</a>
</li>
<li class="left">
<a href="" class="qq"><i class="iconfont icon-QQ1"></i>QQ |</a>
</li>
<li class="left">
<a href="" class="qq"><i class="iconfont icon-QQ1"></i>QQ |</a>
</li>
<li class="left">
<a href="" class="qq">更多<i class="iconfont icon-z044-copy"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

90
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/jianshu.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>jianshu</title>
<link rel="stylesheet" href="http:////at.alicdn.com/t/font_3446711_p0mkwyehl4g.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/jianshu.css">
</head>
<body>
<div class="mian">
<div class="title hidden">
<div class="title_l left">
推荐作者
</div>
<div class="title_r right">
<i class="iconfont icon-shuaxin"></i>
<span class="title_r_refresh">换一批</span>
</div>
</div>
<ul class="content">
<li class="hidden">
<img class="picture left"
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="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li class="hidden">
<img class="picture left"
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="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li class="hidden">
<img class="picture left"
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="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li class="hidden">
<img class="picture left"
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="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
</ul>
<div class="bottom">
<span>查看全部</span>
<i class="iconfont icon-jinrujiantou"></i>
</div>
</div>
</body>
</html>

67
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/qqmusic.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>QQ音乐</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/qqmusic.css">
</head>
<body>
<div class="juzhong">
<div class="mian hidden">
<div class="title">
歌单推荐
</div>
<ul class="mune hidden">
<li class="active">为你推荐</li>
<li>情歌</li>
<li>短视频热歌</li>
<li>经典国语</li>
<li>情歌</li>
</ul>
<div class="list hidden">
<ul>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量：43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量：43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量：43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量：43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量：43.5万</div>
</li>
</ul>
</div>
<div class="button">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>

58
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/zhihu.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/zhihu.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_md7snkwkv5.css">
</head>
<body>
<div class="mian hidden">
<div class="title left">
<div class="text">
近期热点
</div>
</div>
<div class="list">
<ul>
<li>
<span class="red left">1</span>
<a href="" >上海解封是不是太突然了？</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
<li>
<span class="green left">2</span>
<a href="" >上海解封是不是太突然了？</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
<li>
<span class="blue left">3</span>
<a href="" >上海解封是不是太突然了？</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
<li>
<span class="yellow left">4</span>
<a href="" >上海解封是不是太突然了？</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
</ul>
</div>
<div class="button">
<div class="hot">查看全部热点问题
<span><i class="iconfont icon-jinrujiantou "></i></span>
</div>
</div>
</div>
</body>
</html>

190
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/zol-leave.html Normal file
View File

@@ -0,0 +1,190 @@
<!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/zol-leave.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_rervreono9h.css">
</head>
<body>
<div class="mian">
<div class="title hidden">
<div class="title_l left">
<span>2F</span>
笔记本电脑
</div>
<ul class="title_r right">
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
更多
<i class="iconfont icon-z044-copy"></i>
</a>
</li>
</ul>
</div>
<div class="content hidden">
<div class="content_l left">
<div class="top">
<div class="top_t">
<div class="hot left">热度排行</div>
<ul class="right">
<li class="active">
品牌
</li>
<li>
品牌
</li>
<li>
品牌
</li>
</ul>
</div>
<ul class="button_list">
<li>
<span>1</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>2</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>3</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>4</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>5</span>
<a href="">惠普暗影精灵6</a>
</li>
</ul>
<div class="more">查看更多排行榜</div>
</div>
<div class="button">
<div class="button_top">
热门搜索
</div>
<ul>
<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>
<li>
<a href="">笔记本</a>
</li>
</ul>
</div>
</div>
<div class="content_r left">
<ul class="r_list hidden">
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+（8GB/256GB）</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
</ul>
<div class="yuan">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

64
历届学生/font-end-nine/项目练习/学生项目/杨锐/6.2作业/zol.html Normal file
View File

@@ -0,0 +1,64 @@
<!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>zol</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/zol.css">
</head>
<body>
<div class="mian">
<img class="logo left" src="https://icon.zol-img.com.cn/mainpage/2019logo/festival/2022duanwu-logo_2x.png"
alt="图片未找到">
<div class="search hidden">
<ul class="tuijian left">
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
</ul>
<div class="search_button">
<input type="text" class="left" placeholder="搜索框">
<div class="search_text left">搜索一下</div>
</div>
<ul class="picture right">
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>