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

105
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/css总结.html Normal file
View File

@@ -0,0 +1,105 @@
<!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>
.span {
width: 100px;
height: 100px;
background-color: pink;
}
.test {
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
.test:hover {
background-color: blue;
}
</style>
</head>
<body>
给html添加样式有三种:
1.行内样式
<p style="width: 100px;height: 100px;background-color:red">我是段落标签</p>
2.在head头标签里面书写style样式
<span class="span">我是span标签</span>
3.外链样式
<link rel="stylesheet" href="./test.css">
<div id="a">我是div标签</div>
选择器类型:
1.标签选择器,直接选择标签添加样式
2.class选择器,通过给标签添加class值,然后在样式使用.的方式添加样式
3.id选择器,通过给标签添加id值,然后在样式使用#的方式添加样式,口头约定id的值不能重复,与js配套使用
4.通配符选择器,*{},选择所有的标签并设置样式
5.伪类选择器,:hover鼠标经过
<p class="test">test</p>
<style>
p,
ul {
/* 同时选中p标签和ul标签 */
}
ul li {
/* 选中ul里面所有的li */
}
ul>li {
/* 作用和上面的是差不多 */
}
ul div+li {
/* 选择ul里面的div和同级最近的li(只选择第一个li) */
}
li:nth-child(2n+1) {
/* 里面的2n+1,分开来看,右边的+1代表从第一个开始,左边的2n就是隔俩个,这句话的意思就是从第一个开始,然后隔俩个 */
}
/* 从第5个开始，到最后 */
ul li:nth-child(n+5) {
width: 100px;
height: 100px;
background-color: red;
}
/* 前俩个 */
ul li:nth-child(-n+2) {
width: 100px;
height: 100px;
background-color: skyblue;
}
/* 伪元素 */
ul li:nth-child(10)::after {
content: '111';
background-color: pink;
}
</style>
<p></p>
<ul>
<div>0</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>

5
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/test.css Normal file
View File

@@ -0,0 +1,5 @@
#a{
width: 100px;
height: 100px;
background-color: skyblue;
}

1
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/提交测试.md Normal file
View File

@@ -0,0 +1 @@
提交测试-

88
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/浮动以及定位总结.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>
/* 最终的宽 = 宽(100) + 左右边框(20) + 左右内边距(20)=140
注意:margin是外边距,并不影响实际宽高,也只有它不影响宽高
但每次计算都很麻烦能不能不自己手动计算,让电脑自动计算?
答案是有的,添加box-sizing:border-box,比如你设置一个盒子宽高为100*100,无论你再怎么加padding,border,他的实际宽高都是100*100
他会根据你输入的padding和margin自动减内容*/
.a{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid blue;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="a"></div>
---------------------------------------
<!-- flot设计的初衷就是环绕文字的,所以文字不会被压在底下 -->
定位:1.相对定位 position: relative;
元素会脱离标准流,保留原来的位置不会被删除
在移动元素的时候,参照点是自己原来的位置
2.绝对定位 position: absolute;
元素会脱离标准流,不保留原来的位置
绝对定位在移动元素的时候,是看看父元素是否有定位,有就以该元素为参照点去移动,
没有就向上一级去查找,有就以该元素为参照点去移动,还没有在往上查找,如果上面都没有,就以body为参照点去移动
总结:相对定位 position: relative;是当爹的一个过程.而绝对定位 position: absolute;是找爹的过程,没找到爹就以body为爹
一般实际开发中,都是子元素绝对定位,父元素相对定位
3.固定定位 position: fixed;
固定在可视区域的摸个地方
层级 z-index:数值
注意:该数值越大,就越往上,值越小可以越往下,可以是负值哦,而且z-index是会相互影响的
思考?现在是否可以实现把红色盒子夹在俩个盒子中间?答案是不行的,
最初的想法是给a3的z-index数值最大,其次是a1的z-index数值第二大,最后是a2的z-index的数值最小
但结果是不行的,最后是以父盒子a2为准,子盒子a3继承了父盒子a2.
<style>
.a1{
width: 100px;
height: 100px;background-color: red;
float: left;
position: relative;
left: 30px;
}
.a2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
position:relative;
}
.a3{
width: 50px;
height: 50px;
background-color: pink;
float: left;
position: absolute;
left: 10px;
}
</style>
<div class="a0">
<div class="a1">a1</div>
<div class="a2">a2
<div class="a3">a3</div>
</div>
</div>
</body>
</html>

4
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/问题.txt Normal file
View File

@@ -0,0 +1,4 @@
现在有三个盒子,给每个盒子添加浮动都会在一行显示,但有十个二十个每个添加浮动会很累,
为何不用一个div把他们包裹起来,给div添加一个浮动,理论上会让他们全部浮动在一行显示,为什么不行?
思考:float是否只能添加在子元素上面,不能添加在父元素上面??

20
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/CSS/clear.css Normal file
View File

@@ -0,0 +1,20 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
outline: none;
}

341
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/CSS/index.css Normal file
View File

@@ -0,0 +1,341 @@
/* 最上方头部样式开始 */
.top_box{
margin-top: 20px;
height: 26px;
}
.top_box ul{
display: flex;
justify-content: flex-end;
}
.top_box ul li a{
color: black;
line-height: 26px;
}
.top_box ul li:last-child div{
height: 10px;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin-top: 12px;
}
.top_box ul li:nth-child(2){
margin-right: 10px;
}
.top_box ul li:nth-child(1){
margin-right: 30px;
}
/* 最上方头部样式结束 */
/* 功能搜索框开始 */
.sou{
margin-top: 15px;
height: 60px;
}
.sou ul{
display: flex;
justify-content: space-between;
align-items: center;
}
.sou_1 img{
height: 60px;
}
.sou_2{
margin-right: -300px;
box-sizing: border-box;
display: flex;
border: 1px solid #e0e0e0;
}
.sou_2 div:first-child input{
width: 354px;
height: 43px;
border: none;
outline: none;
box-sizing: border-box;
}
.icon-sousuo:before {
content: "\e601";
font-size: 24px;
text-align: center;
line-height: 43px;
color: red;
}
.sou_3{
margin-right: -300px;
width: 95px;
height: 43px;
background-color: red;
}
.sou_3 div{
margin-top: 3px;
color: #fff;
font-size: 12px;
text-align: center;
}
.sou_4{
height: 43px;
box-sizing: border-box;
border: 1px solid red;
display: flex;
}
.sou_4 a{
text-align: center;
line-height: 43px;
color: red;
}
.sou_4 a:first-child{
width:93px;
height: 43px;
box-sizing: border-box;
}
.sou_4 a:last-child{
width: 34px;
height: 42px;
border-left: 1px solid red;
}
.icon-youjiantou:before {
font-size: 20px;
color: red;
content: "\e607";
}
/* 功能搜索框结束 */
/* 导航模块开始 */
.nav{
margin-top: 20px;
height: 42px;
border: 1px solid #333;
}
.nav_a{
display: flex;
}
.nav_a li{
width: 129px;
height: 42px;
border-right: 1px solid #333;
}
.nav_a a{
text-align: center;
display: block;
line-height: 42px;
color: #000;
font-size: 16px;
text-decoration: none;
}
.nav_a li:last-child{
border-right: 0;
}
.nav_a li:hover{
background-color: rgb(235, 231, 231);
}
.dropdown-content a{
background-color: black;
color: #fff;
}
.dropdown-content{
width: 129px;
display: none;
position: absolute;
}
.nav_li{
position: relative;
}
.nav_li:hover .dropdown-content{
display: block;
z-index: 1;
}
/* 导航模块结束 */
/* 轮播图模块开始 */
.lunbo{
margin-top: 30px;
display: flex;
position: relative;
}
.lunbo_2{
width: 250px;
height: 250px;
background-color: #fff;
position: absolute;
right: 5%;
bottom: 10%;
}
.lunbo_2 div:first-child{
margin: 46px 0 0 20px;
font-size: 24px;
letter-spacing: 4px;
font-weight: 800;
color: #4d4d4d;
}
.lunbo_3{
width: 137px;
height: 38px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin: 80px 0 0 20px;
border: 1px solid red;
}
.lunbo_3 span{
font-size: 15px;
}
.lunbo_3 span:last-child{
margin-left: 10px;
padding-left: 12px;
width: 30px;
height: 38px;
border-left: 1px solid red;
}
.lunbo_3 span{
line-height: 38px;
margin: 0 auto;
}
/* 轮播图模块结束 */
/* 日历模块开始 */
.rili{
margin-top: 30px;
}
.rili_1{
margin-top: 20px;
height: 60px;
background-color: black;
}
.asd{
color: #fff;
font-size: 30px;
font-weight:600;
line-height: 60px;
text-align: center;
}
.rili_3{
width: 1000px;
height:90px;
margin: 0 auto;
}
.rili_2{
margin-top: 3px;
height: 120px;
background-color: rgb(231, 12, 12);
}
.rili_2 ul{
display: flex;
justify-content: space-around;
}
.rili_3 ul li{
line-height: 45px;
text-align: center;
color: #fff;
width: 250px;
height: 90px;
border-left: 1px dashed #fff;
border-bottom: 1px dashed #fff;
}
.rili_3 ul li:last-child{
border-right: 1px dashed #fff;
}
.rili_3 ul li div span{
font-size: 30px;
}
.rili_3 li div:first-child{
font-size: 20px;
}
.rili_3 li div:last-child{
font-size: 15px;
}
/* 日历模块结束 */
/* 新闻模块开始 */
.news{
/* 有问题,未发现,待解决 */
margin-top: 150px;
}
/* 新闻模块结束 */
/* 热点沙龙模块开始 */
.shalong{
padding-top:20px;
}
.guding_fu{
position: relative;
display: flex;
}
.guding_son1{
bottom: 0;
right: 0;
width: 234px;
height: 60px;
background-color: #fff;
position: absolute;
}
.guding_son_2{
color: #fff;
line-height: 30px;
text-align: center;
width: 100px;
height: 30px;
right: 0;
bottom: 60px;
background-color:rgba(0,0,0, .3);
position: absolute;
}
.guding_son1{
color:black;
font-size: 20px;
}
.icon-iconfontjiantou-copy:before {
content: "\e602";
font-size: 24px;
margin-left: 125px;
}
/* 热点沙龙模块结束 */

67
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/CSS/pub.css Normal file
View File

@@ -0,0 +1,67 @@
.center{
width: 1170px;
margin: 0 auto;
}
.com{
font-size:30px;
font-weight: 600;
}
/* 新闻模块公共区域 */
.newss_com {
margin-top: 20px;
}
.newss_11{
display: flex;
justify-content: space-between;
}
.newss_com img{
width: 282px;
height: 300px;
}
.newss_11 li{
width: 282px;
height: 300px;
background-color: black;
}
.xxx{
background-color: rgb(231, 12, 12) !important;
}
.news_1{
margin-top: 30px;
margin-left: 30px;
font-size: 30px;
}
.news_2{
font-size: 14px;
margin-top: 20px;
margin-left: 30px;
}
.news_3{
font-size: 14px;
color: black;
margin-left: 30px;
margin-top: 150px;
}
.comm{
color: #fff;
}
.comm a div{
color: #fff;
}
.icon-youjiantou1:before {
padding-left: 10px;
content: "\e600";
font-size: 15px;
}

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/img/1-NEWS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/img/Home_1170x430.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 427 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/img/iconfooter_08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/img/news-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/img/news-2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

266
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/仿写网站/index.html Normal file
View File

@@ -0,0 +1,266 @@
<!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>仿写ACCA官网</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390285_jknr6w119f.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390285_rg1lb19fesr.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390285_2wkve69vkbj.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390285_alpt9eg4nns.css">
<link rel="stylesheet" href="./CSS/clear.css">
<link rel="stylesheet" href="./CSS/pub.css">
<link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
<!-- 最上方头部开始 -->
<div class="top_box">
<div class="center">
<ul>
<li><a href="#">职业版公告位</a></li>
<li><a href="#">中国</a></li>
<li>
<div></div>
</li>
</ul>
</div>
</div>
<!-- 最上方头部结束 -->
<!-- 功能搜索框开始 -->
<div class="sou center">
<ul>
<li class="sou_1"><img src="./img/1-NEWS.png" alt=""><a href="#"></a></li>
<li class="sou_2">
<div> <input type="text"></div>
<div><i class="iconfont icon-sousuo"></i></div>
</li>
<li class="sou_3">
<a href="#">
<div>登录</div>
<div>ACCA中国</div>
</a>
</li>
<li class="sou_4">
<a href="#">myACCA</a>
<a href="#"> <i class="iconfont icon-youjiantou"></i></i></a>
</li>
</ul>
</div>
<!-- 功能搜索框结束 -->
<!-- 导航模块开始 -->
<div class="nav center">
<ul class="nav_a">
<li class="nav_li">
<a href="#">首页</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">获取资格</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">学员</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">准会员</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">会员</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">雇主</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">教学机构</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">洞察报告</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
<li class="nav_li">
<a href="#">热点活动</a>
<div class="dropdown-content">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</li>
</ul>
</div>
<!-- 导航模块结束 -->
<!-- 轮播图模块开始 -->
<div class="lunbo center">
<div><img src="./img/Home_1170x430.jpg" alt=""></div>
<div class="lunbo_2">
<div>为梦启航</div>
<div>
<a class="lunbo_3">
<span href="#">加入ACCA</span>
<span href="#"> <i class="iconfont icon-youjiantou"></i></a>
</li>
</div>
</div>
</div>
<!-- 轮播图模块结束 -->
<!-- 日历模块开始 -->
<div class="rili center">
<div class="com">日历</div>
<div class="rili_1">
<div class="asd">2021年3月考试报名时间</div>
<div class="rili_2">
<div class="rili_3">
<ul>
<li>
<div>04 <span>AUG</span> 2020</div>
<div>提前开始报名时间</div>
</li>
<li>
<div>16 <span>NOV</span> 2020</div>
<div>提前报名截止时间</div>
</li>
<li>
<div>01 <span>FEB</span> 2021</div>
<div>常规报名截止时间</div>
</li>
<li>
<div>08 <span>FEB</span> 2021</div>
<div>后期报名截止时间</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 日历模块结束 -->
<!-- 新闻模块开始 -->
<div class="news center">
<div class="com">新闻</div>
<div class="newss_com">
<ul class="newss_11">
<li>
<a href="#" class="guding_fu">
<img src="./img/news-1.png" alt="">
<div class="guding_son_2">ACC新闻</div>
<div class="guding_son1">ACC资深会员约翰当选IFAC会长<i class="iconfont icon-iconfontjiantou-copy"></i></div>
</a>
</li>
<li>
<a href="#" class="guding_fu">
<img src="./img/news-2.jpeg" alt="">
<div class="guding_son_2">ACC新闻</div>
<div class="guding_son1">ACC资深会员约翰当选IFAC会长<i class="iconfont icon-iconfontjiantou-copy"></i></div>
</a>
</li>
<li>
<div class="comm">
<p class="news_1">ACCA公告</p>
<p class="news_2">关于2021年3月考季常见问题</p>
<a href="#">
<div class="news_3">点击查看<i class="iconfont icon-youjiantou1"></i></div>
</a>
</div>
</li>
<li class="xxx">
<div class="comm">
<p class="news_1">ACCA公告</p>
<p class="news_2">关于2021年3月考季常见问题</p>
<a href="#">
<div class="news_3">点击查看<i class="iconfont icon-youjiantou1"></i></div>
</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 新闻模块结束 -->
<!-- 热点沙龙模块开始 -->
<div class="shalong center">
<div class="com">热点沙龙</div>
<div class="newss_com">
<ul class="newss_11">
<li>
<div class="comm">
<p class="news_1">ACCA公告</p>
<p class="news_2">关于2021年3月考季常见问题</p>
<a href="#">
<div class="news_3">点击查看<i class="iconfont icon-youjiantou1"></i></div>
</a>
</div>
</li>
<li class="xxx">
<div class="comm">
<p class="news_1">ACCA公告</p>
<p class="news_2">关于2021年3月考季常见问题</p>
<a href="#">
<div class="news_3">点击查看<i class="iconfont icon-youjiantou1"></i></div>
</a>
</div>
</li>
<li>
<a href="#" class="guding_fu">
<img src="./img/news-1.png" alt="">
<div class="guding_son_2">ACC新闻</div>
<div class="guding_son1">ACC资深会员约翰当选IFAC会长<i class="iconfont icon-iconfontjiantou-copy"></i></div>
</a>
</li>
<li>
<a href="#" class="guding_fu">
<img src="./img/news-2.jpeg" alt="">
<div class="guding_son_2">ACC新闻</div>
<div class="guding_son1">ACC资深会员约翰当选IFAC会长<i class="iconfont icon-iconfontjiantou-copy"></i></div>
</a>
</li>
</ul>
</div>
</div>
<!-- 热点沙龙模块结束 -->
</body>
</html>

19
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/css/clear.css Normal file
View File

@@ -0,0 +1,19 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
outline: none;
}

272
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/css/index.css Normal file
View File

@@ -0,0 +1,272 @@
/* 头部开始 */
.nav{
height: 40px;
background-color: #333;
line-height: 40px;
}
.nav_left li,.nav_right li{
display: inline-block;
}
.nav a{
color: rgb(189, 187, 184);
font-size: 15px;
}
.nav_left a:hover{
color: #fff;
}
.nav_right li:nth-child(-n+5) a:hover{
color: #fff;
}
.nav span{
position: relative;
top: -1px;
color: #636060;
margin-left: 5px;
}
.nav_right li:last-child{
width:100px;
height: 40px;
background-color: #424242;
text-align: center;
}
.nav_right li:last-child:hover{
background-color: #fff;
}
.asdf{
position: relative;
}
.dorp{
display: none;
width: 300px;
height: 100px;
position: absolute;
right: 0px;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.asdf:hover .dorp{
display: block;
}
.dorp p{
font-size: 12px;
line-height: 100px;
}
/* 头部结束 */
/* 导航栏开始 */
.log{
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.log_left{
width:50px;
height:50px;
position:relative;
color:black;
transition:all.3s;
transform-style:preserve-3d;
}
.log_left div{
text-align: center;
line-height: 50px;
}
.log_left div{
width:100%;
height:100%;
position:absolute;
}
.log_left div:first-child{
background-color:skyblue;
/* 里盒子，Y轴移动50px（父盒子的一半） */
transform:translateY(25px);
/* 里盒子，X轴向前旋转90*/
transform:rotateX(-90deg);
}
.log_left div:last-child{
background-color:skyblue;
/* 外盒子向Z轴移动50 */
transform:translateZ(25px);
}
.log_left:hover{
/* 旋转90 */
transform:rotateX(90deg);
}
.log_mid{
display: flex;
align-items: center;
}
.log_mid a{
color: black;
margin: 0 5px;
}
.log_mid a:hover{
color: orangered;
}
.log_right{
box-sizing: border-box;
display: flex;
align-items: center;
border: 1px solid #e0e0e0;
}
.log_right div:nth-child(2){
border-left: 1px solid #e0e0e0;
width: 51px;
height: 48px;
text-align: center;
line-height: 48px;
}
.log_right div:nth-child(2):hover{
background-color: rgb(187, 134, 35);
}
.log_right div input{
width: 245px;
height: 48px;
border: none;
outline: none;
box-sizing: border-box;
}
/* 导航栏结束 */
/* 商品图开始 */
.tu{
margin-top: 20px;
width: 1226px;
height: 570px;
background: url(../img/1.webp) repeat;
background-position: center;
}
.sp1{
background-color: rgba(0,0,0,0.2);
float: left;
}
.sp2{
width: 234px;
height: 570px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.sp2 a{
color: #fff;
font-size: 16px;
}
.sp2 a span{
margin-left: 75px;
color: #fff;
}
.shouji_fu{
position: relative;
display: inline-block;
}
.shouji{
display: none;
left: 234px;
width: 992px;
height: 571px;
top: -1px;
left: 233px;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.shouji span{
color: black;
}
.shouji_fu:hover .shouji{
display: block;
}
.sp2 li{
line-height: 55px;
text-align: center;
width: 234px;
height: 55px;
}
.shouji span{
margin:0 100px
}
/* 商品图结束 */
/* 长图部分开始 */
.changtu{
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.changtu_letf span{
font-size: 12px;
color: rgb(223, 219, 219);
}
.changtu_letf{
width: 234px;
height: 170px;
background: #5f5750;
display: flex;
flex-flow:row wrap;
justify-content: space-between;
}
.changtu_letf li{
width:33%;
}
.changtu_letf a{
display: flex;
flex-direction: column;
align-items: center;
}
.changtu_letf img{
width: 24px;
height: 24px;
display: inline-block;
}
.changtu_letf li:nth-child(-n+3){
margin-top:20px;
}
.changtu_letf :hover{
color: #fff;
}
/* 长图部分结束 */

25
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/css/pub.css Normal file
View File

@@ -0,0 +1,25 @@
.center{
width: 1226px;
margin: 0 auto;
}
.float_left{
float: left;
}
.float_right{
float: right;
}
input{
outline: none;
}
body{
height: 10000px;
}
.changdu{
width: 316px;
height: 170px;
}

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang1-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang1-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 637 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang1-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1010 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang1-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 661 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang1-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang1-6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 579 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/chang4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/img/mi-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

182
历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/index.html Normal file
View File

@@ -0,0 +1,182 @@
<!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="http://at.alicdn.com/t/font_2390285_q4fyhaw31o.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390285_2wkve69vkbj.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/index.js"></script>
</head>
<body>
<!-- 头部开始 -->
<div class="nav">
<div class="center">
<ul class="nav_left float_left">
<li><a href="#">小米商城</a></li><span>|</span>
<li><a href="#">MIUI</a></li><span>|</span>
<li><a href="#"> IoT </a></li><span>|</span>
<li><a href="#">云服务</a></li><span>|</span>
<li><a href="#">天星数科</a></li><span>|</span>
<li><a href="#">有品</a></li><span>|</span>
<li><a href="#">小爱开放平台</a></li><span>|</span>
<li><a href="#">企业团购</a></li><span>|</span>
<li><a href="#">资质证照</a></li><span>|</span>
<li><a href="#">协议规则</a></li><span>|</span>
<li><a href="#">下载app </a></li><span>|</span>
<li><a href="#">智能生活</a></li><span>|</span>
<li><a href="#"> Select Location</a></li>
</ul>
<ul class="nav_right float_right">
<li><a href="#">登录</a></li><span>|</span>
<li><a href="#">注册</a></li><span>|</span>
<li><a href="#">消息通知</a></li>
<li class="asdf">
<a href="#"><i class="iconfont icon-gouwuche"></i>购物车</a>
<div class="dorp">
<p>购物车中还没有商品，赶紧选购吧！</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 头部结束 -->
<!-- 导航栏开始 -->
<div class="log center ">
<div class="log_left">
<div>log</div>
<div>首页</div>
</div>
<ul class="log_mid">
<li><a href="#">小米手机</a></li>
<li><a href="#">Redmi 红米</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>
<li><a href="#">社区</a></li>
</ul>
<div class="log_right">
<div><input type="text"></div>
<div><i class="iconfont icon-sousuo"></i></div>
</div>
</div>
<!-- 导航栏结束 -->
<!-- 商品图开始 -->
<div class="shangp center">
<div class="sp1">
<ul class="sp2">
<li class="shouji_fu">
<a href="#">手机 电话卡 <span>></span></a>
<div class="shouji">
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
<span>手 机</span>
</div>
</li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
</ul>
</div>
<div class="tu"></div>
</div>
<!-- 商品图片结束 -->
<!-- 长图部分开始 -->
<div class="changtu center">
<ul class="changtu_letf">
<li>
<a href="#">
<span><img src="./img/chang1-1.png" alt=""></span>
<span>小米秒杀</span>
</a>
</li>
<li>
<a href="#">
<span><img src="./img/chang1-2.png" alt=""></span>
<span>小米秒杀</span>
</a>
</li>
<li>
<a href="#">
<span><img src="./img/chang1-3.png" alt=""></span>
<span>小米秒杀</span>
</a>
</li>
<li>
<a href="#">
<span><img src="./img/chang1-4.png" alt=""></span>
<span>小米秒杀</span>
</a>
</li>
<li>
<a href="#">
<span><img src="./img/chang1-5.png" alt=""></span>
<span>小米秒杀</span>
</a>
</li>
<li>
<a href="#">
<span><img src="./img/chang1-6.png" alt=""></span>
<span>小米秒杀</span>
</a>
</li>
</ul>
<div><a href="#"><img src="./img/chang2.jpg" alt="" class="changdu"></a></div>
<div><a href="#"><img src="./img/chang3.jpg" alt="" class="changdu" </a></div>
<div><a href="#"><img src="./img/chang4.jpg" alt="" class="changdu"></a></div>
</div>
<!-- 长图部分结束 -->
</body>
</html>

19
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/css/clear.css Normal file
View File

@@ -0,0 +1,19 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
outline: none;
}

111
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/css/index.css Normal file
View File

@@ -0,0 +1,111 @@
/* 头部开始 */
/* 头部上部分开始 */
.header{
/* height: 80px; */
z-index: 99;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.header_top{
box-sizing: border-box;
height: 44px;
background-color: #d43d3d;
display: flex;
justify-content: space-between;
padding: 10px 30px;
}
.header_top_left img{
width: 25px;
height: 25px;
}
.header_top_mid img{
padding-right: 3px;
width: 83px;
height: 20px;
}
.header_top_mid i{
font-size: 15px;
color: #fff;
}
.header_top_right{
width:24px;
height: 24px;
}
.header_top_mid{
display: flex;
align-items: center;
}
/* 头部上部分结束 */
/* 头部下部分开始 */
.header_bottom{
height: 36px;
background-color: #f4f5f6;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.header_bottom i{
font-size: 30px;
color: #d43d3d;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
box-shadow: -2px 1px 5px #ccc;
}
.header_bottom ul{
padding-left: 15px;
display: flex;
justify-content: space-between;
overflow-x: scroll;
margin-right: 5px;
}
.header_bottom ul li{
flex-shrink: 0;
margin-right: 10px;
}
/* 头部下部分结束 */
/* 头部结束 */
.content{
margin-top: 85px;
}
.con_one img{
width: 113px;
height: 73px;
}
.con_one{
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
margin: 0 15px;
border-bottom: 1px solid #f4f4f4;
}
.con_one h5{
font-size: 20px;
}
.con_one p{
padding-top: 10px;
font-size: 12px;
color: #999;
zoom: .8;
}

0
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/css/pub.css Normal file
View File

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/img/message.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 918 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/img/qqqqq.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/img/searchg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

150
历届学生/逯帅帅/项目开发/学生项目/应越波/day3/今日头条/index.html Normal file
View File

@@ -0,0 +1,150 @@
<!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="http://at.alicdn.com/t/font_2390285_ubm853tlyii.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<div class="header_top">
<div class="header_top_left">
<img src="./img/message.png" alt="">
</div>
<div class="header_top_mid">
<img src="./img/logo.png" alt="">
<i class="iconfont icon-refresh"></i>
</div>
<img src="./img/searchg.png" class="header_top_right"></img>
</div>
<div class="header_bottom">
<ul>
<li>推荐1</li>
<li>推荐2</li>
<li>推荐3</li>
<li>推荐4</li>
<li>推荐5</li>
<li>推荐6</li>
<li>推荐7</li>
<li>推荐8</li>
<li>推荐9</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
</ul>
<i class="iconfont icon-jia"></i>
</div>
</div>
<!-- 头部结束 -->
<!-- 主体内容开始 -->
<div class="content">
<ul>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
<li class="con_one">
<div>
<h5>冰箱冻肉超过七天不能食用？</h5>
<p>新华网客户端 评论 382</p>
</div>
<img src="./img/qqqqq.jpg" alt="">
</li>
</ul>
</div>
<!-- 主体内容结束 -->
</body>
</html>

59
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/1.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/1.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<img src="./img/-e-返回.png" alt="">
<span>设置优惠券</span>
</div>
<!-- 头部结束 -->
<!-- 中间内容开始 -->
<ul class="content">
<li>
<span>优惠金额: ￥ </span>
<input type="text" value=" 请输入金额">
</li>
<li>
<span>使用条件：订单满 </span>
<input type="text" value=" 0.00">
<span>元，可使用1张优惠券</span>
</li>
<li>
<span>发放总数：</span>
<input type="text" value="请输入发送总量">
</li>
<li>
<span>每人限领：</span>
<input type="text" value="请输入限领总量">
</li>
<li>
<span>开始时间：</span>
<input type="text" value="使用优惠券的开始时间">
</li>
<li>
<span>结束时间：</span>
<input type="text" value="使用优惠券的结束时间">
</li>
</ul>
<!-- 中间内容结束 -->
<!-- 底部内容开始 -->
<div class="end">
确定添加
</div>
<!-- 底部内容结束 -->
</body>
</html>

70
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/2.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/2.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<img src="./img/-e-返回.png" alt="">
<span>编辑个人资料</span>
</div>
<!-- 头部结束 -->
<!-- 中间内容开始 -->
<ul class="content">
<li>
<p>头像</p>
<span class="tpuxduiqi">
<img src="./img/-e-头像拷贝.png" alt="">
<img src="./img/左.png" alt=""></span>
</li>
<li>
<p>昵称</p>
<span>
<span>小许</span>
<img src="./img/左.png" alt="">
</span>
</li>
<li>
<p>用户ID</p>
<span>
<span>11221122</span>
<img src="./img/左.png" alt="">
</span>
</li>
<li>
<p>性别</p>
<span>
<span>女</span>
<img src="./img/左.png" alt="">
</span>
</li>
<li>
<p>所在地</p>
<span>
<span>安徽 合肥市</span>
<img src="./img/左.png" alt="">
</span>
</li>
<li>
<p>个人介绍</p>
<span>
<span>填写个人资料更容易获得关注</span>
<img src="./img/左.png" alt="">
</span>
</li>
</ul>
<!-- 中间内容结束 -->
</body>
</html>

55
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/3.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/3.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<img src="./img/-e-返回.png" alt="">
<span>收入详情</span>
</div>
<!-- 头部结束 -->
<!-- 中间开始 -->
<div class="content">
<span>+￥399.00</span>
<ul>
<li>
<span>流水号</span>
<span>20181125015755</span>
</li>
<li>
<span>付款类型</span>
<span>充值</span>
</li>
<li>
<span>收支类型</span>
<span>充值</span>
</li>
<li>
<span>支付方式</span>
<span>微信钱包</span>
</li>
<li>
<span>创建时间</span>
<span>2018-11-25 21:03:03</span>
</li>
<li>
<span>备注</span>
<span>微信充值399.00元</span>
</li>
</ul>
</div>
<!-- 中间结束 -->
</body>
</html>

72
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/4.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/4.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header con_header1">
<img src="./img/-e-返回.png" alt="">
<span>商品列表</span>
</div>
<!-- 头部结束 -->
<!-- 中间内容开始 -->
<div class="content con_header1">
<!-- 搜索栏开始 -->
<div class="con_header2">
<img src="./img/搜索.png" alt="">
<input type="text" value=" &nbsp搜索">
</div>
<!-- 搜索栏结束 -->
<!-- 推荐内容开始 -->
<ul class="tuijian con_header2">
<li>最新</li>
<li>销量</li>
<li>价格
<img src="./img/上下.png" alt="">
</li>
<li>筛选
<img src="./img/筛选选中.png" alt="">
</li>
</ul>
<!-- 推荐内容结束 -->
<!-- 商品区域开始 -->
<ul class="shangping">
<li>
<img src="./img/-e-产品图.png" alt="">
<span>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</span>
<span>50积分</span>
</li>
<li>
<img src="./img/-e-产品图.png" alt="">
<span>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</span>
<span>50积分</span>
</li>
<li>
<img src="./img/-e-产品图.png" alt="">
<span>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</span>
<span>50积分</span>
</li>
<li>
<img src="./img/-e-产品图.png" alt="">
<span>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</span>
<span>50积分</span>
</li>
</ul>
<!-- 商品区域结束 -->
</div>
<!-- 中间内容结束 -->
</body>
</html>

33
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/5.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/5.css">
</head>
<body>
<!-- 头部区域开始 -->
<img src="./img/-e-返回.png" alt="" class="header">
<!-- 头部区域结束 -->
<!-- 中间内容开始 -->
<div class="content">
<span>登录</span>
<input type="text" value="请输入账号">
<input type="text" value="请输入密码">
<div>登录</div>
<div>
<span>忘记密码?</span>
<span>没有账号？<span class="zhuce">立即注册</span></span>
</div>
</div>
<!-- 中间内容结束 -->
</body>
</html>

87
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/css/1.css Normal file
View File

@@ -0,0 +1,87 @@
body{
background-color: #f1f1f1;
}
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
align-items: center;
margin: 1.013rem 0.8rem 0;
}
.header img{
width: 0.507rem;
height: 0.907rem;
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.907rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #333333;
margin: 0 auto;
}
.content{
margin-top: 3.067rem;
}
.content li{
height: 2.5rem;
line-height: 2.4rem;
background-color: #fff;
padding-left: 0.8rem;
}
.content li:nth-child(2),.content li:nth-child(4){
border-bottom: solid 0.507rem #f3f3f3;
}
.content li span{
font-family: PingFang-SC-Medium;
font-size: 0.747rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #333333;
}
.content li input{
font-family: PingFang-SC-Medium;
font-size: 0.747rem;
font-weight: normal;
letter-spacing: 0rem;
color: #999999;
}
.content li:nth-child(2) input{
width: 5%;
}
.end{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
width: 18.133rem;
height: 2.133rem;
background-color: #5697f4;
border-radius: 1.067rem;
font-family: PingFang-SC-Medium;
font-size: 0.907rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #eeeef3;
margin: 0 auto;
text-align: center;
line-height: 2.133rem;
}

68
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/css/2.css Normal file
View File

@@ -0,0 +1,68 @@
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
align-items: center;
margin: 0.88rem 0.88rem 0 0.693rem;
}
.header img{
width: 0.693rem;
height: 0.72rem;
margin-top: 0.507rem;
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.907rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #010101;
margin: 0 auto;
}
.content{
margin-top: 3.227rem;
}
.content li{
display: flex;
align-items: center;
justify-content: space-between;
height: 3.783rem;
border-top: solid 0.01rem #e9e9e9;
padding: 0 0.933rem 0 0.88rem;
}
.content li img{
width: 0.587rem;
height: 0.64rem;
}
.content li p{
font-family: PingFang-SC-Medium;
font-size: 0.853rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #000000;
}
.content li span span{
font-family: PingFang-SC-Medium;
font-size: 0.747rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #969696;
}
.tpuxduiqi{
display: flex;
align-items: center;
}
.tpuxduiqi img:first-child{
width: 1.707rem;
height: 1.707rem;
margin-right: 0.113rem;
}

69
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/css/3.css Normal file
View File

@@ -0,0 +1,69 @@
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
align-items: center;
margin: 0.96rem 0.96rem 0 0.8rem;
}
.header img{
width: 0.507rem;
height: 0.907rem;
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.907rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #000000;
margin: 0 auto;
}
.content{
margin-top: 4.773rem;
display: flex;
flex-direction: column;
}
.content>span{
margin: 0 auto 2.24rem;
font-family: PingFang-SC-Bold;
font-size: 1.387rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #010101;
}
.content ul li{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.973rem 0.8rem 0 0.773rem;
}
.content ul li span:first-child{
font-family: PingFang-SC-Medium;
font-size: 0.747rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #909090;
}
.content ul li span:last-child{
font-family: PingFang-SC-Medium;
font-size: 0.747rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #262626;
}
.content ul li:first-child{
border-top: solid 0.48rem #efeff4;
}
.content ul li:first-child span:last-child{
padding-right: 1.307rem;
}

107
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/css/4.css Normal file
View File

@@ -0,0 +1,107 @@
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
align-items: center;
margin-top: 0.96rem;
}
.header img{
width: 0.4rem;
height: 0.773rem;
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.907rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #333333;
margin: 0 auto;
}
.content{
margin-top: 3.5573rem;
}
.content>div{
display: flex;
align-items: center;
}
.content>div img{
width: 0.72rem;
height: 0.747rem;
}
.content>div input{
width: 100%;
font-family: PingFang-SC-Medium;
font-size: 0.64rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0.064rem;
color: #aaaaaa;
}
.tuijian{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.52rem;
}
.tuijian li:nth-child(3) img{
width: 0.4rem;
height: 0.507rem;
}
.tuijian li:nth-child(4) img{
width: 0.48rem;
height: 0.613rem;
}
.tuijian li{
font-family: PingFang-SC-Medium;
font-size: 0.64rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0.013rem;
color: #2b2b2b;
}
.tuijian li:first-child{
color: #ff7b41;
}
.shangping{
margin-top: 1.173rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.shangping li img{
width: 9.067rem;
height: 9.067rem;
}
.shangping li{
display: flex;
flex-direction: column;
width: 9.067rem;
height: 13.333rem;
}
.shangping li span:nth-child(2){
font-family: PingFang-SC-Medium;
font-size: 0.64rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #3f3f3f;
}
.shangping li span:nth-child(3){
font-family: PingFang-SC-Bold;
font-size: 0.747rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #ff7b41;
}

69
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/css/5.css Normal file
View File

@@ -0,0 +1,69 @@
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
width: 0.533rem;
height: 0.933rem;
margin: 0.8rem 0 0 0.56rem;
}
.content{
margin: 6.187rem 1.6rem 0;
display: flex;
flex-direction: column;
}
.content > span{
font-family: PingFang-SC-Medium;
font-size: 1.44rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0rem;
color: #000000;
margin-bottom: 2.14rem;
}
.content div:nth-child(4){
height: 2.613rem;
background-color: #5697f4;
border-radius: 1.307rem;
font-family: PingFang-SC-Medium;
font-size: 0.907rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0rem;
color: #ffffff;
line-height: 2.613rem;
text-align: center;
margin: 1.6rem 0 1.467rem 0;
}
.content div:nth-child(5){
font-family: PingFang-SC-Regular;
font-size: 0.747rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0rem;
color: #666666;
display: flex;
align-items: center;
justify-content: space-between;
}
.zhuce{
font-family: PingFang-SC-Regular;
font-size: 0.747rem;
font-weight: bold;
letter-spacing: 0rem;
color: #5697f4;
}
input{
font-family: PingFang-SC-Regular;
font-size: 0.96rem;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0rem;
color: #c7c7cc;
border-bottom: solid .1rem #e8e8e8;
height: 3.627rem;
}

22
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/css/clear.css Normal file
View File

@@ -0,0 +1,22 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
border:none;
outline:medium;
}

7
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/css/pub.css Normal file
View File

@@ -0,0 +1,7 @@
.con_header1{
margin:0 1.12rem;
}
.con_header2{
margin: 0 0.8rem;
}

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/-e-下.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/-e-产品图.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/-e-头像拷贝.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/-e-左.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/-e-返回.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/上下.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/左.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/搜索.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/psd/img/筛选选中.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

19
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/css/clear.css Normal file
View File

@@ -0,0 +1,19 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
outline: none;
}

197
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/css/index.css Normal file
View File

@@ -0,0 +1,197 @@
body {
height: 100rem;
}
.header {
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 6rem;
background-color: #0791c7;
padding: 0.6rem 1.1rem 1.1rem;
}
.header .header_top {
display: flex;
align-items: center;
}
.header .header_top .icon-dingwei:before {
content: "\e604";
color: #fff;
font-size: 1.1rem;
}
.header .header_top .hearer_top_2 {
color: #fff;
font-size: 1.2rem;
font-weight: 900;
}
.header .header_top .icon-choose:before {
content: "\e606";
color: #fff;
font-size: 0.5rem;
}
.header .header_bottom {
margin-top: 1rem;
height: 2.2rem;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.header .header_bottom i {
color: #ccc;
}
.header .header_bottom span {
color: #ccc;
font-size: 0.9rem;
padding-left: 0.2rem;
}
.cont_top {
margin-top: 6.5rem;
display: flex;
flex-wrap: wrap;
}
.cont_top li {
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
}
.cont_top img {
width: 3.2rem;
height: 3.2rem;
}
.pinzhi {
margin: 2rem 1.5rem 0;
display: flex;
justify-content: space-between;
background-color: #fcf7f7;
}
.pinzhi .pinzhi_left {
display: flex;
flex-direction: column;
}
.pinzhi .pinzhi_left span:first-child {
font-weight: 800;
}
.pinzhi .pinzhi_left span:nth-child(2) {
margin-top: 0.3rem;
font-weight: 800;
font-size: 0.8rem;
color: #ccc;
}
.pinzhi .pinzhi_left span:last-child {
margin-top: 0.5rem;
font-weight: 800;
font-size: 0.12rem;
color: #70ad36;
}
.pinzhi img {
width: 8rem;
height: 6rem;
}
.huangguan {
height: 2.5rem;
background-color: #dddd7a;
margin: 0.5rem 1rem 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0.2rem;
}
.huangguan .huangguan_left {
display: flex;
align-items: center;
}
.huangguan .icon-icon_huangguan:before {
padding-left: 0.5rem;
content: "\e61b";
color: yellow;
font-size: 1.3rem;
}
.huangguan .huangguan_left span:nth-child(2) {
padding-left: 0.3rem;
font-size: 0.9rem;
font-weight: 800;
color: #75753c;
}
.huangguan .huangguan_left span:nth-child(3) {
font-size: 0.12rem;
zoom: 0.8;
color: #75753c;
}
.huangguan .huangguan_right span:first-child {
font-size: 0.12rem;
zoom: 0.9;
color: #75753c;
}
.huangguan .huangguan_right span:last-child {
font-size: 0.12rem;
margin-left: 0.1rem;
padding-right: 0.4rem;
color: #75753c;
}
.cont_bottom {
margin-top: 1rem;
}
.cont_bottom .cont_tuijian {
display: flex;
justify-content: center;
}
.cont_bottom .cont_tuijian::after {
content: '——';
color: #c0bebe;
margin-left: 0.3rem;
}
.cont_bottom .cont_tuijian::before {
content: '——';
color: #c0bebe;
margin-right: 0.3rem;
}
.zonghe {
margin: 1rem 1rem 0;
display: flex;
justify-content: space-between;
}
.zonghe li {
display: flex;
justify-content: center;
}
.zonghe li span {
font-size: 0.9rem;
color: #888787;
}
.zonghe li i {
color: #888787;
}
.bottom {
background-color: #fff;
z-index: 999;
position: fixed;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
}
.bottom .bottom_a {
display: flex;
justify-content: space-around;
}
.bottom .bottom_a .bottom_b {
display: flex;
flex-direction: column;
align-items: center;
}
.bottom .bottom_a .bottom_b .icon-biaoqianA01_shouye-11:before {
content: "\ea94";
color: #ccc;
}
.bottom .bottom_a .bottom_b span {
color: #ccc;
}
.bottom .bottom_a .bottom_c .icon-biaoqianA01_shouye-11:before {
color: blue;
}
.bottom .bottom_a .bottom_c span {
color: blue;
}

224
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/css/index.less Normal file
View File

@@ -0,0 +1,224 @@
body{
height: 100rem;
}
// 头部开始
.header{
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 6rem;
background-color: rgb(7, 145, 199);
padding: .6rem 1.1rem 1.1rem;
.header_top{
display: flex;
align-items: center;
.icon-dingwei:before {
content: "\e604";
color: #fff;
font-size: 1.1rem;
}
.hearer_top_2{
color: #fff;
font-size: 1.2rem;
font-weight: 900;
}
.icon-choose:before {
content: "\e606";
color: #fff;
font-size: 0.5rem;
}
}
.header_bottom{
margin-top: 1rem;
height: 2.2rem;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
i{
color: #ccc;
}
span{
color: #ccc;
font-size: .9rem;
padding-left: .2rem;
}
}
}
// 头部结束
// 中间内容开始
// 中间内容上方区域开始
.cont_top{
margin-top: 6.5rem;
display: flex;
flex-wrap: wrap;
li{
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
}
img{
width: 3.2rem;
height: 3.2rem;
}
}
// 中间内容上方区域结束
// 中间内容品质套餐开始
.pinzhi{
margin: 2rem 1.5rem 0;
display: flex;
justify-content: space-between;
background-color: rgb(252, 247, 247);
.pinzhi_left{
display: flex;
flex-direction: column;
}
.pinzhi_left span:first-child{
font-weight: 800;
}
.pinzhi_left span:nth-child(2){
margin-top: .3rem;
font-weight: 800;
font-size: .8rem;
color: #ccc;
}
.pinzhi_left span:last-child{
margin-top: .5rem;
font-weight: 800;
font-size: .12rem;
color: rgb(112, 173, 54);
}
img{
width: 8rem;
height: 6rem;
}
}
// 中间内容品质套餐结束
// 中间内容超级会员开始
.huangguan{
height: 2.5rem;
background-color: rgb(221, 221, 122);
margin: .5rem 1rem 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: .2rem;
.huangguan_left{
display: flex;
align-items: center;
}
.icon-icon_huangguan:before {
padding-left: .5rem;
content: "\e61b";
color: yellow;
font-size: 1.3rem;
}
.huangguan_left span:nth-child(2){
padding-left: .3rem;
font-size: .9rem;
font-weight: 800;
color: rgb(117, 117, 60);
}
.huangguan_left span:nth-child(3){
font-size: .12rem;
zoom: .8;
color: rgb(117, 117, 60);
}
.huangguan_right span:first-child{
font-size: .12rem;
zoom: .9;
color: rgb(117, 117, 60);
}
.huangguan_right span:last-child{
font-size: .12rem;
margin-left: .1rem;
padding-right: .4rem;
color: rgb(117, 117, 60);
}
}
// 中间内容超级会员结束
// 中间内容下方区域开始
.cont_bottom{
margin-top: 1rem;
.cont_tuijian{
display: flex;
justify-content: center;
}
.cont_tuijian::after{
content: '——';
color: rgb(192, 190, 190);
margin-left: .3rem;
}
.cont_tuijian::before{
content: '——';
color: rgb(192, 190, 190);
margin-right: .3rem;
}
}
.zonghe{
margin: 1rem 1rem 0;
display: flex;
justify-content: space-between;
li {
display: flex;
justify-content: center;
span{
font-size: .9rem;
color: rgb(136, 135, 135);
}
i{
color: rgb(136, 135, 135);
}
}
}
// 中间内容下方区域结束
// 中间内容结束
// 底部开始
.bottom{
background-color: #fff;
z-index: 999;
position: fixed;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.bottom_a{
display: flex;
justify-content: space-around;
.bottom_b{
display: flex;
flex-direction: column;
align-items: center;
.icon-biaoqianA01_shouye-11:before {
content: "\ea94";
color: #ccc;
}
span{
color: #ccc;
}
}
.bottom_c{
.icon-biaoqianA01_shouye-11:before {
color: blue;
}
span{
color: blue;
}
}
}
}
// 底部结束

121
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/css/pub.css Normal file
View File

@@ -0,0 +1,121 @@
.zhonxia {
margin: 1.65rem 1rem 0;
}
.zhonxia .zhonxia_zhon {
display: flex;
margin-top: 0.3rem;
border-bottom: 0.1rem solid rgba(136, 135, 135, 0.2);
}
.zhonxia .zhonxia_zhon .zhon_xin_a {
margin-left: 0.5rem;
width: calc(100% - 4rem);
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_xin_b {
display: flex;
justify-content: space-between;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_xin_b i {
margin-right: 1rem;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_xin_b .zho_p {
font-size: 0.8rem;
font-weight: 900;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_xin_b .zho_p span {
font-size: 0.12rem;
zoom: 0.9;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_xin_b p span {
border-radius: 0.3rem;
padding: 0.2rem;
margin-right: 0.2rem;
background-color: yellow;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_k {
margin-top: 0.7rem;
display: flex;
align-items: center;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_k img {
width: 4rem;
height: 0.7rem;
padding-right: 0.5rem;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .zho_k span {
font-size: 0.12rem;
color: #888787;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .qishong {
margin-right: 1rem;
margin-top: 0.8rem;
display: flex;
justify-content: space-between;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .qishong span {
font-size: 0.12rem;
color: #888787;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .qitakuaican {
display: flex;
margin-top: 0.6rem;
font-size: 0.12rem;
margin-bottom: 1rem;
zoom: 0.9;
color: #888787;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .manjian {
display: flex;
justify-content: space-between;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .manjian .manjian_a {
display: flex;
width: 60%;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .manjian .manjian_a .man {
border-radius: 0.2rem;
width: 1rem;
background-color: #ee7b7b;
color: #fff;
font-size: 0.12rem;
padding: 0 0.1rem;
text-align: center;
margin-right: 0.2rem;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .manjian .manjian_a .man_2 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.12rem;
zoom: 0.9;
color: #888787;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .manjian .manjian_b {
display: flex;
font-size: 0.12rem;
align-items: center;
margin-right: 1rem;
color: #888787;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .manjian .manjian_b i {
font-size: 0.12rem;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .tejiashangp {
margin-top: 0.4rem;
display: flex;
font-size: 0.12rem;
zoom: 0.9;
color: #888787;
margin-bottom: 0.5rem;
}
.zhonxia .zhonxia_zhon .zhon_xin_a .tejiashangp span:first-child {
margin-right: 0.4rem;
border-radius: 0.2rem;
text-align: center;
width: 1rem;
background-color: orange;
color: #fff;
}
.zhonxia .zhonxia_zhon > img {
width: 4.5rem;
height: 4.5rem;
}

142
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/css/pub.less Normal file
View File

@@ -0,0 +1,142 @@
.zhonxia{
margin: 1.65rem 1rem 0;
.zhonxia_zhon {
display: flex;
margin-top: .3rem;
border-bottom: .1rem solid rgba(136, 135, 135,.2);
.zhon_xin_a{
margin-left: .5rem;
// 重点代码，计算宽度
width: calc(100% - 4rem);
.zho_xin_b{
display: flex;
justify-content: space-between;
i{
margin-right: 1rem;
}
.zho_p{
font-size: .8rem;
font-weight: 900;
}
.zho_p span{
font-size: .12rem;
zoom: .9;
}
}
.zho_xin_b p span{
border-radius: .3rem;
padding: .2rem;
margin-right: .2rem;
background-color: yellow;
}
.zho_k{
margin-top: .7rem;
display: flex;
align-items: center;
}
.zho_k img{
width: 4rem;
height: .7rem;
padding-right: .5rem;
}
.zho_k span{
font-size: .12rem;
color: rgb(136, 135, 135);
}
.qishong{
margin-right: 1rem;
margin-top: .8rem;
display: flex;
justify-content: space-between;
}
.qishong span{
font-size: .12rem;
color: rgb(136, 135, 135);
}
.qitakuaican{
display: flex;
margin-top: .6rem;
font-size: .12rem;
margin-bottom: 1rem;
zoom: .9;
color: rgb(136, 135, 135);
}
.manjian{
display: flex;
justify-content: space-between;
.manjian_a{
display: flex;
width: 60%;
.man{
border-radius: .2rem;
text-align: center;
width: 1rem;
background-color: rgb(238, 123, 123);
color: #fff;
font-size: .12rem;
padding: 0 .1rem;
text-align: center;
margin-right: .2rem;
}
.man_2{
// 下面三行代码实现单行文本省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: .12rem;
zoom: .9;
color: rgb(136, 135, 135);
}
}
.manjian_b{
display: flex;
font-size: .12rem;
align-items: center;
margin-right: 1rem;
color: rgb(136, 135, 135);
}
.manjian_b i{
font-size: .12rem;
}
}
.tejiashangp{
margin-top: .4rem;
display: flex;
font-size: .12rem;
zoom: .9;
color: rgb(136, 135, 135);
margin-bottom: .5rem;
}
.tejiashangp span:first-child{
margin-right: .4rem;
border-radius: .2rem;
text-align: center;
width: 1rem;
background-color: orange;
color: #fff;
}
}
}
.zhonxia_zhon>img{
width: 4.5rem;
height: 4.5rem;
}
}

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/img/111.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/img/1112.JPEG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 603 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/img/icons.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

1
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/img/zan.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="60" height="10" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="a"><stop stop-color="#FFDE00" offset="0%"/><stop stop-color="#FFB000" offset="100%"/></linearGradient></defs><path d="M54.017 8.072l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L53.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm-48 0L3.465 9.633c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L5.63.589c.213-.515.557-.523.774 0L7.55 3.352l2.982.237c.556.044.67.368.24.736L8.497 6.269l.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L17.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L29.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L41.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56z" fill="url(#a)" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

424
历届学生/逯帅帅/项目开发/学生项目/应越波/day4/饿了么/index.html Normal file
View File

@@ -0,0 +1,424 @@
<!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="http://at.alicdn.com/t/font_2390285_977y3vv83ek.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<div class="header_top">
<i class="iconfont icon-dingwei"></i>
<span class="hearer_top_2">信地.城市广场</span>
<i class="iconfont icon-choose"></i>
</div>
<div class="header_bottom">
<i class="iconfont icon-sousuo"></i>
<span>搜索饿了么商家，商品名称</span>
</div>
</div>
<!-- 头部结束 -->
<!-- 中间内容开始 -->
<!-- 中间内容上方区域开始 -->
<ul class="cont_top">
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
<li>
<img src="./img/icons.jpeg" alt="">
<span>美食</span>
</li>
</ul>
<!-- 中间内容上方区域结束 -->
<!-- 中间内容品质套餐开始 -->
<div class="pinzhi">
<div class="pinzhi_left">
<span>品质套餐</span>
<span>搭配齐全吃的好</span>
<span>立即抢购 ></span>
</div>
<img src="./img/111.png" alt="">
</div>
<!-- 中间内容品质套餐结束 -->
<!-- 中间内容超级会员开始 -->
<div class="huangguan">
<div class="huangguan_left">
<i class="iconfont icon-icon_huangguan"></i>
<span>超级会员.</span>
<span>已经为我节省一百万元</span>
</div>
<div class="huangguan_right">
<span>下单即可获得奖励金</span>
<span>></span>
</div>
</div>
<!-- 中间内容超级会员结束 -->
<!-- 中间内容下方区域开始 -->
<div class="cont_bottom">
<div>
<span class="cont_tuijian">推荐商家</span>
</div>
<ul class="zonghe">
<li>
<span>综合排序</span>
<i class="iconfont icon-choose"></i>
</li>
<li>
<span>综合排序</span>
</li>
<li>
<span>综合排序</span>
</li>
<li>
<span>综合排序</span>
<i class="iconfont icon-choose"></i>
</li>
</ul>
<ul class="zhonxia">
<li class="zhonxia_zhon">
<img src="./img/1112.JPEG" alt="">
<div class="zhon_xin_a">
<div class="zho_xin_b">
<p class="zho_p"><span>品牌</span> 正新鸡排(信地城市广场店)</p>
<i class="iconfont icon-choose"></i>
</div>
<div class="zho_k">
<img src="./img/zan.svg" alt="">
<span>4.4 月售293单</span>
</div>
<div class="qishong">
<span>¥20起送 | 夜间配送5¥</span>
<span>69m | 31分钟</span>
</div>
<span class="qitakuaican">其他快餐</span>
<div class="manjian">
<div class="manjian_a">
<span class="man">满</span>
<span class="man_2">满40减30,满40减30满40减30,满40减30满40减30,满40减30满40减30,满40减30</span>
</div>
<div class="manjian_b">
<span>3个活动</span>
<i class="iconfont icon-choose"></i>
</div>
</div>
<div class="tejiashangp">
<span>特</span>
<span>特价商品0.9元起</span>
</div>
</div>
</li>
<li class="zhonxia_zhon">
<img src="./img/1112.JPEG" alt="">
<div class="zhon_xin_a">
<div class="zho_xin_b">
<p class="zho_p"><span>品牌</span> 正新鸡排(信地城市广场店)</p>
<i class="iconfont icon-choose"></i>
</div>
<div class="zho_k">
<img src="./img/zan.svg" alt="">
<span>4.4 月售293单</span>
</div>
<div class="qishong">
<span>¥20起送 | 夜间配送5¥</span>
<span>69m | 31分钟</span>
</div>
<span class="qitakuaican">其他快餐</span>
<div class="manjian">
<div class="manjian_a">
<span class="man">满</span>
<span class="man_2">满40减30,满40减30满40减30,满40减30满40减30,满40减30满40减30,满40减30</span>
</div>
<div class="manjian_b">
<span>3个活动</span>
<i class="iconfont icon-choose"></i>
</div>
</div>
<div class="tejiashangp">
<span>特</span>
<span>特价商品0.9元起</span>
</div>
</div>
</li>
<li class="zhonxia_zhon">
<img src="./img/1112.JPEG" alt="">
<div class="zhon_xin_a">
<div class="zho_xin_b">
<p class="zho_p"><span>品牌</span> 正新鸡排(信地城市广场店)</p>
<i class="iconfont icon-choose"></i>
</div>
<div class="zho_k">
<img src="./img/zan.svg" alt="">
<span>4.4 月售293单</span>
</div>
<div class="qishong">
<span>¥20起送 | 夜间配送5¥</span>
<span>69m | 31分钟</span>
</div>
<span class="qitakuaican">其他快餐</span>
<div class="manjian">
<div class="manjian_a">
<span class="man">满</span>
<span class="man_2">满40减30,满40减30满40减30,满40减30满40减30,满40减30满40减30,满40减30</span>
</div>
<div class="manjian_b">
<span>3个活动</span>
<i class="iconfont icon-choose"></i>
</div>
</div>
<div class="tejiashangp">
<span>特</span>
<span>特价商品0.9元起</span>
</div>
</div>
</li>
<li class="zhonxia_zhon">
<img src="./img/1112.JPEG" alt="">
<div class="zhon_xin_a">
<div class="zho_xin_b">
<p class="zho_p"><span>品牌</span> 正新鸡排(信地城市广场店)</p>
<i class="iconfont icon-choose"></i>
</div>
<div class="zho_k">
<img src="./img/zan.svg" alt="">
<span>4.4 月售293单</span>
</div>
<div class="qishong">
<span>¥20起送 | 夜间配送5¥</span>
<span>69m | 31分钟</span>
</div>
<span class="qitakuaican">其他快餐</span>
<div class="manjian">
<div class="manjian_a">
<span class="man">满</span>
<span class="man_2">满40减30,满40减30满40减30,满40减30满40减30,满40减30满40减30,满40减30</span>
</div>
<div class="manjian_b">
<span>3个活动</span>
<i class="iconfont icon-choose"></i>
</div>
</div>
<div class="tejiashangp">
<span>特</span>
<span>特价商品0.9元起</span>
</div>
</div>
</li>
<li class="zhonxia_zhon">
<img src="./img/1112.JPEG" alt="">
<div class="zhon_xin_a">
<div class="zho_xin_b">
<p class="zho_p"><span>品牌</span> 正新鸡排(信地城市广场店)</p>
<i class="iconfont icon-choose"></i>
</div>
<div class="zho_k">
<img src="./img/zan.svg" alt="">
<span>4.4 月售293单</span>
</div>
<div class="qishong">
<span>¥20起送 | 夜间配送5¥</span>
<span>69m | 31分钟</span>
</div>
<span class="qitakuaican">其他快餐</span>
<div class="manjian">
<div class="manjian_a">
<span class="man">满</span>
<span class="man_2">满40减30,满40减30满40减30,满40减30满40减30,满40减30满40减30,满40减30</span>
</div>
<div class="manjian_b">
<span>3个活动</span>
<i class="iconfont icon-choose"></i>
</div>
</div>
<div class="tejiashangp">
<span>特</span>
<span>特价商品0.9元起</span>
</div>
</div>
</li>
<li class="zhonxia_zhon">
<img src="./img/1112.JPEG" alt="">
<div class="zhon_xin_a">
<div class="zho_xin_b">
<p class="zho_p"><span>品牌</span> 正新鸡排(信地城市广场店)</p>
<i class="iconfont icon-choose"></i>
</div>
<div class="zho_k">
<img src="./img/zan.svg" alt="">
<span>4.4 月售293单</span>
</div>
<div class="qishong">
<span>¥20起送 | 夜间配送5¥</span>
<span>69m | 31分钟</span>
</div>
<span class="qitakuaican">其他快餐</span>
<div class="manjian">
<div class="manjian_a">
<span class="man">满</span>
<span class="man_2">满40减30,满40减30满40减30,满40减30满40减30,满40减30满40减30,满40减30</span>
</div>
<div class="manjian_b">
<span>3个活动</span>
<i class="iconfont icon-choose"></i>
</div>
</div>
<div class="tejiashangp">
<span>特</span>
<span>特价商品0.9元起</span>
</div>
</div>
</li>
<li class="zhonxia_zhon">
<img src="./img/1112.JPEG" alt="">
<div class="zhon_xin_a">
<div class="zho_xin_b">
<p class="zho_p"><span>品牌</span> 正新鸡排(信地城市广场店)</p>
<i class="iconfont icon-choose"></i>
</div>
<div class="zho_k">
<img src="./img/zan.svg" alt="">
<span>4.4 月售293单</span>
</div>
<div class="qishong">
<span>¥20起送 | 夜间配送5¥</span>
<span>69m | 31分钟</span>
</div>
<span class="qitakuaican">其他快餐</span>
<div class="manjian">
<div class="manjian_a">
<span class="man">满</span>
<span class="man_2">满40减30,满40减30满40减30,满40减30满40减30,满40减30满40减30,满40减30</span>
</div>
<div class="manjian_b">
<span>3个活动</span>
<i class="iconfont icon-choose"></i>
</div>
</div>
<div class="tejiashangp">
<span>特</span>
<span>特价商品0.9元起</span>
</div>
</div>
</li>
</ul>
</div>
<!-- 中间内容下方区域结束 -->
<!-- 中间内容结束 -->
<!-- 底部开始 -->
<div class="bottom">
<ul class="bottom_a">
<li class="bottom_b bottom_c">
<i class="iconfont icon-biaoqianA01_shouye-11"></i>
<span>首页</span>
</li>
<li class="bottom_b">
<i class="iconfont icon-biaoqianA01_shouye-11"></i>
<span>首页</span>
</li>
<li class="bottom_b">
<i class="iconfont icon-biaoqianA01_shouye-11"></i>
<span>首页</span>
</li>
<li class="bottom_b">
<i class="iconfont icon-biaoqianA01_shouye-11"></i>
<span>首页</span>
</li>
</ul>
</div>
<!-- 底部结束 -->
</body>
</html>

65
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/tab栏切换基础版本.html Normal file
View File

@@ -0,0 +1,65 @@
<!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>
.a{
display: flex;
align-items: center;
justify-content: space-around;
}
.color{
color: red;
}
.b li{
display: none;
}
.show{
display: inline-block !important;
}
</style>
</head>
<body>
<div>
<ul class="a">
<li class="color">推荐</li>
<li>游戏</li>
<li>新闻</li>
</ul>
<ul class="b">
<li class="show">推荐内容</li>
<li>游戏内容</li>
<li>新闻内容</li>
</ul>
</div>
<script>
// 1.先获取值
let x=document.querySelectorAll('.a li');
let y=document.querySelectorAll('.b li');
// 2.遍历x
x.forEach((item,index)=>{
//为x添加点击事件
item.onclick=()=>{
// 再次遍历一遍x，先把所有的classname给清掉
x.forEach((i,j)=>{
// 把x上面的classname清除掉
i.className='';
// 把y上面的默认样式给清除掉
y[j].className='';
});
// 当我们点击谁时，就把颜色给谁
item.className='color';
// 这一步是重点，x我们已经遍历一遍了，可以直接拿到索引值，xd索引值和y的索引值一样，
// 可以做相关联操作，和上面一样，也需要先清除classname的默认值，谁点给谁加classname
y[index].className='show';
}
})
</script>
</body>
</html>

159
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/tab栏切换高级版本.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>
<style>
.a {
display: flex;
align-items: center;
justify-content: space-around;
}
.show_color {
color: red;
}
.b li {
display: none;
}
.show {
display: inline-block !important;
}
</style>
</head>
<body>
<div>
<ul class="a">
</ul>
<ul class="b">
</ul>
</div>
<script>
var arr = [
{
title: '推荐',
list: [
{
title: '推荐内容1',
time: '2021-3-6'
}, {
title: '推荐内容2',
time: '2021-3-6'
}, {
title: '推荐内容3',
time: '2021-3-6'
}
]
}, {
title: '游戏',
list: [
{
title: '游戏内容1',
time: '2021-3-6'
}, {
title: '游戏内容2',
time: '2021-3-6'
}, {
title: '游戏内容3',
time: '2021-3-6'
}
]
}, {
title: '电影',
list: [
{
title: '电影内容1',
time: '2021-3-6'
}, {
title: '电影内容2',
time: '2021-3-6'
}, {
title: '电影内容3',
time: '2021-3-6'
}
]
}
];
//渲染标题
// 1.获取值
let x=document.querySelector('.a');
let y=document.querySelector('.b');
// 用函数封装
function top1(){
// 2.遍历后端给的数据
arr.forEach(function(item,index){
// 3.使用模板字符串做拼接,用三目运算符做判断.把默认颜色给第一个.数组需要遍历,数组里面的对象可以通过.的方式调用
x.innerHTML+=`<li class='${index==0? 'show_color':''}'>${item.title}</li>`;
});
}
//渲染内容
// 函数封装
function con(){
// 再次遍历后端给的数组
arr.forEach(function(i,j){
// 使用模板字符串渲染进去内容页,中间内容在嵌套一层
y.innerHTML+=`<li class='${j==0? 'show':''}'>${
(i.list.map(function(a,b){
return `<p>${a.title}</p>`
})).join('')
}</li>`;
});
}
top1();
con();
let xx=document.querySelectorAll('.a li');
let yy=document.querySelectorAll('.b li');
xx.forEach(function(item,index){
item.onclick=function(){
xx.forEach(function(i,j){
i.className='';
yy[j].className='';
})
item.className='show_color';
yy[index].className='show';
}
});
// 思路:步骤一
// 1.获取标题的值
// 2.后端给的是数组,我们遍历一遍,又因为里面是对象,我们可以打点通过.title去获取到标题的值
// 3.使用模板字符串和innerHtml追加给我们获取到的标题的值,这样标题不在是空标签了,我们把值放进去了
// 步骤二
// 1.获取内容的值
// 2.我们再去遍历一遍后端给的数组,在使用模板字符串,里面还要在嵌套一层,还要循环一次:
// 第一次遍历是遍历整个数组,里面是对象,通过.list拿到内容,里面又是数组,我们还要循环遍历一遍,最终通过.title拿到内容
// 3.通过俩次遍历和打点我们拿到内容,此时追加给内容,注意不要追加错了,步骤一是追加给标题,步骤二是追加给内容
// 步骤三
// 1.分别获取标题和内容的值,此时的标题和内容不在是空的ul了,标题里面追加了li,内容里面追加了li,还嵌套了p,此时要用querySelectorAll
// 2.给标题注册点击事件,点那个标题就通过classname把值给谁,但在之前我们要先清除所有的标题里面的classname的值,先清除在通过点击事件给谁赋classname
// 3.这里有个骚操作,内容的索引和标题的索引其实是一一相对应的,querySelectorAll获取的是一个数组,(--内容数组[标题下标]--),
// 当我们通过点击事件点击第一个标题,拿到索引0,这个标题的索引0也对应这内容索引0,刚开始内容全部都是隐藏,拿到索引后,通过classname让其显示,当然刚开始要和上面一样全部清除classname值
</script>
</body>
</html>

77
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/搜索框搜索.html Normal file
View File

@@ -0,0 +1,77 @@
<!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>
<input type="text" placeholder="输入关键字">
<ul>
</ul>
<script>
// 思路:1.获取input和ul的值
// 2.给input创建input事件
// 3.遍历list数组,拿用户输入的值(input.value)和list里面的数组做对比,前提时是大于-1,要做个if选择判断
// 4.把符合判断条件的值使用push方法追加进新数组中保存
// 5.遍历新数组,i的值实际上就是用户输入的值和list数组里面的值匹配正确的值,使用模板字符串渲染进ul里面
// 6.但此时有很多bug,要先置空再渲染进ul里面
// 6.外面整体要加判断,用户输入的值使用trim()方法去除俩端空格,判断是否为0,不为0执行里面的代码,为0责清空
// 7.最复杂的来了,如何把字变红?
// 8.使用substr(起始位置,截取长度),此方法是截取特定长度的字符串
// 这里面的起始位置其实就是indexof()返回的索引值,截取长度就是用户输入的值的长度
// 9.生成新的样式,并使用模板字符串包裹一层span标签返回给新数组,里面使用行内样式变成红色
// 10.把生成新的样式替换进新数组中即可
var list = ['html', '学习html', '天气很好吗', '你很好吗', 'JS学习', '不想学习', 'css测试', '明天要测试了'];
// 获取input的值
let input = document.querySelector('input');
// 获取ul的值
let ul=document.querySelector('ul');
// 为获取到的值注册input事件
input.oninput=()=>{
// 创建一个新数组,放在input事件里面,每次都会初始化,符合我们的要求
let newArr=[];
// 如果用户输入的值去除俩端空格的长度不为0
if(input.value.trim().length!=0){
// 遍历list数组
list.forEach((item,index)=>{
// 判断索引值是否大于0，大于0就放进一个新数组里面，并追加进ul里面
if(item.indexOf(input.value)>-1){
//获取下标
let newIndex=item.indexOf(input.value);
// 获取截取长度
let length=input.value.length;
//生成新的样式
let newStar=`<span style="color: red">${item.substr(newIndex,length)}</span>`;
// 返回给新数组,保存并返回
newArr.push(item.replace(input.value, newStar));
}
});
// 先置空再保留
ul.innerHTML='';
// 遍历新数组
newArr.forEach((i,j)=>{
ul.innerHTML+=`<li>${i}</li>`;
})
}else{
ul.innerHTML='';
}
};
</script>
</body>
</html>

78
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/核心价值观动画.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>Document</title>
<style>
body,html{
height: 100%;
}
</style>
</head>
<body>
<script>
// 思路:1.给body设置高100%,但直接设置无效,给body设置高的同时也要给其父元素html设置高100%
// 2.我们不需要遍历数组,可以初始化一个索引,每次点击让其自加,函数里面有个event,里面详细记录了x和y轴
// 3.使用clearElement创建元素,在使用模板字符串添加内容,这里可以使用innerHtml添加元素,但有些许的不方便,然后使用appchild追加进body
// 4.设置一个定时器改变top值,使其向上动起来
// 5.再设置一个定时器使其消失
// 初始化一个值
let index=0;
// 创建数组
let arr=['富强','民主','文明','自由','平等','公正','法治','爱国','敬业','诚信','友善','和谐'];
// 获取body元素
let body=document.querySelector('body');
// 为其注册点击事件，函数里面有个event，里面详细介绍了许多东西，其中就有鼠标点击的时候的x和y的坐标
body.onclick=(event)=>{
// 点击时，获取x，y坐标
var x=event.x,
y=event.y;
// 三目运算符做判断，初始化的值大于数组个数时为0
index>arr.length-1?index=0:'';
// 创建span标签
var span=document.createElement('span');
// 把数组放进去
span.innerHTML=arr[index];
// 添加样式
span.style=`
position: fixed;
opacity: 1;
top:${y}px;
left:${x}px;
color: hsl(${parseInt(Math.random() * 360)},100%,50%);
transition: all .3s;`;
// 把创建好且添加了样式的span标签追加近body页面中
body.appendChild(span);
// 函数，放在外面，使其执行更快，放在里面不能立即执行
animation(span, y);
// 自加
++index;
};
function animation(span,y) {
// 设置定时器，点击的时候y轴移动并且变透明
setTimeout(function(){
span.style.top=`${y-100}px`;
span.style.opacity=0;
},100);
// 设置定时器，一定时间删除
setTimeout(function(){
body.removeChild(span);
},400);
}
</script>
</body>
</html>

182
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/page/index.css Normal file
View File

@@ -0,0 +1,182 @@
/* 头部开始 */
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding-top: .6rem;
padding-bottom: .6rem;
background-color: #fff;
}
.header a{
display: flex;
align-items: center;
}
.icon-touxiang:before {
content: "\e640";
font-size: 1.5rem;
color: #ccc;
}
.header div{
width: 85%;
height: 1.8rem;
padding-left: .95rem;
margin-left: .5rem;
background: #f1f1f4;
border-radius: 1.5rem;
font-size: .75rem;
line-height: 1.8rem;
color: #ccc;
}
/* 头部结束 */
/* 中间内容开始 */
.content{
margin-top: 2.9rem;
}
.jiu{
margin-top: .6rem;
}
.jiu ul li img{
width: 3rem;
height: 3rem;
}
.jiu ul li span{
padding-top: .3rem;
font-size: .6rem;
color: #666;
}
.jiu_ul{
display: flex;
flex-wrap: wrap;
}
.jiu_ul li{
width: 20%;
}
.jiu_ul li a{
display: flex;
flex-direction: column;
align-items: center;
}
.sancan{
margin-top: 2rem;
}
.sancan>span,.dajia>span{
font-size: 1rem;
font-weight: 600;
color: #999;
line-height: 1.1rem;
margin-bottom: 5rem;
}
.sancan ul:nth-child(2){
display: flex;
margin-bottom: .5rem;
}
/* --------------------------------------- */
/* ----------------------------------------------- */
.sancan_ul li,.dajia_ul li{
margin-top: .6rem;
position: relative;
font-size: .9rem;
margin-right: 1.5rem;
color: #666;
padding-bottom: .25rem;
display: flex;
align-items: flex-end;
}
.three_meals_item img{
width: 10rem;
height: 13.5rem;
border-radius: 0.7rem;
}
.tuijian{
margin-top: 2rem;
}
.tuijian>span{
font-size: 1.5rem;
font-weight: 600;
color: #333;
}
.tuijian_title{
display: flex;
flex-wrap: wrap;
}
.tuijian_title li{
box-shadow: 0px 0px 0.6rem rgb(0 0 0 / 10%);
background: #fff;
border-radius: 1.05rem;
align-items: center;
justify-content: center;
height: 2rem;
display: flex;
flex: 20%;
margin:.6rem;
}
.tuijian_title li span{
font-size: .6rem;
color: #333;
font-weight: 600;
}
.tuijian_title img{
width: .9rem;
height: .9rem;
}
/* 中间内容结束 */
/* 底部内容开始 */
.flood{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background-color: #fff;
}
.flood img{
width: 1.5rem;
height: 1.5rem;
}
.flood p{
font-size: .6rem;
}
.flood ul{
display: flex;
align-items: center;
justify-content: space-around;
}
.flood ul li{
display: flex;
flex-direction: column;
}
/* 底部内容结束 */

36
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/page/search.css Normal file
View File

@@ -0,0 +1,36 @@
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #f5f5f5;
padding-top: .5rem;
padding-bottom: .5rem;
background-color: #fff;
}
.header input{
width: 65%;
background: #eee;
color: gray;
}
.tiao{
width: 3rem;
height: 1.8rem;
background: #ff4c39;
border-radius: .1rem;
text-align: center;
line-height: 1.8rem;
color: #fff;
}
.content{
margin-top: 3.2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

0
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/page/type.css Normal file
View File

56
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/page/video.css Normal file
View File

@@ -0,0 +1,56 @@
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
border-bottom: 1px solid #f5f5f5;
align-items: center;
background-color: #fff;
}
.icon-sousuo:before {
font-size: 1.5rem;
}
.icon-jiantouarrowhead7:before{
font-style: 1rem;
}
.header>a{
font-size: 1rem;
color: #333;
}
.caipu{
font-size: 1.3rem;
color: #000;
font-weight: 600;
}
.content{
margin-top: 2.8rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.content a{
width: 48%;
}
.tuitupian{
position: relative;
}
.icon-shipin:before {
color: #333;
font-size: 1.5rem;
content: "\e610";
position: absolute;
top: .5rem;
right: .5rem;
}
.tuitupian span:nth-child(3){
width: 100%;
background-color: #fff;
color: black;
}

38
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/page/voidInfo.css Normal file
View File

@@ -0,0 +1,38 @@
.header{
display: flex;
}
.header video{
position: relative;
width: 100%;
}
.header a{
margin: .5rem .8rem 0;
position: absolute;
height: 1.5rem;
background: rgba(0,0,0,0.5);
border-radius: .75rem;
color: #fff;
}
.header a:last-child{
right: 0;
}
.content h2{
margin-top: .5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.content p{
font-size: 0.7rem;
color: #757575;
}

14
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/tool/clear.css Normal file
View File

@@ -0,0 +1,14 @@
body,ul,li,h1,h2,h3,h4,h5,h6,p {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
}

146
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/tool/public.css Normal file
View File

@@ -0,0 +1,146 @@
.comm{
padding-left: .4rem;
padding-right: .4rem;
}
.comms{
padding-left: .8rem;
padding-right: .8rem;
}
/* ----------------------------------------- */
.three_meals_item{
width: 100%;
}
.text{
font-size: .6rem !important;
color: #333;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.desc{
margin-top: .3rem;
font-size: .55rem;
color: #ff8d8d;
line-height: .7rem;
background: #fff2f2;
border-radius: .1rem;
padding: .2rem .3rem;
}
.three_meals_list {
display: flex;
justify-content: space-around;
}
.three_meals_item{
width: 10rem;
}
.three_meals_item img{
width: 10rem;
height: 13.5rem;
border-radius: 0.7rem;
}
/* -------------------------------------------- */
/* --------------------------------------------------- */
.tuitupian{
width: 9.5rem;
display: flex;
flex-direction: column;
margin-top: .5rem;
}
.tuitupian span:nth-child(2){
margin-top: .3rem;
font-size: .9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-weight: 600;
}
.tuitupian span:nth-child(3){
margin-top: .3rem;
width: 10%;
padding: 0 .15rem;
background: #ff8d8d;
color: #fff;
font-size: .4rem;
}
.tuitupian span:nth-child(4){
margin-top: .3rem;
font-size: .55rem;
color: #ff8d8d;
line-height: .7rem;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
background: #fff2f2;
border-radius: .1rem;
padding: .2rem .3rem;
}
.tuitupian img{
width: 100%;
border-radius: .5rem;
}
.yonghu{
margin-top: .3rem;
display: flex;
justify-content: space-between;
}
.yonghu img{
width: .9rem;
height: .9rem;
}
.yonghu div span{
font-size: .5rem !important;
color: #666 !important;
}
.distupian{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* ------------------------------------------------------- */
/* 每日三餐激活样式 */
.activesan,.dajia_actives{
font-size: 1.4rem !important;
color: #333 !important;
}
.activesan::after,.dajia_actives::after{
content: '';
height: .3rem;
border-radius: .15rem;
width: 100%;
left: 0px;
bottom: .15rem;
background: #ff9d9b;
position: absolute;
z-index: 50;
display: block;
}
/* 为你推荐激活样式 */
.tui_actives{
background: #fe9b95 !important;
box-shadow: 0px 0px 0.6rem rgb(255 155 149 / 50%) !important;
}
.tui_actives span{
color: #fff !important;
}
/* 首页底部激活样式 */
.flood .floot_active{
color: #f15a4f;
}

59
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/utils/swiper.css Normal file
View File

@@ -0,0 +1,59 @@
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.swiper,
.swiper_list {
overflow: hidden;
position: relative;
}
.swiper-wrapper,
.wrapper_list {
display: flex;
}
.swiper-wrapper li,
.wrapper_list li {
flex-shrink: 0;
width: 100%;
}
.swiper-wrapper img,
.wrapper_list img {
width: 100%;
height: 100%;
}
.swiper-button {
position: absolute;
top: 50%;
color: #fff;
font-size: 23px;
padding: 5px 5px;
background: #00000075;
transform: translateY(-50%);
}
.prev {
left: 0;
}
.next {
right: 0;
}
.swiper-pagination,
.pagination {
display: flex;
position: absolute;
left: 50%;
bottom: 16px;
transform: translate(-50%);
}
.swiper-pagination li,
.pagination li {
width: 8px;
height: 8px;
border-radius: 100%;
background: #CCC;
margin-right: 5px;
}
.swiper-pagination .active,
.pagination .active {
background: #007aff !important;
}

70
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/css/utils/toast.css Normal file
View File

@@ -0,0 +1,70 @@
.lb-toast {
padding: 8px 12px;
position: fixed;
left: 50%;
transform: translate(-50%);
background-color: rgba(0, 0, 0, 0.7);
border-radius: 8px;
z-index: 99999;
}
.lb-toast_text {
color: #fff;
font-size: 14px;
line-height: 20px;
}
.spinner {
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.spinner > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/fabu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/gywm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 518 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/home1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/jifen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/like.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/like1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/likebeijing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/menu1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/ms.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/t_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 912 B

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/t_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/t_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/t_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/t_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/t_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/img/touxiang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

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