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

25
历届学生/张洋铭/小米商城/css/clear.css Normal file
View File

@@ -0,0 +1,25 @@
body,p,ul,li,h1,h2,h3,h4,h5,h6,a{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
input {
outline: none;
}
.container {
width: 1226px;
margin: 0 auto;
}
.left {
float: left;
}
img {
width: 100%;
}

450
历届学生/张洋铭/小米商城/css/index.css Normal file
View File

@@ -0,0 +1,450 @@
.header {
height: 40px;
background: #333;
color: #b0b0b0;
}
.header a {
color: #b0b0b0;
font-size: 12px;
}
.header span {
margin: 0 5px;
font-size: 12px;
color: #424242;
}
.header li:hover a {
color: #fff;
}
.header .container {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left,
.header-right{
display: flex;
align-items: center;
}
.car {
width: 120px;
height: 40px;
color: #b0b0b0;
text-align: center;
line-height: 40px;
background: #424242;
margin-left: 20px;
position: relative;
}
.menu {
display: none;
width: 320px;
height: 100px;
background: #FFF;
position: absolute;
left: -200px;
top: 40px;
text-align: center;
line-height: 100px;
color: #424242;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.car:hover{
color: #ff6700;
background: #fff;
}
.car:hover .menu {
display: block;
}
.car img {
width: 20px;
height: 20px;
margin-right: 4px;
vertical-align: sub;
}
.type {
display: flex;
justify-content: space-between;
height: 100px;
align-items: center;
}
.logo {
width: 55px;
height: 55px;
background: #ff6700;
position: relative;
overflow: hidden;
}
.logo:hover:after,
.logo:hover:before{
transform: translateX(55px);
}
.logo::before,
.logo::after {
content: '';
width: 55px;
height: 55px;
position: absolute;
transition: all 0.4s;
}
.logo::before {
background: url("../img/mi-logo.png") no-repeat 50% 50%;
}
.logo::after {
background: url("../img/mi-home.png") no-repeat 50% 50%;
margin-left: -55px;
}
.menus {
display: flex;
}
.menus li {
padding: 0 10px;
font-size: 16px;
}
.menus li a {
color: #333;
}
.search {
width: 296px;
height: 50px;
position: relative;
border: 1px solid #e0e0e0;
}
.search input {
width: 233px;
height: 48px;
padding: 0 9px;
font-size: 14px;
box-sizing: border-box;
border: none;
border-right: 1px solid #e0e0e0;
}
.search i {
width: 52px;
height: 50px;
color: #616161;
background: #fff;
text-align: center;
line-height: 50px;
display: inline-block;
}
.search-list {
position: absolute;
top: 50%;
margin-top: -10.5px;
left: 47px;
}
.search-list span {
display: inline-block;
padding: 0 5px;
text-align: center;
background: #eee;
color: #757575;
font-size: 12px;
margin-right: 5px;
}
.search input:focus+.search-list{
display: none;
}
.banner {
padding-bottom: 26px;
}
.banner_menu {
height: 460px;
}
.banner_menu_left {
width: 234px;
height: 100%;
background: rgba(105,101,101,.6);
color: #fff;
padding: 20px 0px 20px 30px;
box-sizing: border-box;
}
.banner_menu_left ul li {
display: flex;
justify-content: space-between;
height: 42px;
align-items: center;
font-size: 14px;
position: relative;
padding-right: 20px;
}
.banner_menu_left ul li:hover .drop_menu {
display: inline-block;
}
.drop_menu {
display: none;
position: absolute;
width: 992px;
height: 460px;
background: #fff;
top: -20px;
left: 204px;
padding: 21px 26px;
box-sizing: border-box;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
}
.drop_menu_item {
width: 235px;
height: 76px;
float: left;
}
.drop_menu_item img {
width: 40px;
height: 40px;
margin-right: 12px;
vertical-align: middle;
}
.drop_menu_item span {
color: #333;
font-size: 14px;
}
.banner_menu_right {
width: 992px;
height: 100%;
background: url("../img/banner_01.jpg");
background-position: center center;
background-size: cover;
}
.banner_item {
margin-top: 14px;
height: 170px;
}
.banner_item ul li {
width: 316px;
height: 170px;
float: left;
margin-right: 15px;
display: flex;
flex-wrap: wrap;
}
.banner_item ul li:last-child{
margin-right: 0;
}
.banner_item ul li img {
width: 100%;
height: 100%;
}
.first {
width: 234px !important;
margin-right: 14px !important;
padding: 3px;
box-sizing: border-box;
background: #5f5750;
}
.first_item {
width: 33%;
text-align: center;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #665e57;
box-sizing: border-box;
}
.first_item img {
width: 24px !important;
height: 24px !important;
margin-bottom: 4px;
}
.first_item p {
font-size: 12px;
color: #fff;
}
.list {
background: #f5f5f5;
padding: 26px 0px;
overflow: hidden;
}
.adb img {
width: 100%;
}
.phone_title{
display: flex;
justify-content: space-between;
align-items: center;
}
.phone_title h2 {
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
}
.phone_title span {
font-size: 16px;
color: #424242;
}
.phone_title i {
color: #b0b0b0;
}
.phone_list {
margin-bottom: 30px;
overflow: hidden;
}
.phone_list_left {
width: 234px;
}
.phone_list_right {
width: 978px;
margin-left: 14px;
}
.phone_list_right li {
height: 260px;
width: 234px;
padding: 20px 0;
margin-left: 10px;
margin-bottom: 10px;
background: #fff;
float: left;
text-align: center;
}
.phone_list_right img {
width: 160px;
}
.phone_list_right .title {
font-size: 14px;
color: #333;
font-weight: 400;
}
.phone_list_right .info {
font-size: 12px;
margin: 0 10px 10px;
color: #b0b0b0;
}
.phone_list_right .price {
color: #ff6700;
font-size: 14px;
}
.footer_1 {
padding: 27px 0;
height: 25px;
border-bottom: 1px solid #e0e0e0;
}
.footer_1 li {
float: left;
width: 19.8%;
height: 25px;
font-size: 16px;
line-height: 25px;
text-align: center;
border-right: 1px solid #e0e0e0;
}
.footer_1 li:last-child {
border-right: none;
}
.footer_1 li img {
width: 24px;
vertical-align: middle;
margin-right: 9px;
}
.footer_1 li span {
}
.footer_2 {
padding: 40px 0;
overflow: hidden;
}
.footer_2_left {
float: left;
width: 160px;
}
.footer_2_left p {
color: #757575;
font-size: 12px;
margin-top: 10px;
}
.footer_2_left .first_title {
margin: -1px 0 26px;
font-size: 14px;
color: #424242;
}
.footer_2_rigth{
float: right;
width: 251px;
height: 112px;
border-left: 1px solid #e0e0e0;
text-align: center;
color: #616161;
}
.footer_2_rigth h2 {
font-size: 22px;
color: #ff6700;
margin-bottom: 5px;
}
.footer_2_rigth p {
font-size: 12px;
}
.kef {
border: 1px solid #ff6700;
background: #fff;
color: #ff6700;
text-align: center;
width: 118px;
height: 28px;
margin: 0 auto;
line-height: 28px;
margin-top: 16px;
}
.footer_3 {
padding: 30px 0;
font-size: 12px;
background: #fafafa;
}
.footer_3 .logos {
width: 57px;
height: 57px;
margin-right: 3px;
}
.footer_3_right {
}
.footer_3_right p{
color: #757575;
font-size: 12px;
}
.in {
margin-top: 3px;
color: #b0b0b0 !important;
}
.co {
margin-top: 4px;
}
.co img {
height: 28px;
width: auto !important;
}
.footer_4 {
text-align: center;
}
.footer_4 img {
width: 267px;
height: 19px;
margin-top: 30px;
margin-bottom: 30px;
}

BIN
历届学生/张洋铭/小米商城/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
历届学生/张洋铭/小米商城/img/banner_01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 451 KiB

BIN
历届学生/张洋铭/小米商城/img/car_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 636 B

BIN
历届学生/张洋铭/小米商城/img/footer_1_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
历届学生/张洋铭/小米商城/img/i_01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
历届学生/张洋铭/小米商城/img/menu_01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
历届学生/张洋铭/小米商城/img/mi-home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 B

BIN
历届学生/张洋铭/小米商城/img/mi-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/张洋铭/小米商城/img/slogan2016.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

422
历届学生/张洋铭/小米商城/index.html Normal file
View File

@@ -0,0 +1,422 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小米商城 - 小米9 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
<link rel="icon" href="http://s01.mifile.cn/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1566158_xofswg5gly.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="container">
<ul class="header-left">
<li><a href="">小米商城</a><span>|</span></li>
<li><a href="">MIUI</a><span>|</span></li>
<li><a href="">IoT</a><span>|</span></li>
<li><a href="">云服务</a><span>|</span></li>
<li><a href="">金融</a><span>|</span></li>
<li><a href="">有品</a><span>|</span></li>
<li><a href="">小爱开放平台</a></li>
</ul>
<ul class="header-right">
<li><a href="">登录</a><span>|</span></li>
<li><a href="">注册</a><span>|</span></li>
<li><a href="">消息通知</a></li>
<li class="car">
<i class="iconfont icon-gouwuche"></i>
<label>购物车（0）</label>
<div class="menu">
购物车中还没有商品，赶紧选购吧！
</div>
</li>
</ul>
</div>
</div>
<div class="type container">
<div class="logo">
</div>
<ul class="menus">
<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="search">
<input type="text">
<div class="search-list">
<span>小米9 Pro 5G</span>
<span>Redmi Note 8</span>
</div>
<i class="iconfont icon-sousuo"></i>
</div>
</div>
<div class="banner container">
<div class="banner_menu">
<div class="banner_menu_left left">
<ul>
<li>
<span>手机 电话卡</span>
<i class="iconfont icon-qianjin"></i>
<div class="drop_menu">
<div class="drop_menu_item">
<img src="./img/menu_01.jpg" alt="">
<span>Redmi K30 4G</span>
</div>
<div class="drop_menu_item">
<img src="./img/menu_01.jpg" alt="">
<span>Redmi K30 4G</span>
</div>
<div class="drop_menu_item">
<img src="./img/menu_01.jpg" alt="">
<span>Redmi K30 4G</span>
</div>
<div class="drop_menu_item">
<img src="./img/menu_01.jpg" alt="">
<span>Redmi K30 4G</span>
</div>
<div class="drop_menu_item">
<img src="./img/menu_01.jpg" alt="">
<span>Redmi K30 4G</span>
</div>
</div>
</li>
<li>
<span>电视 盒子</span>
<i class="iconfont icon-qianjin"></i>
</li>
</ul>
</div>
<div class="banner_menu_right left"></div>
</div>
<div class="banner_item">
<ul>
<li class="first">
<div class="first_item">
<img src="./img/1.png" alt="">
<p>小米秒杀</p>
</div>
<div class="first_item">
<img src="./img/1.png" alt="">
<p>小米秒杀</p>
</div>
<div class="first_item">
<img src="./img/1.png" alt="">
<p>小米秒杀</p>
</div>
<div class="first_item">
<img src="./img/1.png" alt="">
<p>小米秒杀</p>
</div>
<div class="first_item">
<img src="./img/1.png" alt="">
<p>小米秒杀</p>
</div>
<div class="first_item">
<img src="./img/1.png" alt="">
<p>小米秒杀</p>
</div>
</li>
<li>
<img src="./img/i_01.jpg" alt="">
</li>
<li>
<img src="./img/i_01.jpg" alt="">
</li>
<li>
<img src="./img/i_01.jpg" alt="">
</li>
</ul>
</div>
</div>
<div class="list">
<div class="container">
<div class="adb">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8bdd93c2aad57ede093b09d40000a48.jpg?w=2452&h=240"
alt="">
</div>
<div class="phone">
<div class="phone_title">
<h2>手机</h2>
<div>
<span>查看全部</span>
<i class="iconfont icon-yk_qianjin_fill"></i>
</div>
</div>
<div class="phone_list">
<div class="phone_list_left left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?w=468&h=1228"
alt="">
</div>
<div class="phone_list_right left">
<ul>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
</ul>
</div>
</div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e63ab43e7c32296f18f34c8efb41534.jpg?w=2452&h=240" alt="">
</div>
<div class="phone">
<div class="phone_title">
<h2>手机</h2>
<div>
<span>查看全部</span>
<i class="iconfont icon-yk_qianjin_fill"></i>
</div>
</div>
<div class="phone_list">
<div class="phone_list_left left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?w=468&h=1228"
alt="">
</div>
<div class="phone_list_right left">
<ul>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg"
alt="">
<p class="title">Redmi K30</p>
<p class="info">120Hz流速屏，全速热爱</p>
<p class="price">1599元起</p>
</li>
</ul>
</div>
</div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e63ab43e7c32296f18f34c8efb41534.jpg?w=2452&h=240" alt="">
</div>
</div>
</div>
<div class="footer">
<div class="container">
<ul class="footer_1">
<li>
<img src="./img/footer_1_icon.png" alt="">
<span>预约维修服务</span>
</li>
<li>
<img src="./img/footer_1_icon.png" alt="">
<span>预约维修服务</span>
</li>
<li>
<img src="./img/footer_1_icon.png" alt="">
<span>预约维修服务</span>
</li>
<li>
<img src="./img/footer_1_icon.png" alt="">
<span>预约维修服务</span>
</li>
<li>
<img src="./img/footer_1_icon.png" alt="">
<span>预约维修服务</span>
</li>
</ul>
<div class="footer_2">
<div class="footer_2_left">
<p class="first_title">帮助中心</p>
<p>账户管理</p>
<p>购物指南</p>
<p>订单操作</p>
</div>
<div class="footer_2_left">
<p class="first_title">帮助中心</p>
<p>账户管理</p>
<p>购物指南</p>
<p>订单操作</p>
</div>
<div class="footer_2_left">
<p class="first_title">帮助中心</p>
<p>账户管理</p>
<p>购物指南</p>
<p>订单操作</p>
</div>
<div class="footer_2_left">
<p class="first_title">帮助中心</p>
<p>账户管理</p>
<p>购物指南</p>
<p>订单操作</p>
</div>
<div class="footer_2_left">
<p class="first_title">帮助中心</p>
<p>账户管理</p>
<p>购物指南</p>
<p>订单操作</p>
</div>
<div class="footer_2_left">
<p class="first_title">帮助中心</p>
<p>账户管理</p>
<p>购物指南</p>
<p>订单操作</p>
</div>
<div class="footer_2_rigth">
<h2 class="right_title">
400-100-5678
</h2>
<p>
周一至周日 8:00-18:00<br>（仅收市话费）
</p>
<div class="kef">
<i class="iconfont icon-liuyanjianyi"></i>
<span>人工客服</span>
</div>
</div>
</div>
</div>
<div class="footer_3">
<div class="container">
<img class="logos left" src="https://s02.mifile.cn/assets/static/image/logo-footer.png" alt="">
<div class="footer_3_right left">
<p>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 |路由器 | 米粉卡 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | 廉正举报 | 诚信合规 | Select Location</p>
<p class="in">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 <br>
（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械质量公告<br>
增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12 食品经营许可证<br>
违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</p>
<div class="co">
<img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
<img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
<img src="https://s01.mifile.cn/i/v-logo-1.png" alt="">
<img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
</div>
</div>
</div>
</div>
<div class="footer_4">
<img src="./img/slogan2016.png" alt="">
</div>
</div>
</body>
</html>