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

9
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/css/clear.css Normal file
View File

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

251
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/css/demos.css Normal file
View File

@@ -0,0 +1,251 @@
.search {
width: 630px;
height: 87px;
margin: 40px auto;
}
.search .tabs{
display: flex;
padding-left: 18px;
}
.search .tabs li{
color: #F40;
text-align: center;
width: 36px;
height: 22px;
line-height: 22px;
margin-right: 4px;
cursor: pointer;
font-size: 12px;
}
.tabs_active {
background: linear-gradient(to right,#ff9000 0,#ff5000 100%);
color: #fff !important;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.search .search_input{
display: flex;
height: 40px;
}
.input_left {
width: 556px;
border: 2px solid #ff5000;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
overflow: hidden;
border-right: none;
}
.input_left i {
position: absolute;
top: 25%;
color: #666;
font-size: 16px;
}
.icon-xinbaniconshangchuan- {
left: 15px;
}
.icon-xiangji {
right: 15px;
}
.input_left input {
width: 100%;
height: 100%;
box-sizing: border-box;
border: none;
outline: none;
padding-left: 5px;
padding-right: 60px;
}
input::-webkit-input-placeholder {
padding-left: 30px;
}
.input_right {
flex: 1;
background: linear-gradient(to right,#ff9000 0,#ff5000 100%);
color: #fff;
text-align: center;
line-height: 40px;
font-size: 18px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.search .search_key {
display: flex;
margin-top: 8px;
}
.search .search_key li{
font-size: 12px;
color: #3c3c3c;
margin-right: 5px;
}
.menu {
display: flex;
height: 30px;
align-items: center;
font-size: 16px;
color: #fff;
background: linear-gradient(to right,#ff9000 0,#ff5000 100%);
}
.menu li {
margin: 0 3px;
text-align: center;
padding: 0 4px;
position: relative;
cursor: pointer;
}
.line {
margin-left: 7px !important;
font-size: 14px !important;
}
.menu li:hover::before {
content: "";
position: absolute;
width: 27.5px;
height: 14px;
background: url("../tm.png");
background-size: cover;
top: -17px;
left: 50%;
/* left: calc(50% - 27.5px /2); */
transform: translateX(-50%);
}
.line:hover::before {
content: "";
background: none !important;
}
.userinfo {
width: 290px;
height: 520px;
}
.login {
background: url("../userback.png");
background-size: 290px 145px;
background-repeat: no-repeat;
background-position: 0 0;
height: 137px;
text-align: center;
padding-top: 5px;
font-size: 0;
}
.login img {
width: 50px;
height: 50px;
border-radius: 100%;
}
.login p {
font-size: 12px;
color: #3c3c3c;
margin-top: 4px;
margin-bottom: 3px;
}
.login {}
.login ul{
display: flex;
justify-content: center;
}
.login li{
background: #ffe4db;
display: flex;
padding-right: 10px;
border-radius: 9px;
margin-right: 8px;
}
.login li:last-child {
margin-right: 0 !important;
}
.login li .jb{
height: 16px;
width: 16px;
background: url("https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png");
background-size: 24px 597px;
background-position: 0 -572.5px;
margin-right: 3px;
}
.login li span{
font-size: 12px;
color: #ff5000;
}
.buttons {
display: flex;
justify-content: center;
margin-top: 9px;
}
.button {
font-size: 14px;
color: #fff;
text-align: center;
height: 25px;
line-height: 25px;
width: 75px;
border-radius: 4px;
background: linear-gradient(to right,#ff5000 0,#ff6f06 100%);
}
.login_button {
width: 92px !important;
}
.reg_button {
margin: 0 7px;
}
.gg {
width: 100%;
}
.news {
margin-top: 7px;
padding: 0 8px;
}
.news_title {
display: flex;
justify-content: space-around;
align-items: center;
height: 25px;
}
.news_title .item{
font-size: 12px;
color: #3C3C3C;
}
.news_content {
font-size: 12px;
color: #3c3c3c;
padding: 6px 5px;
}
.jgg {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
border-top: 1px solid #f4f4f4;
border-left: 1px solid #f4f4f4;
}
.jgg li{
text-align: center;
width: 25%;
border-right: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
box-sizing: border-box;
height: 75px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.jgg li .jlt{
width: 24px;
height: 24px;
background: url("https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png");
background-size: 24px 597px;
margin-bottom: 6px;
}
.jgg li:nth-child(1) .jlt{
background-position: 0 0;
}
.jgg li:nth-child(1) .jlt{
background-position: 0 -87px;
}
.jgg li p{
font-size: 12px;
color: #333;
}

147
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/demos.html Normal file
View File

@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2269051_355bxq2rftj.css">
<link rel="stylesheet" href="./css/demos.css">
</head>
<body>
<div class="search">
<ul class="tabs">
<li class="tabs_active">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<div class="search_input">
<div class="input_left">
<i class="iconfont icon-xinbaniconshangchuan-"></i>
<input type="text" placeholder="请输入关键字">
<i class="iconfont icon-xiangji"></i>
</div>
<div class="input_right">搜索</div>
</div>
<ul class="search_key">
<li>新款连衣裙</li>
<li>新款连衣裙</li>
<li>新款连衣裙</li>
<li>新款连衣裙</li>
<li>新款连衣裙</li>
<li>新款连衣裙</li>
<li>新款连衣裙</li>
</ul>
</div>
<ul class="menu">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
<li>司法拍卖</li>
<li class="line">|</li>
<li>司法拍卖</li>
</ul>
<div class="userinfo">
<div class="login">
<img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg" alt="">
<p>Hi! 你好</p>
<ul>
<li>
<div class="jb"></div>
<span>领淘金币抵钱</span>
</li>
<li>
<div class="jb"></div>
<span>领淘金币抵钱</span>
</li>
</ul>
<div class="buttons">
<div class="button login_button">登录</div>
<div class="button reg_button">注册</div>
<div class="button open_button">开店</div>
</div>
</div>
<img class="gg" src="https://img.alicdn.com/tfs/TB15R3vP7Y2gK0jSZFgXXc5OFXa-540-120.jpg" alt="">
<div class="news">
<div class="news_title">
<div class="item">公告</div>
<div class="item">规则</div>
<div class="item">安全</div>
<div class="item">论坛</div>
<div class="item">公益</div>
</div>
<div class="news_content">
关于开展打击网络“有偿删帖”和“软色情”专项的公告
</div>
</div>
<ul class="jgg">
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
<li>
<div class="jlt"></div>
<p>旅行</p>
</li>
</ul>
<div class="app">
<div class="title"></div>
<ul>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
</div>
</body>
</html>

62
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/index.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝首页</title>
<style>
body,h1,h2,h3,h4,h5,h6,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
margin-right: 10px;
}
.dropmenu {
display: none;
}
ul li:hover .dropmenu {
display: block;
}
.item:hover{
background: yellowgreen;
}
</style>
</head>
<body>
<ul>
<li>
我的淘宝
<div class="dropmenu">
<div class="item">测试1</div>
<div class="item">测试2</div>
<div class="item">测试3</div>
</div>
</li>
<li>
购物车
<div class="dropmenu">
<div class="item">测试1</div>
<div class="item">测试2</div>
<div class="item">测试3</div>
</div>
</li>
<li>
收藏夹
<div class="dropmenu">
<div class="item">测试1</div>
<div class="item">测试2</div>
<div class="item">测试3</div>
</div>
</li>
</ul>
</body>
</html>

66
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/search.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索</title>
<style>
body {
margin: 0;
padding: 0;
}
input {
outline: none;
border: none;
}
input::-webkit-input-placeholder {
color: red;
font-size: 20px;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: red;
font-size: 20px;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: red;
font-size: 20px;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: red;
font-size: 20px;
}
input {
border: 1px solid #666;
width: 200px;
height: 30px;
border-radius: 30px;
background-color: #eee;
background-image: url(./search.png);
background-size: 19px;
background-repeat: no-repeat;
background-position: 174px center;
padding-right: 30px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" placeholder="搜索">
</body>
</html>

BIN
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

259
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/taobao.html Normal file
View File

@@ -0,0 +1,259 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝首页</title>
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
::-webkit-scrollbar {
display: none;
/* Chrome Safari */
}
.main {
width: 1160px;
height: 550px;
margin: 0 auto;
display: flex;
}
.l_menu {
width: 190px;
height: 100%;
display: flex;
flex-direction: column;
}
.menu_title {
height: 30px;
background: #ff5000;
font-size: 16px;
text-align: center;
line-height: 30px;
}
.l_menu ul {
flex: 1;
position: relative;
}
.l_menu ul li {
height: 34px;
align-items: center;
display: flex;
padding-left: 13px;
padding-right: 15px;
box-sizing: border-box;
justify-content: space-between;
}
.l_menu ul li:hover .dropmenu {
display: block;
}
.l_menu ul li .text {}
.l_menu ul li .text a {
color: #666;
}
.l_menu ul li span {}
.r_menu {
flex: 1;
}
.dropmenu {
width: 710px;
height: 515px;
border: 2px solid #ff5000;
box-sizing: border-box;
position: absolute;
left: 190px;
top: 0px;
display: none;
}
.dropmenu_l {
float: left;
width: 457px;
overflow-y: scroll;
height: 100%;
}
.dropmenu_r {
float: left;
width: 249px;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="l_menu">
<h2 class="menu_title">主题市场</h2>
<ul>
<li>
<div class="text">
<a href="">女装</a> /
<a href="">男装</a> /
<a href="">内衣</a>
</div>
<span>></span>
<div class="dropmenu">
<div class="dropmenu_l">
<ul>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
</ul>
</div>
<div class="dropmenu_r">2</div>
</div>
</li>
<li>
<div class="text">
<a href="">女装</a> /
<a href="">男装</a> /
<a href="">内衣</a>
</div>
<span>></span>
</li>
<li>
<div class="text">
<a href="">女装</a> /
<a href="">男装</a> /
<a href="">内衣</a>
</div>
<span>></span>
</li>
</ul>
</div>
<div class="r_menu">
</div>
</div>
</body>
</html>

BIN
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/tm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 686 B

BIN
历届学生/18课程/class18_2/项目/上课项目/淘宝首页/userback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB