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

13
历届学生/韩想/项目开发/练习项目/仿小米商城/赵俊凯/css/clear.css Normal file
View File

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

230
历届学生/韩想/项目开发/练习项目/仿小米商城/赵俊凯/css/index.css Normal file
View File

@@ -0,0 +1,230 @@
.header_zuo,.header_you{
display: flex;
align-items: center;
height: 40px;
}
.header{
width: 100%;
background: #333;
}
.hdlist{
display: flex;
justify-content: space-between;
}
.hdlist ul li{
margin-left: 8px;
}
.hdlist ul li:hover a{
color: #fff;
}
.hdlist ul li a{
color: #b0b0b0;
font-size: 12px;
position: relative;
}
.header_zuo li a::after{
position: absolute;
content: " ";
height: 11px;
width: 1px;
background: #424242;
right: -5px;
top: 3px;
}
.header_zuo li:last-child a::after {
width: 0px !important;
}
.header_you li a::after{
position: absolute;
content: " ";
height: 11px;
width: 1px;
background: #424242;
right: -5px;
top: 3px;
}
.header_you li:last-child a::after {
width: 0px !important;
}
.header_you li:last-child{
width: 120px;
height: 40px;
background: #424242;
line-height: 40px;
text-align: center;
position: relative;
}
.header_you li:last-child:hover{
background: #fff;
}
.header_you li:last-child:hover a{
color: #ff6700;
}
.yclist{
width: 316px;
height: 0px;
background: #fff;
position: absolute;
top: 40px;
right: 0px;
z-index: 31;
box-shadow: 2px 2px 5px #999;
transition: all ease 0.5s;
}
.header_you li:last-child:hover .yclist{
height: 100px;
}
.menu{
display: flex;
justify-content: space-between;
height: 100px;
align-items: center;
}
.menu .menu_left {
display: flex;
align-items: center;
}
.menu .menu_left .dt{
width: 55px;
height: 55px;
background: #ff6700;
display: flex;
overflow: hidden;
}
.menu .menu_left .dt img{
width: 55px;
height: 55px;
/* margin-left: -55px; */
}
.menu .menu_left .dt .hh{
margin-left: -55px;
/* transition: all ease 0.3s; */
}
.menu .menu_left .dt:hover .hh{
margin-left: 0px;
transition: all ease 0.3s;
}
.menu .menu_left .dt:hover .he{
margin-left: 55px;
transition: all ease 0.3s;
}
.menu .menu_left .dt .he{
transition: all ease 0.3s;
}
.menu .menu_left .dlogo{
height: 55PX;
margin-right: 10px;
margin-left: 15px;
}
.menu .menu_left ul{
display: flex;
}
.menu .menu_left ul li{
margin-right: 10px;
}
.menu .menu_left ul a{
color: #333;
}
.menu .menu_left ul li:hover a{
color: #ff6700;
}
.menu .menu_right {
width: 296px;
height: 50px;
display: flex;
border: 1px solid #e0e0e0;
}
.menu .menu_right input{
width: 223px;
height: 100%;
border: none;
padding: 0 10px;
}
.menu .menu_right i{
width: 52px;
height: 50px;
display: inline-block;
text-align: center;
line-height: 50px;
border-left: 1px solid #e0e0e0;
font-size: 29px;
transition: all ease 0.3s;
}
.menu .menu_right i:hover{
background: #ff6700;
color: #fff;
}
.lunbo{
position: relative;
}
.lunbo img{
width: 1226px;
}
.lb_zuo{
width: 234px;
height: 460px;
position: absolute;
background: rgba(105,101,101,.6);
top: 0px;
left: 0px;
box-sizing: border-box;
}
.lb_zuo ul{
padding: 20px 0px 20px 0px;
}
.lb_zuo ul li:hover{
background: #ff6700;
}
.lb_zuo ul li a{
display: flex;
justify-content: space-between;
align-items: center;
height: 42px;
}
.lb_zuo ul li a p{
font-size: 14px;
color: #fff;
margin-left: 30px;
}
.lb_zuo ul li a .xiao{
font-size: 16px;
font-weight: 600;
color: #fff;
margin-right: 20px;
}
.lunbo .zuo{
font-size: 40px;
color: rgba(105,101,101,.6);
position: absolute;
top: 185px;
left: 240px;
}
.lunbo .you{
font-size: 40px;
color: rgba(105,101,101,.6);
position: absolute;
top: 185px;
right: 6px;
}
.dd{
display: flex;
position: absolute;
right: 30px;
bottom: 20px;
}
.dd li{
width: 6px;
height: 6px;
border: 3px ;
border-radius: 100%;
background: rgba(0,0,0,.4);
border: 2px solid #fff;
border-color: hsla(0,0%,100%,.3);
margin-left: 5px;
}

16
历届学生/韩想/项目开发/练习项目/仿小米商城/赵俊凯/css/public.css Normal file
View File

@@ -0,0 +1,16 @@
.left{
float: left;
}
.right{
float: right;
}
.width_1226{
width: 1226px;
margin: 0 auto;
}
.center{
text-align: center;
}

134
历届学生/韩想/项目开发/练习项目/仿小米商城/赵俊凯/index.html Normal file
View File

@@ -0,0 +1,134 @@
<!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="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1978518_fk5iac2oo96.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1978518_04jl8vna2c5h.css">
</head>
<body>
<div class="header">
<div class="width_1226 hdlist">
<ul class="header_zuo">
<li><a href="">小米商城</a></li>
<li><a href="">MIUI</a></li>
<li><a href="">loT</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>
<li><a href="">下载app</a></li>
<li><a href="">Select Location</a></li>
</ul>
<ul class="header_you">
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
<li>
<a href="">购物车(0)</a>
<div class="yclist">
</div>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="width_1226">
<div class="menu">
<div class="menu_left">
<div class="dt">
<img class="hh" src="https://s02.mifile.cn/assets/static/image/mi-home.png" alt="">
<img class="he" src="https://s02.mifile.cn/assets/static/image/mi-logo.png" alt="">
</div>
<img class="dlogo"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b06819007feedbea62aedaa3089633d2.gif?" alt="">
<ul>
<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>
<div class="menu_right">
<input type="text" placeholder="米家运动心电T恤">
<i class="iconfont icon-search"></i>
</div>
</div>
<div class="lunbo">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/66c6d0c733c9b8a2dca728033adedc0b.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
alt="">
<i class="iconfont icon-leftarrow zuo"></i>
<i class="iconfont icon-rightarrow you"></i>
<ul class="dd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="lb_zuo">
<ul>
<li><a href="">
<p>手机 电话卡</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>电视 盒子</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>笔记本 显示器</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>家电 插线板</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>出行 穿戴</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>智能 路由器</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>电源 配件</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p> 健康 儿童</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>耳机 音箱</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
<li><a href="">
<p>生活 箱包</p>
<i class="iconfont icon-rightarrow xiao"></i>
</a></li>
</ul>
</div>
</div>
</div>
.
</div>
</body>
</html>