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

1
历届学生/front-end-team-10/项目练习/学生项目/冯凯/1.txt Normal file
View File

@@ -0,0 +1 @@
冯凯DDDDWQDQWDWQRTGTRGTRDDD 79

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/backws.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

8
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/clear.css Normal file
View File

@@ -0,0 +1,8 @@
body,ul,input,li,a{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

49
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/gongshan.html Normal file
View File

@@ -0,0 +1,49 @@
<!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">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="Http://at.alicdn.com/t/c/font_3888619_f4d3tx11tci.css">
<link rel="stylesheet" href="yinghang.css">
</head>
<body>
<div class="main">
<div class="center">
<div class="logo hidden">
<img class="left" src="./backws.png" alt="">
<ul>
<li>
<img src="./button.png" alt="">
<div class="logo_w">
<a href=""> 个人网上银行登录</a>
<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
</div>
</li>
</ul>
</div>
<ul class="banner">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

131
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/mafengwo.css Normal file
View File

@@ -0,0 +1,131 @@
.main {
width: 700px;
height: 100%;
}
.nav .logo {
width: 220px;
height: 150px;
margin-right: 15px;
}
.nav li {
margin-bottom: 15px;
}
.nav li .menu {
height: 26px;
margin-bottom: 10px;
font-size: 18px;
line-height: 26px;
}
.nav li .menu a {
height: 26px;
display: block;
color: #333;
overflow: hidden;
white-space: nowrap;
float: left;
}
.nav li .app {
float: right;
width: auto;
padding: 0 7px;
border: 1px solid #ff9d00;
border-radius: 11px;
height: 20px;
line-height: 20px;
font-size: 12px;
color: #ff9d00;
font-weight: bold;
background-color: #fff;
position: relative;
}
.nav li .app i {
background-image: url(./button.png);
background-size: 200px auto;
}
.nav li .app i {
float: left;
margin: 2px;
width: 16px;
height: 16px;
background: url(/images/index-sprites9.png) no-repeat -170px 0;
}
.word {
color: #666;
background-color: transparent;
font-size: 14px;
}
.follow {
margin-top: 25px;
height: 33px;
}
.follow span {
margin-right: 8px;
display: inline-block;
line-height: 33px;
}
.city {
font-size: 12px;
color: #666;
}
.user {
color: #ff9d00;
font-size: 12px;
}
.user img {
border-radius: 100%;
vertical-align: middle;
}
.nub {
font-size: 14px;
color: #999;
}
.ding {
color: #ff9d00;
font-size: 14px
}
.ding a {
margin-left: 8px;
}
.app:hover .drop{
display: block;
}
.app img{
position: absolute;
right: -5px;
top: 0;
padding-top: 21px;
width: 125px;
display: none;
}
/* .drop {
position: absolute;
right: -5px;
top: 0;
padding-top: 21px;
width: 125px;
display: none;
} */

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/maotou.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

17
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/public.css Normal file
View File

@@ -0,0 +1,17 @@
/* 公共样式的css代码 */
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.hidden {
overflow: hidden;
}
.reset {
line-height: 1;
}

84
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/qiantu.css Normal file
View File

@@ -0,0 +1,84 @@
.main {
width: 100%;
height: 883.33px;
/* background-color: #fd8320; */
}
.main .center {
width: 1900px;
margin: 0 auto;
position: relative;
}
.head{
padding-bottom: 16px;
}
.head .title img {
height: 20px;
width: 20px;
}
.head .title span {
color: #fd8320;
font-weight: 600;
font-size: 12px;
vertical-align: text-top;
}
.head .desc {
font-weight: 500;
font-size: 20px;
height: 28px;
line-height: 28px;
/* overflow: hidden; */
}
.head .desc span {
font-weight: 600 !important;
}
.nav{
position: absolute;
bottom: 348px;
right: 240px;
}
.nav i{
font-size: 40px;
height: 40px;
float: right;
}
.content{
display: inline-block;
}
.content li {
float: left;
margin-right: 20px;
}
.content li{
position: relative;
}
.content img{
width: 319.43px;
height: 691.56px;
}
.content li:hover .copy{
display: none;
}
.follow{
position: absolute;
bottom: 33px;
right: 10px;
}
.follow .copy{
padding: 0 8px;
background: black;
border: 1px solid #FCDA7C;
color: #FCDA7C;
-webkit-border-radius: 4px;
border-radius: 4px;
font-weight: 400;
font-size: 12px;
display: block;
}

50
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/yinghang.css Normal file
View File

@@ -0,0 +1,50 @@
.main {
width: 100%;
height: 380px;
background-image: url(https://v.icbc.com.cn/userfiles/adresources/794604423883382784.jpg);
}
.center {
width: 1000px;
margin: 0 auto;
height: 380px;
position: relative;
}
.main.center .logo img {
width: 293px;
height: 100%;
}
.logo ul {
padding: 39px;
transform: translatex(-26.5%);
}
.logo ul li .logo_w {
position: absolute;
transform: translate(321px, -38px);
}
.logo ul li .logo_w a,
i {
color: #fff;
font-size: 16px;
}
.banner {
position: absolute;
transform: translateX(160%);
bottom: 20px;
}
.banner li {
width: 50px;
height: 4px;
background: #cccccc no-repeat top right;
margin: 3px 7px;
float: left;
}

93
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/千图网.html Normal file
View File

@@ -0,0 +1,93 @@
<!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">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./qiantu.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_luyms6vw3l.css">
</head>
<body>
<div class="main">
<div class="center">
<div class="head">
<div class="title">
<img src="https://static.qiantucdn.com/static/images/index/f-icon-118.png" alt="">
<span>正在热门</span>
</div>
<div class="desc">
<span>情人节</span>
| 浪漫告白季「情人节」营销素材集丨50000+ 作品
</div>
</div>
<ul class="content hidden">
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
</ul>
<div class="nav">
<i class="iconfont icon-gengduo1"></i>
</div>
</div>
</div>
</body>
</html>

159
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.11作业/马蜂窝.html Normal file
View File

@@ -0,0 +1,159 @@
<!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">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./mafengwo.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_wjqqzmgdo1.css">
</head>
<body>
<div class="main">
<ul class="nav hidden">
<li>
<img class="left logo"
src="https://note.mafengwo.net/img/27/f9/287d089cfff34f95d3138c3b1988f6b0.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90"
alt="">
<div class="right_1">
<div class="list">
<div class="menu">
<a href="">暴走十二时辰！澳门奔溃玩法</a>
<div class="app">
<i></i>
APP
<img class="drop"
src="https://b2-q.mafengwo.net/s12/M00/6E/DD/wKgED1uu232AMKEvAAAz-ljBM0k929.png"
alt="">
</div>
</div>
<div class="word">
澳门 没想到再遇 澳门 竟是如此短暂，短暂到没怎么停下步伐来歇息就已经跟 澳门 再次说再见了。 夜晚提早在预计的烟花拍摄点，然后坐在山道边，看着夜里灯火通明的通明的 澳门
，这大概就算...
</div>
</div>
<div class="follow">
<span class="city">
<i class="iconfont icon-zuobiao"></i>
<a href="">澳门</a>,by
</span>
<span class="user">
<img src="https://p1-q.mafengwo.net/s17/M00/07/A4/CoUBXl9-0SuAVvjCAACFL66Nud012.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
alt="">
haper1*4
</span>
<span class="nub">
<i class="iconfont icon-yanjing-zhengyan"></i>
1746/7
</span>
<span class="ding right">
115
<a href="">顶</a>
</span>
</div>
</div>
</li>
<li>
<img class="left logo"
src="https://note.mafengwo.net/img/27/f9/287d089cfff34f95d3138c3b1988f6b0.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90"
alt="">
<div class="right_1">
<div class="list">
<div class="menu">
<a href="">暴走十二时辰！澳门奔溃玩法</a>
<div class="app">
<i></i>
APP
</div>
</div>
<div class="word">
澳门 没想到再遇 澳门 竟是如此短暂，短暂到没怎么停下步伐来歇息就已经跟 澳门 再次说再见了。 夜晚提早在预计的烟花拍摄点，然后坐在山道边，看着夜里灯火通明的通明的 澳门
，这大概就算...
</div>
</div>
<div class="follow">
<span class="city">
<i class="iconfont icon-zuobiao"></i>
<a href="">澳门</a>,by
</span>
<span class="user">
<img src="https://p1-q.mafengwo.net/s17/M00/07/A4/CoUBXl9-0SuAVvjCAACFL66Nud012.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
alt="">
haper1*4
</span>
<span class="nub">
<i class="iconfont icon-yanjing-zhengyan"></i>
1746/7
</span>
<span class="ding right">
115
<a href="">顶</a>
</span>
</div>
</div>
</li>
<li>
<img class="left logo"
src="https://note.mafengwo.net/img/27/f9/287d089cfff34f95d3138c3b1988f6b0.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90"
alt="">
<div class="right_1">
<div class="list">
<div class="menu">
<a href="">暴走十二时辰！澳门奔溃玩法</a>
<div class="app">
<i></i>
APP
</div>
</div>
<div class="word">
澳门 没想到再遇 澳门 竟是如此短暂，短暂到没怎么停下步伐来歇息就已经跟 澳门 再次说再见了。 夜晚提早在预计的烟花拍摄点，然后坐在山道边，看着夜里灯火通明的通明的 澳门
，这大概就算...
</div>
</div>
<div class="follow">
<span class="city">
<i class="iconfont icon-zuobiao"></i>
<a href="">澳门</a>,by
</span>
<span class="user">
<img src="https://p1-q.mafengwo.net/s17/M00/07/A4/CoUBXl9-0SuAVvjCAACFL66Nud012.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
alt="">
haper1*4
</span>
<span class="nub">
<i class="iconfont icon-yanjing-zhengyan"></i>
1746/7
</span>
<span class="ding right">
115
<a href="">顶</a>
</span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

9
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/css/clear.css Normal file
View File

@@ -0,0 +1,9 @@
/* 清除浏览器默认样式的css代码 */
body,ul,input,li,a,p{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

225
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/css/hong.css Normal file
View File

@@ -0,0 +1,225 @@
body{
background-color: #fbfcfd;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #37b2ff;
height: 1.57rem;
box-sizing: border-box;
padding: 0 0.3rem;
}
.header img{
width: 0.19rem;
height: 0.34rem;
}
.header .money{
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #ffffff;
}
.content .menu{
display: flex;
height: 1.59rem;
align-items: center;
padding: 0 0.24rem;
box-sizing: border-box;
background: #fff;
border-radius: 0.2rem 0.2rem 0rem 0rem;
position: relative;
bottom: 0.2rem;
/* margin-bottom: 0.18rem; */
}
.content .menu img{
width: 0.25rem;
height: 0.27rem;
margin-right: 0.15rem;
}
.content .menu p{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
line-height: 0.38rem;
letter-spacing: 0.005rem;
color: #333333;font-weight: 600;
}
.phone{
display: flex;
flex-direction: column;
padding: 0 0.24rem;
box-sizing: border-box;
background: #fff;
height: 1.15rem;
padding-top: 0.27rem;
}
.phone .top{
display: flex;
}
.phone .top img{
width: 0.27rem;
height: 0.31rem;
margin-right: 0.16rem;
}
.phone .top p{
font-family: PingFang-SC-Bold;
font-size: 0.26rem;
letter-spacing: 0.005rem;
color: #000000;
font-weight: 600;
}
.add{
font-family: PingFang-SC-Medium;
font-size: 0.22rem;
letter-spacing: 0.004rem;
color: #666666;
margin-left: 0.43rem;
margin-top: 0.1rem;
}
.logo{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.43rem;
box-sizing: border-box;
background-color: #fff;
margin-top: 0.16rem;
padding-bottom: 0.25rem;
/* border-bottom: 0.01rem solid #e9e3e3; */
}
.logo img{
width: 1.31rem;
height: 1.32rem;
}
.logo .red{
display: flex;
flex-direction: column;
margin-left: 0.24rem;
margin-right: 0.6rem;
align-items: baseline;
}
.logo .red p{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
}
.logo .red .red_b{
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #2b2b2b;
border-radius: 0.1rem;
border: solid 0.01rem #f5f5f5;
}
.logo .prince{
display: flex;
flex-direction: column;
align-items: end;
}
.logo .prince .prince_t{
font-family: AdobeHeitiStd-Regular;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
padding-right: 0.57rem;
}
.logo .prince .prince_m{
font-family: PingFang-SC-Regular;
font-size: 0.2rem;
letter-spacing: 0.004rem;
color: #aaaaaa;
padding-right: 0.59rem;
}
.logo .prince .prince_b{
font-family: PingFang-SC-Regular;
font-size: 0.2rem;
letter-spacing: 0.004rem;
color: #2b2b2b;
border-radius: 0.19rem;
border: solid 0.01rem #eeeeee;
margin-right: 0.54rem;
}
.desc {
background-color: #fff;
border-top: 0.01rem solid #e9e3e3;
}
.desc li {
display: flex;
justify-content: space-between;
padding-left: 0.4rem;
padding-right: 0.54rem;
margin-top: 0.19rem;
}
.desc li span {
font-family: PingFang-SC-Regular;
font-size: 0.24rem;
letter-spacing: 0.004rem;
color: #aaaaaa;
}
.desc li .one{
font-family: PingFang-SC-Regular;
font-size: 0.24rem;
letter-spacing: 0.004rem;
color: #0a0a0a;
font-weight: 600;
}
.desc li .two{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #ff7b41;
font-weight: 600;
}
.desc li:last-child{
background-color: #fbfcfd;
background-color: #fbfcfd;
height: 0.49rem;
line-height: 0.49rem;
margin-bottom: 0.19rem;
border-bottom: 0.01rem solid #e9e3e3;
}
.miss{
display: flex;
flex-direction: column;
height: 1.56rem;
justify-content: center;
box-sizing: border-box;
padding: 0 0.36rem;
position: relative;
background-color: #fff;
}
.miss .miss_t{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
font-weight: 600;
margin-left: 0.30rem;
padding: 0.22rem 0;
}
.miss .miss_b{
border-top: 0.01rem solid #e9e3e3;
font-family: PingFang-SC-Regular;
font-size: 0.24rem;
letter-spacing: 0.004rem;
color: #737373;
padding-top: 0.21rem;
}
.miss .miss_t::before{
position: absolute;
content: "";
width: 0.04rem;
height: 0.28rem;
background-color: #ff7b41;
left: .5rem;
top: 50%;
transform: translateY(-150%);
}

208
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/css/list.css Normal file
View File

@@ -0,0 +1,208 @@
body{
background-color: #f2f2f6;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
height: 0.9rem;
padding-left: 0.21rem;
padding-right: 0.3rem;
box-sizing: border-box;
background-color: #fff;
}
.header img{
width: 0.2rem;
height: 0.35rem;
}
.header .search{
display: flex;
position: relative;
}
.header .search img{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0.32rem;
height: 0.34rem;
left: 0.24rem;
/* background-color: #333333; */
}
.header .search input{
font-size: .26rem;
color: #808080;
width: 6.31rem;
height: 0.6rem;
background-color: #f2f2f2;
border-radius: 0.3rem;
padding-left: 0.74rem;
box-sizing: border-box;
}
.menu{
display: flex;
height: 0.94rem;
align-items: center;
overflow: scroll;
width: 100%;
background-color: #fff;
margin-bottom: 0.12rem;
}
.menu li{
width: 16%;
flex: none;
}
.menu li .text{
font-family: SimHei;
font-size: 0.3rem;
color: #424242;
}
.menu .active{
padding-left: 0.34rem;
position: relative;
}
.menu .active::after{
content: "";
width: 0.31rem;
height: 0.04rem;
background-color: #5697f4;
position: absolute;
left: 45%;
transform: translateX(-50%);
bottom: -0.28rem;
}
.content{
background-color: #fff;
margin-bottom: 0.12rem;
border-radius: 0.1rem;
}
.content .desc{
display: flex;
justify-content: space-between;
align-items: center;
height: 0.73rem;
padding-left: 0.28rem;
padding-right: 0.35rem;
box-sizing: border-box;
}
.content .title{
display: flex;
/* justify-content: space-between; */
align-items: center;
}
.content .title .img_1{
width: 0.32rem;
height: 0.32rem;
/* border: solid 0.01rem #9a9da3; */
}
.content .title .title_text{
font-family: PingFang-SC-Bold;
font-size: 0.26rem;
letter-spacing: 0.006rem;
line-height: 0.2rem;
color: #333333;
font-weight: 600;
margin: 0 0.18rem;
}
.content .title .img_2{
width: 0.1rem;
height: 0.18rem;
/* background-color: #999999; */
/* border: solid 0.01rem #c7c7c7; */
}
.content .follow{
font-family: PingFang-SC-Medium;
font-size: 0.26rem;
color: #5697f4;
}
.logo li{
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-left: 0.35rem;
padding-right: 0.3rem;
margin-bottom: 0.22rem;
}
.logo li img{
width: 1.36rem;
height: 1.37rem;
}
.logo li .logo_text{
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.logo li .logo_text p{
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
line-height: 0.44rem;
letter-spacing: 0rem;
color: #444444;
}
.logo li .logo_text span{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #aaaaaa;
margin-top: 0.15rem;
}
.logo li .logo_prince{
display: flex;
flex-direction: column;
align-items: end;
}
.logo li .logo_prince p{
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #000000;
}
.logo li .logo_prince span{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #aaaaaa;
margin-top: 0.15rem;
}
.all{
display: flex;
justify-content: end;
flex-direction: column;
align-items: end;
margin-right: 0.28rem;
}
.all p{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #000000;
}
.all .drop{
display: flex;
margin-top: 0.2rem;
box-sizing: border-box;
margin-bottom: 0.26rem;
}
.all .drop .drop_l{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #888888;
border-radius: 0.23rem;
border: solid 0.01rem #dddddd;
padding: 0 0.17rem;
margin-right: 0.11rem;
}
.all .drop .drop_r{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #5697f4;
border-radius: 0.23rem;
border: solid 0.01rem #5697f4;
padding: 0 0.41rem;
}

128
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/css/recod.css Normal file
View File

@@ -0,0 +1,128 @@
body {
display: flex;
flex-direction: column;
height: 100vh;
font-size: 0;
}
.header{
background-color: #ffffff;
display: flex;
justify-content: space-between;
width: 100%;
height: .9rem;
top: 0.22rem;
padding:0 0.3rem;
align-items: center;
box-sizing: border-box;
/* position: fixed; */
}
.header img{
width: 0.19rem;
height: 0.34rem;
/* background-color: #333333; */
}
.header .record{
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #333333;
}
.content{
flex: 1;
background-color: #eeeef3;
}
.info li{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
border-radius: 0.1rem;
/* margin: 0.23rem 0.24rem; */
box-sizing: border-box;
margin: 0 0.24rem;
padding-left:0.37rem;
padding-right: 0.41rem;
}
.info li:nth-child(1){
margin: 0.23rem 0.24rem!important;
height: 1.01rem;
}
.info li:nth-child(2){
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 1.01rem;
border-bottom: 0.02rem solid #f0f0f4;
}
.info li:nth-child(3){
height: 100%;
border-radius: 0;
border-bottom: 0.02rem solid #f0f0f4;
}
.info li:nth-child(4){
border-top-left-radius: 0px;
border-top-right-radius: 0px;
height: 100%;
}
.info li .date{
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #949494;
/* padding-left: 0.37rem; */
}
.info li .info_con{
display: flex;
align-items: center;
}
.info li .info_con .info_text{
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #949494;
margin-right: 0.27rem;
}
.info li .info_con img{
/* padding-right: 0.41rem; */
width: 0.2rem;
height: 0.11rem;
/* background-color: #979797; */
}
.info li .title .title_t{
font-family: PingFang-SC-Medium;
font-size: 0.34rem;
color: #333333;
padding-bottom: 0.17rem;
margin-top: 0.34rem;
}
.info li .title .title_m{
padding-bottom: 0.19rem;
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #949494;
}
.info li .title .title_b{
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #949494;
margin-bottom: 0.27rem;
}
.info li .desc{
display: flex;
flex-direction: column;
align-items: end
}
.info li .desc .desc_t{
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #333333;
padding-bottom: 0.19rem;
}
.info li .desc .desc_b{
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #949494;
margin-bottom: 0.38rem;
}

58
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/css/xiezi.css Normal file
View File

@@ -0,0 +1,58 @@
body{
background: #fbfbfd;
}
.header{
display: flex;
justify-content: space-between;
padding: 0 0.42rem;
box-sizing: border-box;
align-items: center;
height: .9rem;
background: #fff;
}
.header img{
width: 0.15rem;
height: 0.29rem;
}
.header .text{
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #333333;
font-weight: 600;
}
.content{
display: flex;
justify-content: space-between;
padding: 0 0.25rem;
flex-wrap: wrap;
}
.content li{
width: 3.4rem;
height: 5rem;
display: flex;
flex-direction: column;
margin-top: 0.2rem;
box-sizing: border-box;
background-color: #fff;
}
.content li img{
width: 3.4rem;
height: 3.4rem;
background-color: #e8fffe;
border-radius: 0.1rem 0.1rem 0rem 0rem;
margin-bottom: 0.19rem;
}
.content li .text_t{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #3f3f3f;
margin-bottom: 0.26rem;
}
.content li .text_b{
font-family: PingFang-SC-Bold;
font-size: 0.28rem;
color: #ff7b41;
}

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/-e-(.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/-e-返回.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/bao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/e_bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/e_left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/e_top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/img/搜索.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

91
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/口红.html Normal file
View File

@@ -0,0 +1,91 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/hong.css">
</head>
<body>
<div class="header">
<img src="./img/white.png" alt="">
<div class="money">待付款</div>
<div></div>
</div>
<div class="content">
<div class="menu">
<img src="./img/menu.png" alt="">
<p>订单等待买家付款！</p>
</div>
<div class="phone">
<div class="top">
<img src="./img/top.png" alt="">
<p>姓名 130****0000</p>
</div>
<div class="add">安徽省合肥市蜀山区松芝万象城</div>
</div>
<div class="logo">
<img src="./img/red.png" alt="">
<div class="red">
<p>【大牌驾到】MAC魅可柔美系列
口红魅可柔列口红魅可柔</p>
<div class="red_b">
大红色
</div>
</div>
<div class="prince">
<div class="prince_t">¥100.00</div>
<div class="prince_m">X1</div>
<div class="prince_b">待付款</div>
</div>
</div>
<ul class="desc">
<li>
<span>商品总价</span>
<span>¥100.00</span>
</li>
<li>
<span>商品总价</span>
<span>¥100.00</span>
</li>
<li>
<span>商品总价</span>
<span>¥100.00</span>
</li>
<li>
<span class="one">实付款</span>
<span class="two">¥100.00</span>
</li>
</ul>
<div class="miss">
<div class="miss_t">订单信息</div>
<div class="miss_b">下单时间：2019-01-01 16：00</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

80
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/账户记录.html Normal file
View File

@@ -0,0 +1,80 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/recod.css">
</head>
<body>
<div class="header">
<img src="./img/-e-(.png" alt="">
<div class="record">账户提现记录</div>
<div></div>
</div>
<div class="content">
<ul class="info">
<li>
<div class="date">2016-01</div>
<div class="info_con">
<div class="info_text">提现：50.00</div>
<img src="./img/e_bottom.png" alt="">
</div>
</li>
<li>
<div class="date">2014-08</div>
<div class="info_con">
<div class="info_text">提现：5,001.00</div>
<img src="./img/e_top.png" alt="">
</div>
</li>
<li>
<div class="title">
<div class="title_t">余额提现</div>
<div class="title_m">中国工商银行（3452）</div>
<div class="title_b">08-19 18:12</div>
</div>
<div class="desc">
<div class="desc_t">1.00</div>
<div class="desc_b">手续费 0.00元</div>
</div>
</li>
<li>
<div class="title">
<div class="title_t">余额提现</div>
<div class="title_m">中国工商银行（3452）</div>
<div class="title_b">08-19 18:12</div>
</div>
<div class="desc">
<div class="desc_t">1.00</div>
<div class="desc_b">手续费 0.00元</div>
</div>
</li>
<li></li>
</div>
</ul>
</body>
</html>

151
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/面包.html Normal file
View File

@@ -0,0 +1,151 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/list.css">
</head>
<body>
<div class="header">
<img src="./img/e_left.png" alt="">
<div class="search">
<img src="./img/search.png" alt="">
<input placeholder="搜索我的订单" type="text">
</div>
</div>
<ul class="menu">
<li class="active">
<div class="text">全部</div>
</li>
<li>
<div class="text">待付款</div>
</li>
<li>
<div class="text">待发货</div>
</li>
<li>
<div class="text">待收货</div>
</li>
<li>
<div class="text">已完成</div>
</li>
<li>
<div class="text">待评价</div>
</li>
<li>
<div class="text">售后处理</div>
</li>
</ul>
<div class="content">
<div class="desc">
<div class="title">
<img class="img_1" src="./img/shop.png" alt="">
<div class="title_text">面包自营</div>
<img class="img_2" src="./img/right.png" alt="">
</div>
<div class="follow">待评价</div>
</div>
<ul class="logo">
<li>
<img src="./img/bao.png" alt="">
<div class="logo_text">
<p>包子芝麻小蛋糕美味香脆新品</p>
<p> 正品包邮</p>
<span>
独立包装+原味
</span>
</div>
<div class="logo_prince">
<p>￥38.8</p>
<span>X1</span>
</div>
</li>
<li>
<img src="./img/bao.png" alt="">
<div class="logo_text">
<p>包子芝麻小蛋糕美味香脆新品</p>
<p> 正品包邮</p>
<span>
独立包装+原味
</span>
</div>
<div class="logo_prince">
<p>￥38.8</p>
<span>X1</span>
</div>
</li>
</ul>
<div class="all">
<p>共2件商品，合计：￥100.00 (含运费￥0.00)</p>
<div class="drop">
<div class="drop_l">删除订单</div>
<div class="drop_r">评价</div>
</div>
</div>
</div>
<div class="content">
<div class="desc">
<div class="title">
<img class="img_1" src="./img/shop.png" alt="">
<div class="title_text">面包自营</div>
<img class="img_2" src="./img/right.png" alt="">
</div>
<div class="follow">待评价</div>
</div>
<ul class="logo">
<li>
<img src="./img/bao.png" alt="">
<div class="logo_text">
<p>包子芝麻小蛋糕美味香脆新品</p>
<p> 正品包邮</p>
<span>
独立包装+原味
</span>
</div>
<div class="logo_prince">
<p>￥38.8</p>
<span>X1</span>
</div>
</li>
</ul>
<div class="all">
<p>共2件商品，合计：￥100.00 (含运费￥0.00)</p>
<div class="drop">
<div class="drop_l">删除订单</div>
<div class="drop_r">评价</div>
</div>
</div>
</div>
</body>
</html>

79
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.17橱窗作业/鞋子.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>
<script type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/xiezi.css">
</head>
<body>
<div class="header">
<img src="./img/-e-返回.png" alt="">
<div class="text">
商品列表
</div>
<div></div>
</div>
<ul class="content">
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
</ul>
</body>
</html>

103
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/baidu.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>
</head>
<body>
<div class="menu_top">
<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> <li>
<a href="">新闻</a>
</li>
</ul>
<div class="tools">
<div class="setting">设置</div>
<div class="denglu">登录</div>
</div>
</div>
<div class="content">
<img src="" alt="">
<div class="search">
<input type="text">
<button>百度一下</button>
</div>
<div class="hot">
<div class="title">
<div class="left">
<a href="">百度热搜</a>
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
<span>换一换</span>
</div>
</div>
<ul>
<li>
<img src="" alt="">
<a href="">花好月圆，月圆人圆</a>
</li>
<li>
<img src="" alt="">
<a href="">花好月圆，月圆人圆</a>
</li>
<li>
<img src="" alt="">
<a href="">花好月圆，月圆人圆</a>
</li> <li>
<img src="" alt="">
<a href="">花好月圆，月圆人圆</a>
</li> <li>
<img src="" alt="">
<a href="">花好月圆，月圆人圆</a>
</li> <li>
<img src="" alt="">
<a href="">花好月圆，月圆人圆</a>
</li>
</ul>
</div>
</div>
<div class="copyright">
<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>
<li>
互联网宗教
</li>
</ul>
</div>
</body>
</html>

93
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/gaodun.html Normal file
View File

@@ -0,0 +1,93 @@
<!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>
</head>
<body>
<div class="header">
<div class="center">
<div class="logo">
<div class="left">
<img src="" alt="">
<ul class="menu_t">
<li>
<a href="">成就梦想</a>
</li>
<li>
<a href="">成就梦想</a>
</li>
<li>
<a href="">成就梦想</a>
</li>
<li>
<a href="">成就梦想</a>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
<div class="right">
<img src="" alt="">
<ul>
<li>
<a href="">学习空间</a>
</li>
<li>
<a href="">学习空间</a>
</li>
<li>
<a href="">学习空间</a>
</li>
</ul>
</div>
</div>
<div class="menu">
<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>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="center">
<ul class="menu_f">
<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>
<img src="" alt="">
</div>
</div>
</body>
</html>

137
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/music.html Normal file
View File

@@ -0,0 +1,137 @@
<!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="header">
<div class="ceneter">
<div class="menu_top">
<img src="" alt="">
<ul class="list">
<li>
<a href="">发现音乐</a>
</li>
<li>
<a href="">发现音乐</a>
</li>
<li>
<a href="">发现音乐</a>
</li>
<li>
<a href="">发现音乐</a>
</li>
</ul>
<span>hot</span>
</div>
<div class="search">
<input type="text">
<a href=""></a>
<a href=""></a>
</div>
<ul class="menu_m">
<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">
<div class="center">
<div class="logo">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="audio">
<div class="left">
<ul class="munu_f">
<li>
<img src="" alt="">
<a href="">热门推荐</a>
</li>
<li>
<a href="">热门推荐</a>
</li>
<li>
<a href="">热门推荐</a>
</li>
<li>
<a href="">热门推荐</a>
</li>
</ul>
<span>更多</span>
<img src="" alt="">
<ul class="music">
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
</ul>
</div>
<div class="right">
<div class="user">
<p></p>
<button>登录</button>
</div>
<div class="right_f">
<div class="all">
<span>入驻歌手</span>
<a href=""></a>
<img src="" alt="">
</div>
<ul class="person">
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
</ul>
<button></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

51
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/作业帮.html Normal file
View File

@@ -0,0 +1,51 @@
<!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="header">
<div class="center">
<img class="left" src="" alt="">
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
</div>
<div class="content">
<img class="banner" src="" alt="">
<div class="news">
<div class="center">
<div class="top">
<p></p>
<span class="top_r"></span>
</div>
<div class="bottom">
<ul>
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

93
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/学信网.html Normal file
View File

@@ -0,0 +1,93 @@
<!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>
</head>
<body>
<div class="header">
<div class="center">
<div class="logo">
<div class="left">
<img src="" alt="">
<a href="">中国高等教育学生信息网</a>
<p></p>
</div>
<ul class="right">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">登录</a>
</li>
<li>
<a href="">登录</a>
</li>
</ul>
</div>
<div class="menu">
<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>
<div class="content">
<div class="center">
<img src="" alt="">
<div class="news">
<div class="news_l">
<div class="file">
<a href=""></a>
<a href=""></a>
</div>
<a href="">保送生</a>
<a href="">保送生</a>
<a href="">保送生</a>
<a href="">保送生</a>
<a href="">保送生</a>
</div>
<div class="news_r">
<div class="top">
<span>教育咨询</span>
<a href="">更多</a>
</div>
<ul class="list">
<li>
<a href="">反对恢复吧</a>
</li>
<li>
<a href="">反对恢复吧</a>
</li>
<li>
<a href="">反对恢复吧</a>
</li>
<li>
<a href="">反对恢复吧</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

64
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/学信网1.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>Document</title>
</head>
<body>
<div class="header">
<div class="top center">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<div>
<ul class="right">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<ul class="bottom">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="content">
<div class="center">
<img class="banner" src="" alt="">
<div class="list">
<ul class="left">
<li></li>
<li></li>
<li></li>
</ul>
<div class="right">
<div class="right_t">
</div>
<ul class="right_b">
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

124
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/新浪网.html Normal file
View File

@@ -0,0 +1,124 @@
<!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>
</head>
<body>
<div class="header">
<div class="ceenter">
<ul class="left">
<li>
<a href="">设为首页</a>
</li>
<li>
<a href="">设为首页</a>
</li>
<li>
<a href="">设为首页</a>
<img src="" alt="">
</li>
</ul>
<ul class="right">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="logo">
<img src="" alt="">
<div class="search">
<select name="" id="">
<option value="">
新闻
</option>
</select>
<input type="text">
<button></button>
</div>
<img src="" alt="">
</div>
<ul class="menu">
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
</ul>
<img src="" alt="">
</div>
</div>
<div class="copyrigh">
</div>
</body>
</html>

101
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/网易云.html Normal file
View File

@@ -0,0 +1,101 @@
<!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="header">
<div class="top">
<div class="center">
<div class="left">
<img src="" alt="">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="right">
<div class="search">
<img src="" alt="">
<input type="text">
</div>
<span>创作者中心</span>
<button>登录</button>
</div>
</div>
</div>
<div class="bottom">
<ul class="center">
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="top">
<div class="banner">
<img class="left" src="" alt="">
<div class="right">
<img src="" alt="">
<button>
<img src="" alt="">
<span>下载客户端</span>
</button>
<p>pc安卓</p>
</div>
</div>
</div>
<div class="bottom">
<div class="left">
<div class="hot">
<div class="hot_left">
<img src="" alt="">
<ul>
<li></li>
</ul>
</div>
<div class="hot_right">
<span>更多</span>
<img src="" alt="">
</div>
</div>
<ul class="list">
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
<div class="right">
<div class="sign">
<p></p>
<button>用户登录</button>
</div>
<div class="sign_f">
<div class="title">
<p>驱逐歌手</p>
<a href="">查看全部</a>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<button>申请成为网易音乐人</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

54
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.5作业/高顿.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=., initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="top center">
<div class="left">
<img src="" alt="">
<ul>
<li></li>
</ul>
<div class="phone">
<img src="" alt="">
<span>400-xx-xx</span>
</div>
</div>
<div class="right">
<img src="" alt="">
<span>学习空间</span>
<span>登录</span>
</div>
</div>
<div class="bottom">
<ul class="center">
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="ceenter">
<ul class="title">
<li>
<a href=""></a>
</li>
</ul>
<img class="banner" src="" alt="">
</div>
</div>
</body>
</html>

96
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.9简书/index.css Normal file
View File

@@ -0,0 +1,96 @@
body,ul {
margin: 0;
padding: 0;
font-size: 0
}
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.mian {
width: 280px;
height: 450px;
}
.title {
margin-bottom: 15px;
}
.author {
font-size: 14px;
color: #969696;
}
.shuaxin {
font-size: 14px;
color: #969696
}
.shuaxin i {
font-size: 13px;
}
.list li {
overflow: hidden;
margin-bottom: 15px;
}
.picture {
width: 48px;
height: 48px;
border: 1px solid #ddd;
border-radius: 100%;
margin-right: 10px;
}
.person {
font-size: 14px;
color: #333;
padding-top: 5px;
}
.introduce {
font-size: 12px;
color: #969696;
margin-top: 2px;
}
.follow {
font-size: 13px;
color: #42c02e;
margin-top: 5px;
}
.follow i {
zoom: 0.85;
font-weight: 900;
font-size: 13px;
}
.all {
height: 35.07px;
font-size: 13px;
color: #787878;
background-color: #f7f7f7;
border: 1px solid #dcdcdc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
line-height: 35.07px;
}
.all i {
font-size: 13px;
}

116
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/2.9简书/index.html Normal file
View File

@@ -0,0 +1,116 @@
<!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="index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_vly3hygv0lq.css">
</head>
<body>
<div class="mian">
<div class="title hidden">
<div class="author left">
推荐作者
</div>
<div class="shuaxin right">
<i class="iconfont icon-shuaxin"></i>
换一批
</div>
</div>
<ul class="list">
<li>
<img class="left picture"
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="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
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="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
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="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
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="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
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="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
</ul>
<div class="all">
查看全部
<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
</div>
</div>
</body>
</html>

113
历届学生/front-end-team-10/项目练习/学生项目/冯凯/作业/HelloWorld.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

90
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/京东.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>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_v16hmdbwua.css">
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.mian {
background-image: url(https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/53763144452/FocusFullshop/CkNqZnMvdDEvMjEzNjYxLzM4LzI1MzM2LzUxNTEyLzYzZTYyZjRhRmZlNTdiMzA2Lzg3MWFlNTZjMjUwNjhkYmIuanBnEgo5OTktdHlfMF8xMAE47ot6WIT2oaTIAQ/cr/s/q.jpg);
background-size: cover;
width: 590px;
height: 470px;
}
.mian {
position: relative;
}
.nav,
.mian ul {
position: absolute;
}
.nav {
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav i {
color: rgba(255, 255, 255, .8);
font-size: 20px;
}
.right {
float: right;
}
.left {
float: left;
}
.mian ul li {
float: left;
height: 10px;
width: 10px;
background-color: aliceblue;
border-radius: 100%;
margin-right: 4px;
}
.mian ul {
bottom: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="mian">
<div class="nav">
<i class="iconfont icon-gengduo-copy"></i>
<i class="iconfont icon-gengduo right"></i>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

25
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/cainiao.css Normal file
View File

@@ -0,0 +1,25 @@
.main {
background: #96b97d;
width: 100%;
height: 38px;
}
.center {
width: 1280px;
height: 100%;
margin: 0 auto;
}
.main .center ul li {
float: left;
line-height: 38px;
margin-right: 20px;
}
.main .center ul li a {
color: #fff;
}
.main .center ul li a:hover {
color: #e3efd9;
}

9
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/clear.css Normal file
View File

@@ -0,0 +1,9 @@
/* 清除浏览器默认样式的css代码 */
body,ul,input,li,a{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

135
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/header.css Normal file
View File

@@ -0,0 +1,135 @@
.main {
height: 58px;
width: 100%;
background-color: #ffffff;
}
.main .center {
width: 1190px;
margin: 0 auto;
height: 58px;
}
.logo img {
width: 138.69px;
height: 42px;
padding-top: 8px;
}
.logo .city i {
font-size: 20px;
vertical-align: middle;
}
.logo .city .city_name {
font-size: 12px;
color: #333;
}
.logo .city a {
font-size: 12px;
color: #32be4a;
}
.logo .menu li {
float: left;
margin-right: 40px;
}
.logo .menu a {
color: #333;
}
.logo .menu li .after {
color: #32be4a;
font-weight: 700;
position: relative;
}
.logo .menu li .after::after {
background: #32be4a;
content: "";
width: 23px;
height: 3px;
position: absolute;
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
}
.logo .city,
.menu {
line-height: 58px;
}
.logo img,
.city {
margin-right: 50px;
}
.logo .city a {
margin-left: 10px;
}
.list li {
float: left;
margin-left: 40px;
line-height: 58px;
position: relative;
}
.list li a:hover .d_menu {
display: block;
}
.list li .icon-shouji {
font-size: 20px;
vertical-align: bottom;
}
.list li span {
color: #333;
font-size: 15px;
}
.list li .icon-xiala {
font-weight: 700;
}
.list li .d_menu {
padding: 18px 25px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
position: absolute;
top: 38px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.list li .d_menu img {
width: 100px;
height: 100px;
}
.list li .d_menu .down {
color: #333;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 10px;
}
.list li .d_menu .app {
color: #333;
font-weight: 400;
font-size: 14px;
text-align: center;
}

44
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/index.css Normal file
View File

@@ -0,0 +1,44 @@
.main {
width: 716px;
height: 42px;
}
.search_f {
width: 600px;
height: 100%;
position: relative;
}
.search_f input {
width: 100%;
height: 100%;
background-color: #fff;
border: 1px solid #39bc30;
box-sizing: border-box;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 40px;
}
.search_f img{
position: absolute;
width: 16px;
height: 16px;
top: 50%;
transform: translateY(-50%);
padding-left: 15px;
}
.search_button {
width: 116px;
height: 100%;
background-color: #39bc30;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 42px;
text-align: center;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

24
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!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">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="main hidden">
<div class="search_f left">
<img src="./sousuo.png" alt="">
<input placeholder="请输入职位名称或公司" type="text">
</div>
<div class="search_button left">
搜索
</div>
</div>
</body>
</html>

17
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/public.css Normal file
View File

@@ -0,0 +1,17 @@
/* 公共样式的css代码 */
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.hidden {
overflow: hidden;
}
.reset {
line-height: 1;
}

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/sousuo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

41
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/菜鸟教程.html Normal file
View File

@@ -0,0 +1,41 @@
<!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="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./cainiao.css">
</head>
<body>
<div class="main">
<div class="center">
<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>
<li>
<a href="">菜鸟笔记</a>
</li>
</ul>
</div>
</div>
</body>
</html>

73
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.10/赶集网/赶集网导航.html Normal file
View File

@@ -0,0 +1,73 @@
<!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">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./header.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_ecv5rpjc115.css">
</head>
<body>
<div class="main">
<div class="center">
<div class="left logo">
<img class="left" src="https://img.58cdn.com.cn/arthurupload/hrg-fe/zp-ganji/pc/pc-header-logo-2.png"
alt="">
<div class="city left">
<i class="iconfont icon-zuobiao"></i>
<span class="city_name">合肥</span>
<a href="">[切换城市]</a>
</div>
<ul class="left menu">
<li>
<a class="after" href="">首页</a>
</li>
<li>
<a href="">职位</a>
</li>
<li>
<a href="">公司</a>
</li>
</ul>
</div>
<ul class="right list">
<li>
<a href="">
<i class="iconfont icon-shouji"></i>
<span>手机上赶集</span>
<i class="iconfont icon-xiala"></i>
<div class="d_menu">
<div class="down">扫码下载</div>
<div class="app">赶集直招APP</div>
<img src="https://img.58cdn.com.cn/arthurupload/hrg-fe/zp-ganji/pc/gj-qrcode-1.png" alt="">
</div>
</a>
</li>
<li>
<a href="">
<i class="iconfont icon-shouji"></i>
<span>我要找人</span>
<i class="iconfont icon-xiala"></i>
<div class="d_menu">
<div class="down">扫码下载</div>
<div class="app">赶集直招APP</div>
<img src="https://img.58cdn.com.cn/arthurupload/hrg-fe/zp-ganji/pc/gj-qrcode-1.png" alt="">
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>

8
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.13天猫/clear.css Normal file
View File

@@ -0,0 +1,8 @@
body,ul,input,li,a{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

289
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.13天猫/index.css Normal file
View File

@@ -0,0 +1,289 @@
.header_menu {
height: 26px;
background: #f2f2f2;
border-bottom: 1px solid #e5e5e5;
}
.center {
width: 1190px;
margin: 0 auto;
}
.header_left li,
.header_right li {
float: left;
line-height: 26px;
}
.header_left li i{
font-size: 12px;
}
.header_left li a,
.header_right li a{
color: #999;
font-size: 12px;
}
.header_left li:first-child{
margin-right: 20px;
}
.header_left li:last-child{
margin-left: 20px;
}
.header_right li{
position: relative;
margin-left: 10px;
margin-right: 14px;
}
.header_right li i{
font-size: 12px;
color: #999;
}
.header_right li .icon-sanjiaoyou{
transition: all 0.3s;
display: inline-block;
transform: scale(0.7);
}
.header_right li:hover .icon-sanjiaoyou{
transform: rotate(180deg) scale(0.7);
}
.header_right li:first-child:hover .drop_menu{
display: block;
}
.header_right .shoucang:hover .drop_menu1{
display: block;
}
.header_right .drop_menu,.header_right .drop_menu1{
position: absolute;
width: 96px;
height: 57px;
background: #fff;
border: 1px solid rgb(238,238,238);
padding: 8px 10px;
box-sizing: border-box;
line-height: 1.2;
z-index: 9999;
display: none;
}
.header_logo{
height: 120px;
border-bottom: 1px solid #7a45e5;
}
.header_logo .logo_left{
line-height: 120px;
}
.header_logo .logo_left .img_l{
width: 116px;
height: 40px;
float: left;
margin-top: 36px;
margin-right: 20px;
}
.header_logo .logo_left .img_r{
width: 175px;
height: 16px;
}
.header_logo .logo_right{
margin-top: 36px;
}
.header_logo .logo_right input{
width: 347px;
height: 36px;
border: 3px solid #7a45e5;
box-sizing: border-box;
}
.header_logo .logo_right .button{
width: 90px;
height: 36px;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 16px;
background: linear-gradient(to right,#7a45e5 20%,#b23cef 80%);
float: right;
}
.content .list{
height: 461px;
position: relative;
top: -39px;
}
.content .list .list_left{
height: 100%;
width: 200px;
}
.list .list_left ul{
height: 420px;
background: #333;
}
.list .list_left .picture{
margin-bottom: 9px;
padding-top: 15.5px;
}
.list .list_left picture img{
width: 24px;
height: 24px;
margin-right: 10px;
}
.list .list_left .picture span{
font-size: 16px;
color: #fff;
font-weight: 700;
}
.list .list_left .font{
}
.list .list_left .font a{
color: #fff;
font-size: 12px;
}
.list .list_left ul li{
height: 84px;
color: #fff;
width: 160px;
margin-left: 20px;
font-size: 0;
border-bottom: 1px dotted #545454;
box-sizing: border-box;
}
.content .list .list_left .picture img{
width: 24px;
height: 24px;
margin-right: 10px;
}
.content .list .list_left .title{
font-size: 14px;
color: #fff;
padding-left: 20px;
background: linear-gradient(90deg,#7a45e5 20%,#b23cef 80%);
width: 200px;
box-sizing: border-box;
line-height: 38px;
}
.list_right{
width: 990px;
height: 38px;
}
.list_right .title {
padding-left: 46px;
box-sizing: border-box;
line-height: 38px;
}
.list_right .title li {
float: left;
margin-right: 40px
}
.list_right .title li .active {
color: #7a45e5;
font-weight: 600;
}
.list_right .title li a{
font-size: 14px;
color: #333;
}
.banner .text {
text-align: center;
width: 250px;
}
.banner .text .tm_text{
margin-top: 30px;
font-size: 18px;
color: rgb(122, 69, 229);
font-weight: bold;
}
.banner .text .tm_desc{
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: rgb(122, 69, 229);
}
.banner .text .tm_fg{
margin: 20px 0;
}
.banner .text .code{
display: block;
margin: 0 auto;
}
.banner .text .tm_t{
font-size: 14px;
font-weight: bold;
color: rgb(51, 51, 51);
margin-bottom: 8px;
margin-top: 10px;
}
.banner .text .tm_s{
font-size: 12px;
color: rgb(165, 165, 165);
}
.double{
width: 685px;
height: 502px;
background: #fff;
/* background: #8d8d8d; */
box-shadow: 0 3px 10px rgb(0 0 0 / 30%);
padding: 30px 0 4px 30px;
z-index: 999;
min-height: 436px;
}
.double .form{
display: inline-block;
vertical-align: top;
width: 313px;
/* overflow: hidden; */
}
.double .form > li {
height: 140px;
margin-right: 22px;
margin-bottom: 26px;
}
/* .double .form .block{
display: inline-block;
} */
.double .form > li hr{
border: 0;
border-top: 1px solid #333;
margin: 10px 0;
}
.double .form > li .text{
color: #333;
font-size: 12px;
line-height: 12px;
font-weight: 700;
}
/* .double .form li ul li{
display: inline-block;
} */
.double .form > li ul li a{
padding: 0 7px 0 10px;
margin-top: 10px;
border-left: 1px solid #d9d9d9;
font-size: 12px;
height: 12px;
line-height: 12px;
color: #666;
}
.list_left ul li a:hover .double{
display: block;
}
.double{
position: relative;
left: 373px;
bottom: 461px;
display: none;
}
.double i{
position: absolute;
right: 9px;
top: 5px;
}

396
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.13天猫/index.html Normal file
View File

@@ -0,0 +1,396 @@
<!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="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_bnszs9m7c3t.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="header">
<div class="header_menu">
<div class="center">
<ul class="header_left left">
<li>
<i class="iconfont icon-shouye"></i>
<a href="">天猫首页</a>
</li>
<li>
<a href="">嗯，欢迎来到天猫国际</a>
</li>
<li>
<a href="">请登录</a>
</li>
</ul>
<ul class="header_right right">
<li>
<a href="">我的淘宝</a>
<i class="iconfont icon-sanjiaoyou"></i>
<div class="drop_menu">
<a href="">已买到的宝贝</a>
<a href="">已卖出的宝贝</a>
</div>
</li>
<li>
<i class="iconfont icon-gouwuchekong"></i>
<a href="">购物车</a>
</li>
<li class="shoucang">
<a href="">收藏夹</a>
<i class="iconfont icon-sanjiaoyou"></i>
<div class="drop_menu1">
<a href="">收藏的宝贝</a>
<a href="">收藏的店铺</a>
</div>
</li>
<li>
<i class="iconfont icon-shouji"></i>
<a href="">手机版</a>
</li>
<li>
<a href="">淘宝网</a>
</li>
<li>
<a href="">网页无障碍</a>
</li>
</ul>
</div>
</div>
<div class="header_logo">
<div class="center hidden">
<div class="logo_left left">
<img class="img_l" src="https://img.alicdn.com/tfs/TB1ygW.nsfpK1RjSZFOXXa6nFXa-218-80.png" alt="">
<img class="img_r" src="https://img.alicdn.com/tfs/TB1CFE8OEY1gK0jSZFMXXaWcVXa-349-32.png" alt="">
</div>
<div class="logo_right right">
<input type="text">
<div class="button">搜索</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="list">
<div class="list_left left">
<div class="title">
全部商品分类
</div>
<ul>
<li>
<a href="">
<div class="picture">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="font">
<a href="">面膜 /</a>
<a href="">防晒 /</a>
<a href="">面部护理套装</a>
</div>
</a>
</li>
<li>
<div class="picture">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="font">
<a href="">面膜 /</a>
<a href="">防晒 /</a>
<a href="">面部护理套装</a>
</div>
</li>
<li>
<div class="picture">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="font">
<a href="">面膜 /</a>
<a href="">防晒 /</a>
<a href="">面部护理套装</a>
</div>
</li>
<li>
<div class="picture">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="font">
<a href="">面膜 /</a>
<a href="">防晒 /</a>
<a href="">面部护理套装</a>
</div>
</li>
<li>
<div class="picture">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="font">
<a href="">面膜 /</a>
<a href="">防晒 /</a>
<a href="">面部护理套装</a>
</div>
</li>
</ul>
</div>
<div class="list_right left">
<ul class="title">
<li><a class="active" href="">首页</a></li>
<li><a href="">全球精选</a></li>
<li><a href="">井口超市</a></li>
<li><a href="">海外直购</a></li>
</ul>
<div class="banner">
<img class="left"
src="https://gw.alicdn.com/imgextra/i3/O1CN01d3hUsb1NFp8DEzwFF_!!6000000001541-0-tps-740-420.jpg_Q75.jpg"
alt="">
<div class="text left">
<div class="tm_text">天猫国际</div>
<div class="tm_desc">TMALL GLOBAL</div>
<img class="tm_fg"
src="https://gw.alicdn.com/tps/TB1tQM6JXXXXXaeXXXXXXXXXXXX-38-11.jpg_Q75.jpg" alt="">
<img class="code"
src="https://gw.alicdn.com/imgextra/i1/O1CN01g3E02H1JOkHYfqBix_!!6000000001019-0-tps-200-200.jpg_Q75.jpg"
alt="">
<div class="tm_t">畅享全球好货</div>
<div class="tm_s">正品保障，破损无忧，晚到必赔！</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="double">
<i class="iconfont icon-cha"></i>
<ul class="form">
<li>
<div class="text">美妆护肤</div>
<hr>
<ul>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
</ul>
</li>
</ul>
<ul class="form">
<li>
<div class="text">美妆护肤</div>
<hr>
<ul>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
</ul>
</li>
</ul>
<ul class="form">
<li>
<div class="text">美妆护肤</div>
<hr>
<ul>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
</ul>
</li>
</ul>
<ul class="form">
<li>
<div class="text">美妆护肤</div>
<hr>
<ul>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
</ul>
</li>
</ul>
<ul class="form">
<li>
<div class="text">美妆护肤</div>
<hr>
<ul>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
</ul>
</li>
</ul>
<ul class="form">
<li>
<div class="text">美妆护肤</div>
<hr>
<ul>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
<li>
<a href="">保湿补水</a>
<a href="">洁面</a>
<a href="">乳液/面霜</a>
<a href="">化妆水</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

17
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.13天猫/public.css Normal file
View File

@@ -0,0 +1,17 @@
/* 公共样式的css代码 */
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.hidden {
overflow: hidden;
}
.reset {
line-height: 1;
}

8
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.16橱窗 页面练习/clear.css Normal file
View File

@@ -0,0 +1,8 @@
body,ul,input,li,a{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

67
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.16橱窗 页面练习/index.css Normal file
View File

@@ -0,0 +1,67 @@
.header{
width: 100%;
height: .9rem;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.26rem;
box-sizing: border-box;
top: 0;
position: fixed;
border-bottom: 0.01rem solid #e9e9e9;
}
.header .title{
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #010101;
}
.header i{
color: #010101;
}
.content{
margin-top: .9rem;
}
.list{
padding-left: 0.33rem;
}
.list li{
display: flex;
justify-content: space-between;
align-items: center;
height: 1.11rem;
padding-right: 0.35rem;
box-sizing: border-box;
border-bottom: 0.01rem solid #e9e9e9;
}
.list li .list_text{
font-family: PingFang-SC-Medium;
font-size: 0.32rem;
color: #000000;
}
.list li:first-child .list_logo{
align-items: center !important;
}
.list li .list_logo{
display: flex;
align-items: baseline;
}
.list li .list_logo img {
width: 0.64rem;
height: 0.64rem;
border-radius: 100%;
margin-right: 0.15rem;
}
.list li .list_logo i{
color: #bfbfbf;
font-size: .26rem;
}
.list li .list_logo .name{
font-size: 0.28rem;
color: #969696;
}
.list li .list_logo .name_1{
color: #c4c4c4;
font-size: 0.28rem;
}

100
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.16橱窗 页面练习/index.html Normal file
View File

@@ -0,0 +1,100 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_bnszs9m7c3t.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-gengduo-copy"></i>
<div class="title">
编辑个人资料
</div>
<div></div>
</div>
<div class="content">
<ul class="list">
<li>
<div class="list_text">头像</div>
<div class="list_logo">
<img src="https://upload.jianshu.io/users/upload_avatars/3343569/6940ee65-036f-4b7a-9935-5915d9b67d14.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
<i class="iconfont icon-gengduo"></i>
</div>
</li>
<li>
<div class="list_text">昵称</div>
<div class="list_logo">
<div class="name">小徐</div>
<i class="iconfont icon-gengduo"></i>
</div>
</li>
<li>
<div class="list_text">昵称</div>
<div class="list_logo">
<div class="name">小徐</div>
<i class="iconfont icon-gengduo"></i>
</div>
</li>
<li>
<div class="list_text">用户</div>
<div class="list_logo">
<div class="name">1122112211</div>
<i class="iconfont icon-gengduo"></i>
</div>
</li>
<li>
<div class="list_text">性别</div>
<div class="list_logo">
<div class="name">女</div>
<i class="iconfont icon-gengduo"></i>
</div>
</li>
<li>
<div class="list_text">所在地</div>
<div class="list_logo">
<div class="name">安徽省</div>
<i class="iconfont icon-gengduo"></i>
</div>
</li>
<li>
<div class="list_text">个人介绍</div>
<div class="list_logo">
<div class="name_1">填写个人资料更容易获得关注</div>
<i class="iconfont icon-gengduo"></i>
</div>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

25
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.8css/index.css Normal file
View File

@@ -0,0 +1,25 @@
@font-face {
font-family: ziti;
src: url("./shangshouzhaocaimaoti.ttf");
}
/* .font{
font-family: ziti;
font-size: 50px;
} */
/* .font .demo {
font-family: ziti;
font-size: 50px;
} */
/* .demo .font{
font-family: ziti;
font-size: 50px;
} */
/* .demo,.font{
font-family: ziti;
font-size: 50px;
} */
.font > .font2{
font-family: ziti;
font-size: 50px;
}

26
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.8css/index.html Normal file
View File

@@ -0,0 +1,26 @@
<!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>css练习</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- <p class="font">你好</p>
<div class="demo">
你好啊
</div> -->
<div class="demo">
你好啊
<p class="font">
你好
<span class="font2">年后呀</span>
</p>
<p class="font_1">你好</p>
</div>
</body>
</html>

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.8css/shangshouzhaocaimaoti.ttf Normal file
View File

Binary file not shown.

101
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/2.8css/笔记css属性.txt Normal file
View File

@@ -0,0 +1,101 @@
css 写法
三种：
内部写法（写在开始标签内部的）
<p style="color: blue;">这是测试文字</p>
优先级最高
!important 提示css属性的优先级
内联写法（写在head里面的）
外链写法（单独一个css文件）
基本写法：
选择器 {
属性名: 属性值 （可选 !important）
}
组合写法：
选择1 选择器2: 选择 标签1 中 的 标签2 简写：嵌套关系
选择1 > 选择器2: 选择 父标签为1 中 的 2标签 简写：嵌套关系
选择1,选择器2: 同时选中 标签1和2
选择1+选择器2: 选中 紧跟在 标签1 后面 的标签2
选择器: 找人的一种方式
标签选择器
给标签取个名字
类选择器 class （简写 . ）
id选择器 简写 #
这个名字是这个网页唯一的
* 通配符选择器
一般用来清除 标签 的 默认样式
伪类选择器
:hover
:focus
:before
:after
路径写法：
绝对路径
相对距离
./ 当前路径开始寻找
../ 从当前位置返回上一级开始寻找
/ 从当前路径的开始位置开始寻找
css属性学习：
display: 可以隐藏显示元素，将块 和 行 进行 相互转换
inline-block 同时具有 行标签 放在一行的特性，还具有块标签可以设置宽高的特殊
inline 行标签
block 块标签
none 隐藏元素
text-decoration: none; 清除下划线
text-shadow：13px 6px 2px #f00 文字加阴影
font-size: 30px; 设置字体大小
font-weight: bold; 加错
color: red; 设置颜色
background: red; 设置背景色
background-size: cover; 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
background-size: contain;保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
background-attachment: fixed;定义滚动时背景图像相对于谁固定
background-image： ;设置背景图
text-align: center; 文字在父元素的宽度内部居中
opacity: 0 ~ 1; 设置透明度
overflow-y: scroll; 按照y轴滚动
line-height 垂直居中 数值和父元素的高度一样
注意：只针对单行文字
父元素内部子元素的居中方式
vertical-align 垂直居中
letter-spacing: 3px; 字符之间的间距（x轴）

12
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.20nodejs/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!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>
</head>
<body>
<h2>服务端渲染的网站</h2>
</body>
</html>

31
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.20nodejs/index.js Normal file
View File

@@ -0,0 +1,31 @@
// var fs = require("fs");
// var data = fs.readFileSync("./笔记.txt")
// console.log(data.toString());
// var axios = require("axios");
// axios.get('http://www.baidu.com/')
// .then(function (response) {
// // handle success
// console.log(response.data);
// })
// .catch(function (error) {
// // handle error
// console.log(error);
// })
// var utils = require("./utils") //这一步导入 有导入一定有到处
// utils.test()
const http = require('http');
const fs = require("fs");
// Create a local server to receive data from
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'application/json' });
var data = fs.readFileSync("./index.html")
res.end(data.toString());
});
server.listen(8080);

163
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.20nodejs/package-lock.json generated Normal file
View File

@@ -0,0 +1,163 @@
{
"name": "3.20nodejs",
"version": "1.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "3.20nodejs",
"version": "1.0.1",
"license": "ISC",
"dependencies": {
"axios": "^1.3.4"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.3.4",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
}
},
"dependencies": {
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.3.4",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
}
}
}

14
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.20nodejs/package.json Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "3.20nodejs",
"version": "1.0.1",
"description": "nodejs第一天学习",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.3.4"
}
}

7
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.20nodejs/utils.js Normal file
View File

@@ -0,0 +1,7 @@
class Utils {
test(){
console.log("test11111111")
}
}
module.exports = new Utils() //module(模块) export(导出)

69
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.20nodejs/笔记.txt Normal file
View File

@@ -0,0 +1,69 @@
nodejs
是JavaScript在 服务器 端的一个 运行环境
作用：
js 就会 成为 后端编程语言
js可以开发桌面端应用
php
java
c#(asp.net)
python
go
c++
js 必须 依赖浏览器才能运行
nodejs 实现核心：
v8 内核（js引擎）
c++ （实现 js 控制操作系统）
能操作数据库（mysql），能提供接口
自带 npm (包[插件]管理工具) 全球最大的插件市场
npm init 初始化一个nodejs新项目
（c）npm install(i) 插件名 插件安装的环境
（c）npm i 根据package.json 里面 的 devDependencies 和 dependencies进行
安装依赖
安装的环境
dev devDependencies 开发阶段 --save-dev -D
dep dependencies 正式阶段 --save -S
全局安装 -g
npm uninstall 插件名
npm update 插件名
npm run 你的启动命令
nodejs 做项目的时候：
package.json
保存项目的一些基本信息(例如 项目名，版本号，作者，启动命令，依赖信息 这些)
插件：
系统提供
你下载
dns 解析服务器
网络上的dns
本地的dns

48
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.3ajax/index.html Normal file
View File

@@ -0,0 +1,48 @@
<!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>
<ul>
</ul>
</body>
<script>
// console.log(window);
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:3000/api/json/index")
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if(xhr.status == 200){
var data = JSON.parse(xhr.response)
console.log((data.result.list));
data.result.list.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<div class="title">${v.title}</div>
<img src="${v.img_src}" alt="">
</li>
`
});
}else{
alert("当前网络状态不假")
}
}
}
</script>
</html>

0
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.3ajax/indexhml Normal file
View File

71
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.3ajax/next.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>
<body>
<ul></ul>
<button>下一页</button>
</body>
<script>
var page = 1;
function ajax() {
var xhr = new XMLHttpRequest();
xhr.open("GET", `http://127.0.0.1:3000/api/json/mechanismList?id=82&page=${page}`)
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.response)
readList(data)
} else {
alert("当前网络状态不假")
}
}
}
}
function readList(list) {
console.log(list.result.data);
list.result.data.forEach(v => {
$("ul").innerHTML += `
<li>
<div class="title">${v.title}</div>
<img src="${v.preview}" alt="">
</li>
`;
});
}
$("button").onclick = () => {
page += 1;
ajax()
}
ajax()
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

42
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.4ajax封装/ajaxv1.js Normal file
View File

@@ -0,0 +1,42 @@
class Http {
constructor() {
this.xhr = new XMLHttpRequest();
}
get(params) {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
par = par.replace("&", "?")
this.xhr.open("GET", `${params.url}${par}`)
this.xhr.send()
this.ReadyState(params)
}
post(params) {
this.xhr.open("POST", `${params.url}`)
this.xhr.setRequestHeader('Content-Type', 'application/json');
this.xhr.send(JSON.stringify(params.data))
this.ReadyState(params)
}
ReadyState(params) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
var data = JSON.parse(this.xhr.response);
params.success(data)
} else {
params.error(this.xhr)
}
}
}
}
}
var http = new Http();

0
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.4ajax封装/ajaxv2.js Normal file
View File

32
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/3.4ajax封装/ajax封装.html Normal file
View File

@@ -0,0 +1,32 @@
<!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>
<script src="ajaxv1.js"></script>
</head>
<body>
</body>
<script>
http.get({
url: 'http://127.0.0.1:3000/api/json/mechanismList',
data: {
id: 82,
page: 1
}
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
</script>
</html>

49
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/for.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>
</body>
<script>
// var money = 180;
// if ( money > 100){
// console.log("吃好的");
// }else{
// console.log("吃差的");
// }
// for (var a = 1;a <= 10;a++){
// console.log(a);
// }
// 打印数组
// var arr = [1,2,3,4,5,6,7,]
// for(var a = 0;a < arr.length;a++){
// console.log(arr[a]);
// }
// 累加
// var b=0;
// for(var a = 1;a <= 10;a++){
// b += a; (b=b+a)
// }
// console.log(b)
// 9*9
// b 前 a 后
// var c =""
// for(var a = 1;a <= 9;a++){
// for(var b = 1;b <= a;b++){
// c+= `${b} X ${a} =${b * a}` ;
// }
// }
// console.log(c);
</script>
</html>

47
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/function.html Normal file
View File

@@ -0,0 +1,47 @@
<!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>
</body>
<script>
// 实现数累计之和
// function js (){
// var res = 0
// for (var a = 0;a < arguments.length;a++){
// res += arguments[a]
// }
// return res;
// }
// console.log(js(1,2,3));
// 闭包 需要缓存数据 这里实现累加
// bibao 这个内部函数访问 var res = 0 这个外部变量的过程 叫做闭包
// 这时 var res = 0 外部变量被缓存
// cc 就是bibao 外部的js是只执行一次 ，内部的闭包运行多少次都行在进行累加
// function js() {
// var res = 0
// function bibao() {
// for (var a = 0; a < arguments.length; a++) {
// res += arguments[a]
// }
// return res;
// }
// return bibao;
// }
// var cc = js()
// cc(1,2)
// console.log(cc(3,4));
// console.log(cc(5,6));
</script>
</html>

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

78
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/富强.html Normal file
View File

@@ -0,0 +1,78 @@
<!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;
}
span {
user-select: none;
position: fixed;
transition: all 1s;
}
body {
height: 100vh;
}
</style>
</head>
<body>
</body>
<script>
var textArr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var i = 0;
$("body").onclick = (e) => {
var { x, y } = e;//解构赋值
var span = document.createElement("span");
span.innerText = textArr[i];
span.style = `
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
position: fixed;
left: ${x}px;
top: ${y}px;
`
$("body").appendChild(span) //添加span
//越界处理，数组的下标超过了 数组下标让他重新来
i++
if (i > 11) {
i = 0
}
sport(span,y)
}
function sport(span,y) {
setTimeout(() => {
span.style.top = `${y - 200}px`
}, 200)
setTimeout(() => {
$("body").removeChild(span)//延迟 1250毫秒过后删除
}, 1250)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

94
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/搜索.html Normal file
View File

@@ -0,0 +1,94 @@
<!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;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<button>搜索</button>
<ul>
</ul>
</body>
<script>
var keyWordList = [
'今天出太阳了', '太阳很好', '不喜欢js学习',
'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
'今天不想学习css', '今晚出去飙车', '明天出去修车'
];
var newKeyList = []
$("input").oninput = () => {
newKeyList = []
// 这个 newKeyList = [] 写在这里目的实现清空
if ($("input").value.length > 0) {
// 把keyWordList里的值循环
// 里面的if进行判断符合条件的数据 incledes push放进新的数组当中
//v就是数组加下标
keyWordList.forEach(v => {
if (v.includes($("input").value)) {
var text = v.replace($("input").value, `<span style="color:red;">${$("input").value}</span>`)
newKeyList.push(text)
}
})
console.log("符合条件的数据：", newKeyList);
renderUl()
} else {
$("ul").innerHTML = ""
}
}
//渲染页面 第四步把符合条件的 展示 在 ul li 里面给用户看
function renderUl() {
//把新的li插入到ul里
//innerHTML 父元素内部的html
$("ul").innerHTML = ""//这一步用来清空ul里的值，防止数组累计
//将新的获取的newKeyList进行循环
newKeyList.forEach(v => {
$("ul").innerHTML += `<li>${v}</li>`
})
bindLiClick()
}
//第五步
function bindLiClick() {
//这边_ 得到的一个数组
//三次循环给三次li绑定事件
_("ul li").forEach(v => {
v.onclick = () => {
console.dir(v);
$("input").value = v.innerText
SearchBaidu(v.innerText)
}
})
}
//给button绑定点击事件
$("button").onclick = () => SearchBaidu($("input").value)
function SearchBaidu(text) {
open(`https://www.baidu.com/s?wd=${text}`)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

88
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/搜索框练习.html Normal file
View File

@@ -0,0 +1,88 @@
<!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;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<button>搜索</button>
<ul>
</ul>
</body>
<script>
var keyWordList = [
'今天出太阳了', '太阳很好', '不喜欢js学习',
'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
'今天不想学习css', '今晚出去飙车', '明天出去修车'
];
// for(i=0;i < keyWordList.length;i++){
// console.log(keyWordList[i]);
// }
var newKeyList = []
$("input").oninput = () => {
newKeyList = []
if ($("input").value.length > 0) {
// console.dir($("input").value);
keyWordList.forEach(v => {
if (v.includes($("input").value)) {
var text = v.replace($("input").value, `<span style="color:red;">${$("input").value}</span>`)
newKeyList.push(text)
}
})
console.log("符合条件的数据：", newKeyList);
renderUl()
}
else {
$("ul").innerHTML = ""
}
}
$("button").onclick = () => { SearchBaidu($("input").value) }
function renderUl() {
$("ul").innerHTML = ""
newKeyList.forEach(v => {
$("ul").innerHTML += `<li>${v}</li>`
})
bindLiClick()
}
function bindLiClick() {
_("ul li").forEach(v => {
v.onclick = () => {
console.log(v);
$("input").value = v.innerText
SearchBaidu(v.innerText)
}
})
}
function SearchBaidu(text) {
open(`https://www.baidu.com/s?wd=${text}`)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

176
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/红包.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>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 70px;
height: 90px;
position: fixed;
}
body {
height: 100vh;
}
.alert {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
display: none;
}
.zz {
width: 100%;
height: 100%;
background: #000000a8;
position: fixed;
z-index: 1;
}
.text {
width: 300px;
height: 250px;
background: #fff;
position: fixed;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
padding: 11px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.text .title {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #d5d5d5;
}
.text .close {
position: absolute;
right: 10px;
top: 4px;
font-size: 20px;
cursor: pointer;
user-select: none;
}
.text .content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
</style>
</head>
<body>
<div class="alert">
<div class="zz"></div>
<div class="text">
<div class="close"> x </div>
<div class="title">恭喜中奖</div>
<div class="content"></div>
</div>
</div>
</body>
<script>
var { clientWidth, clientHeight } = document.body;
var offsetLeft = clientWidth - 70, gId = null, gImg = null;
function createdHB() {
var randomLeft = Math.random() * offsetLeft;
var img = document.createElement("img");
img.src = "./hb.png";
img.onclick = () => {
gImg = img;
probability()
$(".alert").style.display = "block"
_("img").forEach(v => clearInterval(v.intervalId))
clearInterval(gId)
}
img.style = `
left: ${randomLeft}px;
top: -90px;
`;
$("body").appendChild(img)
sport(img)
}
function sport(img) {
img.intervalId = setInterval(() => {
var oldTop = Number(img.style.top.replace("px", ""));
var newTop = oldTop + 1
img.style.top = `${newTop}px`
if (newTop > clientHeight) {
$("body").removeChild(img);
clearInterval(img.intervalId)
}
}, 10);
}
$(".text .close").onclick = () => {
$(".alert").style.display = "none"
$("body").removeChild(gImg);
_("img").forEach(v => sport(v))
auto()
}
function auto() {
gId = setInterval(() => {
createdHB()
}, 500)
}
function probability() {
var probabilityNums = Number((Math.random() * 10).toFixed(4))
if (probabilityNums < 0.0002) {
$(".content").innerText = "恭喜中得一等奖！"
} else if (probabilityNums > 0.0001 && probabilityNums < 8) {
$(".content").innerText = "恭喜中得三等奖！"
} else {
$(".content").innerText = "恭喜中得二等奖！"
}
}
auto()
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

12
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/.babelrc Normal file
View File

@@ -0,0 +1,12 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

9
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/.editorconfig Normal file
View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

4
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/.eslintignore Normal file
View File

@@ -0,0 +1,4 @@
/build/
/config/
/dist/
/*.js

29
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/.eslintrc.js Normal file
View File

@@ -0,0 +1,29 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

14
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/.gitignore vendored Normal file
View File

@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

10
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/.postcssrc.js Normal file
View File

@@ -0,0 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

21
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/README.md Normal file
View File

@@ -0,0 +1,21 @@
# vuecli2xstudy
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

41
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/build/build.js Normal file
View File

@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

54
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/build/check-versions.js Normal file
View File

@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

BIN
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/build/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

101
历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/vuecli2x/vuecli2x/build/utils.js Normal file
View File

@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

Some files were not shown because too many files have changed in this diff Show More