first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为布局</title>
</head>
<body>
<div>
<div class="head">
<h2 class="head-title">耳机音响眼睛</h2>
<ul class="head-menu">
<li>真无线耳机</li>
<li>蓝牙耳机</li>
<li>蓝牙音箱</li>
<li>智能眼镜</li>
<li>有线耳机</li>
<li>只能音响</li>
</ul>
<div class="head-left">查看更多></div>
</div>
<div class="content">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝布局</title>
</head>
<body>
<div class="head">
<div class="head-top">
<div class="head-top-logo">
<img src="" alt="">
</div>
<div class="head-top-input">
<input type="text" placeholder="高脚果盘">
<ul>
<li>新款连衣裙</li>
<li>四件套</li>
<li>潮流T恤</li>
<li>时尚女鞋</li>
<li>短裤</li>
<li>半身裙</li>
<li>男士外套</li>
<li>墙纸</li>
<li>行车记录仪</li>
<li>新款男鞋</li>
<li>耳机</li>
<li>时尚女包</li>
<li>沙发</li>
</ul>
</div>
<div class="head-top-二维码">
<img src="" alt="">
</div>
</div>
<div class="head-bottom">
<h2 class="head-bottom-left">主体市场</h2>
<ul class="head-bottom-center">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
<li>司法拍卖</li>
<li>飞猪旅行</li>
<li>天天特卖</li>
<li>淘小铺</li>
<li>造点新货</li>
<li>苏宁易购</li>
<li>淘宝心选</li>
<li>智能生活</li>
</ul>
</div>
</div>
<div class="content">
<div class="content-left">
<ul>
<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>房产/装修家居/建材</li>
<li>手表/眼镜/珠宝饰品</li>
</ul>
</div>
<div class="content-center">
<div class="content-center-top">
<!-- 轮播 -->
<img src="" alt="">
<!-- 图 -->
<img src="" alt="">
</div>
<div class="content-center-bottom">
<div>
<!-- 天猫LOGO -->
<img src="" alt="">
<h4 class="content-center-bottom-left">理想生活上天猫</h4>
<div class="content-center-bottom-right">今日热卖</div>
</div>
<!-- 轮播 -->
<img src="" alt="">
<!-- 图 -->
<img src="" alt="">
</div>
</div>
<div class="content-right">
<div class="content-right-1">
<img src="" alt="">
<form action="" method="POST">
<input type="submit" value="登录">
</form>
<form action="" method="POST">
<input type="submit" value="注册">
</form>
<form action="" method="POST">
<input type="submit" value="开店">
</form>
<img src="" alt="">
</div>
<div class="content-right-2">
<ul>
<li>公告</li>
<li>规划</li>
<li>安全</li>
<li>公益</li>
<li>千牛</li>
</ul>
<p>关于。。。。。公告</p>
<p>关于。。。。。规划</p>
<p>关于。。。。。安全</p>
<p>关于。。。。。公益</p>
<p>关于。。。。。千牛</p>
</div>
<div class="content-right-3">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="content-right-4">
<div class="content-right-4-top-left">
<h5>阿里APP</h5>
</div>
<div class="content-right-4-top-right">
<a>更多></a>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 528 B

View File

@@ -0,0 +1,247 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业</title>
<style>
.body {
box-sizing: border-box;
margin: 0;
}
li {
list-style-type: none;
}
.box {
position: relative;
width: 320px;
height: 650px;
}
.head {
position: relative;
}
.writer {
display: inline;
color: silver;
}
.img {
position: absolute;
left: 70%;
top: 2px;
}
.more {
margin: 0;
position: absolute;
left: 78%;
top: 0px;
color: silver;
}
.ul {
position: relative;
}
.list1 {
width: 100%;
height: 100%;
}
.list1-1 {
width: 48px;
height: 48px;
left: 5px;
size: 14px;
position: absolute;
}
.guanzhu1 {
color: springgreen;
position: absolute;
left: 80%;
}
.name1 {
position: absolute;
left: 60px;
}
.introduction1 {
position: absolute;
top: 55px;
font-size: 8px;
color: silver;
left: 60px;
}
.list1-2 {
position: absolute;
top: 100px;
left: 5px;
}
.guanzhu2 {
color: springgreen;
position: absolute;
left: 80%;
top: 100px;
}
.name2 {
position: absolute;
top: 100px;
left: 60px;
}
.introduction2 {
position: absolute;
top: 125px;
font-size: 8px;
color: silver;
left: 60px;
}
.list1-3 {
position: absolute;
top: 170px;
left: 7px;
width: 48px;
height: 48px;
}
.guanzhu3 {
color: springgreen;
position: absolute;
left: 80%;
top: 170px;
}
.name3 {
position: absolute;
top: 170px;
left: 60px;
}
.introduction3 {
position: absolute;
top: 193px;
font-size: 8px;
color: silver;
left: 60px;
}
.list1-4 {
position: absolute;
top: 230px;
left: 7px;
width: 48px;
height: 48px;
}
.guanzhu4 {
color: springgreen;
position: absolute;
left: 80%;
top: 230px;
}
.name4 {
position: absolute;
top: 230px;
left: 60px;
}
.introduction4 {
position: absolute;
top: 253px;
font-size: 8px;
color: silver;
left: 60px;
}
.list1-5 {
position: absolute;
top: 300px;
left: 7px;
width: 48px;
height: 48px;
}
.guanzhu5 {
color: springgreen;
position: absolute;
left: 80%;
top: 300px;
}
.name5 {
position: absolute;
top: 300px;
left: 60px;
}
.introduction5 {
position: absolute;
top: 323px;
font-size: 8px;
color: silver;
left: 60px;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<p class="writer">推荐作者</p>
<img class="img" src="./1624096674(1).jpg" alt="">
<p class="more">换一批</p>
</div>
<div class="bottom">
<div class="list">
<ul>
<li class="list1">
<img class="list1-1" src="./list1.webp" alt="">
<a class="name1">卢璐说</a>
<a class="guanzhu1">+关注</a>
<p class="introduction1">写了2033.7k字·34.2k喜欢</p>
</li>
<li class="list2">
<img class="list1-2" src="./list2.webp" alt="">
<a class="name2">Hobbit霍比特人</a>
<a class="guanzhu2">+关注</a>
<p class="introduction2">写了422.5k字·1.8k喜欢</p>
</li>
<li class="list3">
<img class="list1-3" src="./list3.webp" alt="">
<a class="name3">野狐狸</a>
<a class="guanzhu3">+关注</a>
<p class="introduction3">写了394.6k字·6.4k喜欢</p>
</li>
<li class="list4">
<img class="list1-4" src="./list4.webp" alt="">
<a class="name4">简书钻首席小管家</a>
<a class="guanzhu4">+关注</a>
<p class="introduction4">写了456.7k字·109.9k喜欢</p>
</li>
<li class="list5">
<img class="list1-5" src="./list5.webp" alt="">
<a class="name5">闫泽华</a>
<a class="guanzhu5">+关注</a>
<p class="introduction5">写了255.6k字·4.7k喜欢</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改</title>
<style>
body {
margin: 0;
}
.title1 {
padding: 10px 10px 10px 0px;
}
ul {
padding-left: 0;
margin: 0;
}
ul li {
margin: 0;
list-style-type: none;
}
.head {
width: 250px;
height: 64px;
}
.recommend {
margin-left: 10px;
float: left;
margin: 0;
color: silver;
}
.img {
float: left;
margin-left: 120px;
margin-top: 2px;
}
.more {
float: right;
color: silver;
}
.bottom {
width: 250px;
height: 600px;
}
.list1{
width: 48px;
height: 48px;
float: left;
}
.name1{
float: left;
}
.guanzhu1{
float: right;
color: springgreen;
}
.introduction1{
margin-top: 7px;
font-size: 9px;
color: silver;
margin-top: 30px;
}
.list2 {
width: 48px;
height: 48px;
float: left;
}
.name2 {
margin-top: 100px;
}
.guanzhu2 {
float: right;
color: springgreen;
}
.introduction2 {
margin-top: 7px;
font-size: 9px;
color: silver;
}
.list3 {
width: 48px;
height: 48px;
float: left;
}
.name3 {
margin-top: 100px;
}
.guanzhu3 {
float: right;
color: springgreen;
}
.introduction3 {
margin-top: 7px;
font-size: 9px;
color: silver;
}
.list4 {
width: 48px;
height: 48px;
float: left;
}
.name4 {
margin-top: 100px;
}
.guanzhu4 {
float: right;
color: springgreen;
}
.introduction4 {
margin-top: 7px;
font-size: 9px;
color: silver;
}
.list5 {
width: 48px;
height: 48px;
float: left;
}
.name5 {
margin-top: 100px;
}
.guanzhu5 {
float: right;
color: springgreen;
}
.introduction5 {
margin-top: 7px;
font-size: 9px;
color: silver;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<p class="recommend" href="">推荐作者</p>
<img class="img" src="./1624096674(1).jpg" alt="">
<a class="more" href="">换一批</a>
</div>
<div class="bottom">
<ul>
<li class="title1">
<img class="list1" src="./list1.webp" alt="">
<a class="name1" href="">卢璐说</a>
<a class="guanzhu1" href="">+关注</a>
<p class="introduction1">写了2033.7k字·34.2k喜欢</p>
</li>
<li class="title1">
<img class="list2" src="./list2.webp" alt="">
<a class="name2" href="">Hobbit霍比特人</a>
<a class="guanzhu2" href="">+关注</a>
<p class="introduction2">写了422.5k字·1.8k喜欢</p>
</li>
<li class="title1">
<img class="list3" src="./list3.webp" alt="">
<a class="name3" href="">野狐狸</a>
<a class="guanzhu3" href="">+关注</a>
<p class="introduction3">写了422.5k字·1.8k喜欢</p>
</li>
<li class="title1">
<img class="list4" src="./list4.webp" alt="">
<a class="name4">简书钻首席小管家</a>
<a class="guanzhu4">+关注</a>
<p class="introduction4">写了456.7k字·109.9k喜欢</p>
</li>
<li class="title1">
<img class="list5" src="./list5.webp" alt="">
<a class="name5">闫泽华</a>
<a class="guanzhu5">+关注</a>
<p class="introduction5">写了255.6k字·4.7k喜欢</p>
</li>
</ul>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

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

View File

@@ -0,0 +1,473 @@
.header {}
.header_menu {
height: 40px;
background: #333;
}
.left_menu,
.right_menu{
line-height: 40px;
}
.left_menu li,
.right_menu li{
float: left;
position: relative;
margin-right: 13px;
}
.left_menu li a,
.right_menu li a{
color: #b0b0b0;
font-size: 12px;
}
.left_menu li::after,
.right_menu li::after {
content: "";
width: 1.23px;
height: 15.6px;
background: #424242;
position: absolute;
top: 14px;
right: -7px;
}
.right_menu li:nth-child(3)::after,
.right_menu li:nth-child(4)::after {
background: #333 !important;
}
.right_menu li:nth-child(4) {
margin-left: 15px;
width: 120px;
text-align: center;
height: 40px;
color: #b0b0b0;
background: #424242;
}
.right_menu li:nth-child(4) i{
vertical-align: bottom;
}
.header_logo {
height: 100px;
position: relative;
}
.header_logo .logo {
width: 56px;
height: 56px;
margin-top: 22px;
}
.header_logo .menu {
margin-left: 116.5px;
margin-top: 38px;
}
.header_logo .menu li{
float: left;
margin-right: 20px;
height: 62px;
}
.header_logo .menu li a {
color: #333;
font-size: 16px;
}
.header_logo .search {
width: 296px;
height: 50px;
border: 1px solid #bbb8b8;
margin-top: 20px;
position: relative;
}
.header_logo .search input {
height: 100%;
border: none;
width: 223px;
padding-left: 15px;
box-sizing: border-box;
float: left;
}
.header_logo .search .icon-ziyuan {
width: 73px;
display: inline-block;
height: 100%;
float: left;
text-align: center;
line-height: 50px;
border-left: 1px solid #8d8d8d;
box-sizing: border-box;
}
.search .dropmenu {
position: absolute;
width: 225px;
top: 51px;
border: 1px solid #bbb8b8;
box-sizing: border-box;
left: -1px;
display: none;
}
.search .dropmenu li {
padding-left: 15px;
font-size: 12px;
height: 30px;
line-height: 30px;
}
.search .dropmenu li:hover {
background-color: #bbb8b8;
}
.search input:focus+.dropmenu {
display: block !important;
}
.down_menu {
position: absolute;
width: 100%;
height: 229px;
left: 0;
top: 100px;
border-top: 1px solid #e0e0e0;
display: none;
z-index: 9999;
background: #fff;
box-shadow: 0 3px 4px rgb(0 0 0 / 18%);
}
.header_logo .menu li:hover .down_menu {
display: block !important;
}
.down_menu .item {
float: left;
text-align: center;
width: 160px;
margin: 0 22px;
position: relative;
margin-top: 35px;
}
.down_menu .item::before {
content: "";
position: absolute;
width: 1px;
top: 0;
right: 0;
height: 100px;
background: #e0e0e0;
}
.down_menu .item:last-child::before {
width: 0px !important;
}
.down_menu .item img {
width: 160px;
height: 110px;
margin: 0 auto 16px;
}
.down_menu .item .title {
color: #333;
font-size: 12px;
}
.down_menu .item .price {
color: #ff6700;
font-size: 12px;
}
.banner {
height: 460px;
}
.banner_center {
position: relative;
}
.banner_menu {
width: 234px;
height: 460px;
position: absolute;
left: 0;
top: 0;
background: #000;
padding: 20px 0;
box-sizing: border-box;
background: rgba(105,101,101,.6);
}
.banner_center img {
width: 100%;
}
.banner_menu li {
padding-left: 30px;
padding-right: 20px;
height: 42px;
line-height: 42px;
position: relative;
}
.banner_menu li a{}
.banner_menu li span {
color: #fff;
}
.banner_menu li i {
color: #e0e0e0;
float: right;
}
.banner_menu li:hover {
background: #ff6700;
}
.banner_bottom {
margin-top: 14px;
}
.banner_bottom li:first-child {
width: 234px;
height: 170px;
background: #5f5750;
}
.bottom_list .item {
position: relative;
float: left;
width: 70px;
height: 82px;
margin-left: 6px;
text-align: center;
padding-top: 21px;
box-sizing: border-box;
}
.bottom_list .item::before {
content: "";
position: absolute;
width: 64px;
height: 1px;
background: #665e57;
top: 4px;
left: 0;
}
.bottom_list .item::after {
content: "";
position: absolute;
background: #665e57;
width: 1px;
height: 70px;
right: -1px;
top: 11px;
}
.bottom_list .item img {
width: 24px;
height: 24px;
margin: 0 auto 4px;
opacity: .7;
}
.bottom_list .item p {
color: #fff;
font-size: 12px;
opacity: .7;
}
.banner_bottom li:last-child {
margin-right: 0;
}
.banner_bottom li{
float: left;
width: 316px;
height: 170px;
margin-right: 14.5px;
}
.banner_bottom li img{
width: 100%;
}
.comparison_muen{
position: absolute;
width: 993px;
height: 460px;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
background: #fff;
top: -20px;
left: 234px;
border: 1px solid #e0e0e0;
display: none;
}
.comparison_muen_ltem{
width: 248px;
}
.comparison_muen img{
width: 40px;
height: 40px;
float: left;
}
.comparison_muen p{
width: 172px;
line-height: 40px;
overflow: hidden;
font-size: 14px;
}
.comparison_muen_ltem{
padding: 18px 20px;
}
.item1,.item2,.item3,.item4{
float: left;
width: 248px;
}
.banner .banner_menu li:hover .comparison_muen {
display: block !important;
}
.shouji_top{
height: 58px;
}
.shouji_left{
margin: 0;
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
}
.shouji_right li{
font-size: 16px;
line-height: 58px;
color: #424242;
}
.shouji_bottom img{
width: 234px;
height: 614px;
}
.shouji_title{
margin-left: 14px;
background: #fff;
padding: 20px 0;
height: 260px;
width: 234px;
margin-bottom: 14px;
}
.shouji_title img{
margin-left: 35px;
width: 160px;
height: 160px;
}
.shouji_title p{
text-align: center;
text-overflow: ellipsis;
}
.shouji_name{
margin-bottom: 2px;
font-size: 14px;
font-weight: 400;
color: #333;
}
.shouji_introduce{
height: 18px;
font-size: 12px;
color: #b0b0b0;
margin-bottom: 10px;
}
.shouji_money{
color: #ff6700;
font-size: 14px;
}
.guanggao img{
width: 1226px;
height: 120px;
margin-top: 23px;
}
.jiadian_top{
height: 58px;
}
.jiadian_top h2{
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
}
.jiadian_top_right {
margin-top: 16px;
}
.jiadian_top_right li {
float: left;
font-size: 16px;
color: #424242;
margin-left: 30px;
}
.jiadian_top_right .active {
color: #ff6700;
border-bottom: 2px solid #ff6700;
padding-bottom: 2px;
}
.jiadian_bottom{
text-align: center;
}
.jiadian_bottom li:last-child{
background: #f5f5f5;
}
.jiadian_bottom li:nth-child(5n){
margin-right: 0 !important;
}
.jiadian_bottom li{
margin-right: 14px;
margin-bottom: 14px;
background: #fff;
width: 234px;
height: 300px;
float: left;
}
.jiadian_bottom .dute{
width: 234px;
height: 300px;
}
.dute{
width: 234px;
height: 300px;
}
.jiadian_name{
font-size: 14px;
font-weight: 400;
color: #333;
margin-bottom: 2px;
}
.jiadian_introduce{
margin-bottom: 10px;
font-size: 12px;
color: #b0b0b0;
}
.jiadian_money_new{
color: #ff6700;
font-size: 14px;
}
.jiadian_money_oid{
font-size: 14px;
color: #b0b0b0;
}
.top{
padding-top: 40px;
padding-left: 30px;
height: 143px;
background: #fff;
box-sizing: border-box;
}
.top img{
margin-top: -11px;
width: 80px;
height: 80px;
}
.text{
text-align: left;
}
.text p{
font-size: 14px;
font-weight: 400;
color: #333;
width: 94px;
}
.text span{
font-size: 14px;
color: #ff6700;
}
.bottom{
margin-top: 13px;
padding-top: 40px;
padding-left: 30px;
height: 143px;
background: #fff;
box-sizing: border-box;
}
.bottom p{
font-size: 18px;
color: #333;
}
.bottom span{
color: #757575;
}
.bottom img{
width: 48px;
height: 48px;
margin-top: 3px;
margin-left: 16px;
}

View File

@@ -0,0 +1,20 @@
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.container {
width: 1226px;
margin: 0 auto;
}
.page_main {
background: #f5f5f5;
}

View File

@@ -0,0 +1,452 @@
<!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_2622901_kl3e9hjw79j.css"> -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2624277_wwlda6piim.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_menu">
<div class="container hidden">
<ul class="left left_menu">
<li>
<a href="">小米商城</a>
</li>
<li>
<a href="">MIUI</a>
</li>
<li>
<a href="">IoT</a>
</li>
<li>
<a href="">云服务</a>
</li>
</ul>
<ul class="right right_menu">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">消息通知</a>
</li>
<li>
<a href="">
<i class="iconfont icon-gouwuchekong"></i>
<span>购物车(0)</span>
</a>
</li>
</ul>
</div>
</div>
<div class="header_logo">
<div class="container">
<img class="logo left" src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
<ul class="menu left">
<li>
<a href="">小米手机</a>
<div class="down_menu">
<div class="container hidden">
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
</div>
</div>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
</ul>
<div class="search right">
<input type="text" placeholder="最新搜索">
<ul class="dropmenu">
<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>
<i class="iconfont icon-ziyuan"></i>
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<div class="container banner_center">
<ul class="banner_menu">
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
<div class="comparison_muen">
<div class="item1">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item2">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item3">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item4">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
</div>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
</ul>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/268aadece1368da98fcf5553b657cdb3.jpg?w=2452&h=920" alt="">
</div>
</div>
<ul class="banner_bottom hidden">
<div class="container">
<li>
<div class="bottom_list">
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
</div>
</ul>
<div class="phone page_main">
<div class="container">
<div class="container-top">
<div class="containe-top_left">
<h2>手机</h2>
</div>
<div class="container-top_right">
<div class="more">
<p>查看更多</p>
<i class="iconfont icon-gengduotianchong"></i>
</div>
</div>
</div>
<div class="container-bottom">
<div class="img-big">
<img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=293&h=768&f=webp&q=90" alt="">
</div>
<div class="img-mini">
<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>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="banner-box page_main">
<div class="container">
<img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</div>
</div>
<div class="jiadian page_main">
<div class="container">
<div class="jiadian-top-left">
<h2>家电</h2>
</div>
<div class="jiadian-top-right">
<h3 class="remen">热门</h3>
<h3 class="dianshiyingyin">电视影音</h3>
</div>
<div class="jiadian-bottom-left">
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="jiadian-bottom-left">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,566 @@
<!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_2622901_kl3e9hjw79j.css"> -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2624277_dgu9yz2zf4.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_menu">
<div class="container hidden">
<ul class="left left_menu">
<li>
<a href="">小米商城</a>
</li>
<li>
<a href="">MIUI</a>
</li>
<li>
<a href="">IoT</a>
</li>
<li>
<a href="">云服务</a>
</li>
</ul>
<ul class="right right_menu">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">消息通知</a>
</li>
<li>
<a href="">
<i class="iconfont icon-gouwuchekong"></i>
<span>购物车(0)</span>
</a>
</li>
</ul>
</div>
</div>
<div class="header_logo">
<div class="container">
<img class="logo left" src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
<ul class="menu left">
<li>
<a href="">小米手机</a>
<div class="down_menu">
<div class="container hidden">
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
</div>
</div>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
</ul>
<div class="search right">
<input type="text" placeholder="最新搜索">
<ul class="dropmenu">
<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>
<i class="iconfont icon-ziyuan"></i>
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<div class="container banner_center">
<ul class="banner_menu">
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
<div class="comparison_muen">
<div class="item1">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item2">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item3">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item4">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
</div>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
</ul>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/268aadece1368da98fcf5553b657cdb3.jpg?w=2452&h=920" alt="">
</div>
</div>
<ul class="banner_bottom hidden">
<div class="container">
<li>
<div class="bottom_list">
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
</div>
</ul>
<div class="phone page_main">
<div class="container">
<div class="container-top hidden">
<div class="containe-top_left left">
<p>手机</p>
</div>
<div class="container-top_right right">
<div class="more">
<p class="more-more left">查看更多</p>
<i class="iconfont icon-gengduo left"></i>
</div>
</div>
</div>
<div class="container-bottom">
<div class="img-big">
<img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=293&h=768&f=webp&q=90" alt="">
</div>
<div class="img-mini left">
<ul>
<li>
<!-- class="product hidden" -->
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
<li>
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
<li>
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
<li>
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
<li>
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
<li>
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
<li>
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
<li>
<div class="product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="phone_name">Note 10 Pro</p>
<p class="phone_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="phone_money">1699元起</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="banner-box page_main">
<div class="container">
<img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</div>
</div>
<div class="jiadian page_main hidden">
<div class="container">
<div class="jiadian-banner hidden">
<div class="jiadian-top-left left">
<p>家电</p>
</div>
<div class="jiadian-top-right right">
<p class="remen left">热门</p>
<p class="dianshiyingyin left">电视影音</p>
</div>
</div>
<div class="jiadian-bottom-left left">
<div>
<ul>
<li>
<img class="shang" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/116fc43816b87192be4e67cf762e8da5.jpeg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</li>
<li>
<img class="xia" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/116fc43816b87192be4e67cf762e8da5.jpeg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</li>
</ul>
</div>
</div>
<div class="jiadian-bottom-right">
<ul>
<li>
<div class="jiadian-product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<p class="jiadian_money">2999元</p>
<del>3299元</del>
</div>
</li>
<li>
<div class="jiadian-product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<p class="jiadian_money">2999元</p>
<del>3299元</del>
</div>
</li>
<li>
<div class="jiadian-product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<p class="jiadian_money">2999元</p>
<del>3299元</del>
</div>
</li>
<li>
<div class="jiadian-product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<p class="jiadian_money">2999元</p>
<del>3299元</del>
</div>
</li>
<li>
<div class="jiadian-product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<p class="jiadian_money">2999元</p>
<del>3299元</del>
</div>
</li>
<li>
<div class="jiadian-product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<p class="jiadian_money">2999元</p>
<del>3299元</del>
</div>
</li>
<li>
<div class="jiadian-product">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<p class="jiadian_money">2999元</p>
<del>3299元</del>
</div>
</li>
<!-- 右下角没写好 -->
<li class="jieshao">
<div class="jieshao-product-s">
<img src="http://i8.mifile.cn/v1/a1/d5a39c5e-28e7-f4c1-57fd-59933f26032b!125x125.jpg" alt="">
<h3 class="jieshao_name-s">小米米家空气净化器 2S</h3>
<p class="jieshao_money-s">699元</p>
</div>
</li>
<div class="gengduo">
<i class="iconfont icon-gengduo"></i>
</div>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,523 @@
<!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_2622901_kl3e9hjw79j.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_menu">
<div class="container hidden">
<ul class="left left_menu">
<li>
<a href="">小米商城</a>
</li>
<li>
<a href="">MIUI</a>
</li>
<li>
<a href="">IoT</a>
</li>
<li>
<a href="">云服务</a>
</li>
</ul>
<ul class="right right_menu">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">消息通知</a>
</li>
<li>
<a href="">
<i class="iconfont icon-gouwuche"></i>
<span>购物车(0)</span>
</a>
</li>
</ul>
</div>
</div>
<div class="header_logo">
<div class="container">
<img class="logo left" src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
<ul class="menu left">
<li>
<a href="">小米手机</a>
<div class="down_menu">
<div class="container hidden">
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=280&h=193&f=webp&q=90" alt="">
<p class="title">小米MIX FOLD</p>
<p class="price">9999元起</p>
</div>
</div>
</div>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">Redmi 红米</a>
</li>
<li>
<a href="">电视</a>
</li>
</ul>
<div class="search right">
<input type="text" placeholder="最新搜索">
<ul class="dropmenu">
<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>
<i class="iconfont icon-ziyuan"></i>
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<div class="container banner_center">
<ul class="banner_menu">
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
<div class="comparison_muen">
<div class="item1">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item2">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item3">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
<div class="item4">
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
<div class="comparison_muen_ltem">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<p class="introduction">小米MIX FOLD</p>
</div>
</div>
</div>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
<li>
<a href="">
<span>手机 电话卡</span>
<i class="iconfont icon-zhankai"></i>
</a>
</li>
</ul>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/268aadece1368da98fcf5553b657cdb3.jpg?w=2452&h=920" alt="">
</div>
</div>
<ul class="banner_bottom hidden">
<div class="container">
<li>
<div class="bottom_list">
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>小米秒杀</p>
</div>
</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
</li>
</div>
</ul>
<div class="shouji page_main hidden">
<div class="container">
<div class="shouji_top">
<h2 class="shouji_left left">手机</h2>
<ul class="shouji_right right">
<li class="left">
<span>查看更多</span>
</li>
<li class="left">
<i class="iconfont icon-zhankai"></i>
</li>
</ul>
</div>
<div class="shouji_bottom left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=263&h=691&f=webp&q=90" alt="">
</div>
<ul class="shouji_bottom_left">
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
<li class="shouji_title left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
<p class="shouji_name">Note 10 Pro</p>
<p class="shouji_introduce">天玑1100年度旗舰芯,VC液冷散热</p>
<p class="shouji_money">1699元起</p>
</li>
</ul>
</div>
</div>
<div class="guanggao page_main">
<div class="container">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1073&h=105&f=webp&q=90" alt="">
</div>
</div>
<div class="jadian page_main">
<div class="container">
<div class="jiadian_top hidden">
<h2 class="left">家电</h2>
<ul class="jiadian_top_right right">
<li class="active left">热门</li>
<li class="left">电视影音</li>
</ul>
</div>
<ul class="jiadian_bottom hidden">
<li>
<img class="dute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/116fc43816b87192be4e67cf762e8da5.jpeg?thumb=1&w=205&h=263&f=webp&q=90" alt="">
</li>
<li>
<img class="budute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<span class="jiadian_money_new">2999元</span>
<del class="jiadian_money_oid">3299元</del>
</li>
<li>
<img class="budute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<span class="jiadian_money_new">2999元</span>
<del class="jiadian_money_oid">3299元</del>
</li>
<li>
<img class="budute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<span class="jiadian_money_new">2999元</span>
<del class="jiadian_money_oid">3299元</del>
</li>
<li>
<img class="budute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<span class="jiadian_money_new">2999元</span>
<del class="jiadian_money_oid">3299元</del>
</li>
<li>
<img class="dute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/116fc43816b87192be4e67cf762e8da5.jpeg?thumb=1&w=205&h=263&f=webp&q=90" alt="">
</li>
<li>
<img class="budute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<span class="jiadian_money_new">2999元</span>
<del class="jiadian_money_oid">3299元</del>
</li>
<li>
<img class="budute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<span class="jiadian_money_new">2999元</span>
<del class="jiadian_money_oid">3299元</del>
</li>
<li>
<img class="budute" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
<p class="jiadian_name">小米全面屏电视65英寸 E65X</p>
<p class="jiadian_introduce">全面屏设计</p>
<span class="jiadian_money_new">2999元</span>
<del class="jiadian_money_oid">3299元</del>
</li>
<li>
<div class="top">
<div class="text left">
<p>小米米家空气净化器 2S</p>
<span>699元</span>
</div>
<img class="left" src="https://i8.mifile.cn/v1/a1/d5a39c5e-28e7-f4c1-57fd-59933f26032b!175x175.jpg" alt="">
</div>
<div class="bottom">
<div class="text left">
<p>浏览更多</p>
<span>热门</span>
</div>
<img class="left" src="./right.png" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2624277_jugo25chv3c.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="head">
<div class="head_top">
<div class="container">
<ul class="head_menu">
<li>
<a href="">登录/注册</a>
</li>
<li>
<a href="">我的订单</a>
</li>
<li>
<a href="">会员</a>
</li>
<li>
<a href="">甄选家</a>
</li>
<!-- 下拉菜单 -->
<li class="qiye">
<a href="">企业采购</a>
<i class="iconfont icon-iconfront-"></i>
<div class="qiye_menu">
<p>企业购</p>
<p>礼品卡</p>
<p>联系我们</p>
</div>
</li>
<li class="kehu">
<a href="">客户服务</a>
<i class="iconfont icon-iconfront-"></i>
<div class="kehu_menu">
<p>企业购</p>
<p>礼品卡</p>
<p>联系我们</p>
</div>
</li>
<!-- 结束 -->
<li>
<i class="iconfont icon-ziyuan1"></i>
<span>APP</span>
</li>
</ul>
</div>
<div class="head_bottom">
<div class="container hidden">
<img class="logo" src="./img/logo.png" alt="">
<div class="sousuo">
<input class="hidden" type="text">
<i class="iconfont icon-ziyuan"></i>
<div class="sousuo_right">
搜索
</div>
</div>
<div class="shopping">
<i class="iconfont icon-gouwuchekong"></i>
<span>购物车</span>
<img src="./img/FNV7[NABEK}LSVDZMLUAQ15.png" alt="">
</div>
<ul class="shopping_menu">
<li class="active">首页</li>
<li>居家生活</li>
<li>服饰鞋包</li>
<li>美食酒水</li>
<li>个护清洁</li>
<li>母婴亲子</li>
<li>运动旅行</li>
<li>数码家电</li>
<li>严选全球</li>
<li>为你严选</li>
<li>众筹</li>
</ul>
</div>
</div>
<div class="big_guanggao">
<div class="big_guanggao_logo hidden">
<img src="https://yanxuan.nosdn.127.net/7d0ad19b2d443682f206085329bbb11a.jpeg?type=webp&imageView&quality=95&thumbnail=1920x420"
alt="">
</div>
</div>
</div>
</div>
<div class="content">
<div class="container">
<div class="xinping_top">
<h2 class="xinping_left">新品首发</h2>
<span>为你寻觅世间好物</span>
<div class="xinping_right">
<p class="xinping_more">更多新品</p>
<i class="iconfont icon-gengduo"></i>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,197 @@
.head_top{
background: #333;
height: 36px;
}
.head_menu{
float: right;
position: relative;
margin-right: 13px;
}
.head_menu li a{
color: #ccc;
}
.head_menu li{
font-size: 12px;
float: left;
line-height: 36px;
color: #ccc;
margin-left: 20px;
}
.head_menu li::before{
content: '';
width: 1px;
height: 16px;
position: absolute;
background: #ccc;
margin-top: 10px;
margin-left: -10px;
}
.head_menu li:first-child::before{
background: #333;
}
.head_menu li:nth-child(5)::before,
.head_menu li:nth-child(6)::before{
margin-top: 12px;
}
.qiye,.kehu{
margin-top: -2px;
}
/* 下拉菜单 */
.head_menu{
position: relative;
}
.qiye_menu{
background-color: #fff;
border: 1px solid #ddd;
width: 83px;
display: none;
position: absolute;
text-align: center;
z-index: 999;
}
.head_menu li:hover .qiye_menu{
display: block;
}
.kehu_menu{
background-color: #fff;
border: 1px solid #ddd;
width: 83px;
display: none;
position: absolute;
text-align: center;
z-index: 999;
}
.head_menu li:hover .kehu_menu{
display: block;
}
/* 结束 */
.head_bottom{
clear: both;
height: 140px;
}
.logo{
width: 212px;
height: 50px;
margin-top: 27px;
display: inline-block;
}
.head_bottom .container{
position: relative;
}
.sousuo input{
position: absolute;
width: 402px;
height: 32px;
right: 285px;
top: 24px;
line-height: 38px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #CC9756;
border-bottom-left-radius: 19px;
border-top-left-radius: 19px;
font-size: 14px;
padding-left: 38px;
}
.sousuo_right{
width: 90px;
height: 38px;
background-color: #CC9756;
float: right;
color: #fff;
line-height: 38px;
text-align: center;
font-size: 16px;
border-top-right-radius: 19px;
border-bottom-right-radius: 19px;
margin-top: -57px;
margin-right: 195px;
}
.sousuo i{
position: absolute;
left: 375px;
top: 34px;
box-sizing: border-box;
color: #ccc;
}
.shopping{
width: 132px;
height: 20px;
border: 1px solid #CC9756;
border-radius: 19px;
padding: 8px 0;
margin-top: -55px;
float: right;
}
.shopping i{
margin-left: 17px;
color: #CC9756;
}
.shopping span{
color: #CC9756;
margin-left: 2px;
font-size: 14px;
}
.shopping img{
width: 21px;
height: 21px;
margin-left: 8px;
margin-bottom: -4px;
}
.shopping_menu li{
font-weight: 700;
float: left;
margin-top: 27px;
font-size: 14px;
padding-bottom: 7px;
margin-left: 52px;
}
.shopping_menu li:first-child{
margin-left: 0;
padding-left: 0;
}
.shopping_menu li:last-child{
margin-right: 0;
padding-right: 0;
}
.shopping_menu{
position: relative;
box-sizing: border-box;
}
.shopping_menu li::before{
content: '';
width: 1px;
position: absolute;
height: 14px;
margin-top: 3px;
margin-left: -25px;
}
.shopping_menu li:nth-child(10)::before{
background: #ccc;
}
.active{
color: #CC9756;
border-bottom: 2px solid #CC9756;
padding-bottom: 2px;
}
.big_guanggao{
width: 100%;
position: relative;
left: 0px;
top: 0px;
background: rgb(241, 241, 241);
}
.big_guanggao_logo img{
position: absolute;
left: -205px;
margin: 0 auto;
}
.content{
width: 1090px;
height: 510px;
overflow: hidden;
}

View File

@@ -0,0 +1,201 @@
.content{
background: #fff;
}
.xinping_top{
width: 1090px;
height: 48px;
}
.xinping_left{
font-size: 28px;
font-weight: 700;
line-height: 66px;
margin-right: 20px;
}
.xinping_top span{
padding-top: 13px;
display: inline-block;
line-height: 48px;
}
.more{
line-height: 44px;
margin-left: 30px;
padding-top: 14px;
font-size: 14px;
}
.more i{
font-size: 14px;
}
.container{
height: 510px;
}
.content{
position: relative;
}
.left_tubiao i{
position: absolute;
top: 200px;
color: #E7E2D7;
margin-top: -44px;
margin-left: -62px;
font-size: 56px;
}
.right_tubiao i{
position: absolute;
top: 200px;
color: #E7E2D7;
margin-top: -44px;
margin-left: 9px;
font-size: 56px;
}
.xinping_bottom li{
float: left;
width: 265px;
height: 265px;
margin-right: 10px;
margin-top: 10px;
}
.xinping_bottom li:last-child{
margin-right: 0px;
}
.xinping_bottom img{
background-color: #f4f4f4;
color: #f4f4f4;
margin: 0 auto;
}
.xinping_bottom span{
margin-left: 40%;
height: 20px;
line-height: 20px;
color: #fff!important;
padding: 0 5px;
background-color: #e36844;
}
.xinping_bottom .introduce{
width: 166px;
margin: 0 auto;
max-height: 40px;
line-height: 20px;
overflow: hidden;
}
.xinping_bottom .money{
font-size: 13px;
color: #d4282d;
margin: 0 auto;
margin-left: 45%;
margin-top: 10px;
}
.renqi_container{
background: #f4f0ea;
height: 738px;
}
.renqi_left{
position: relative;
}
.renqi_left h2{
font-size: 28px;
font-weight: 700;
line-height: 48px;
float: left;
margin-right: 20px;
}
.renqi_left a{
text-align: center;
font-size: 14px;
width: 70px;
height: 28px;
line-height: 48px;
margin-right: 55px;
}
.active{
color: #ff6700;
border-bottom: 2px solid #ff6700;
padding-bottom: 8px;
overflow: hidden;
}
.renqi_right li{
float: left;
line-height: 48px;
margin-left: 30px;
padding-top: 14px;
font-size: 14px;
}
.renqi_right li i{
font-size: 14px;
}
.left_big{
width: 390px;
height: 570px;
margin-left: 0;
}
.left_big_beijing{
width: 390px;
height: 401.14px;
background: #fff;
}
.left_big img{
margin: 40px 35px;
width: 320px;
height: 346px;
border-bottom: 1px solid #F4F0EA;
box-sizing: border-box;
}
.text{
background: #fff;
width: 390px;
height: 170px;
text-align: center;
padding: 50px 10px;
box-sizing: border-box;
}
.text span{
font-size: 13px;
line-height: 13px;
color: #d4282d;
padding: 1px 0 9px;
margin: 0;
}
.renqi_bottom_right li{
float: left;
}
.renqi_bottom_right li:nth-child(4),
.renqi_bottom_right li:nth-child(5),
.renqi_bottom_right li:nth-child(6){
margin-top: 10px;
}
.renqi_bottom_right_list img{
border-bottom: 1px solid #F4F0EA;
}
.renqi_bottom_right_list{
background-color: #fff;
overflow: hidden;
width: 223px;
height: 280px;
margin-left: 10px;
text-align: center;
}
.tejia{
height: 20px;
font-size: 0;
color: #fff;
width: 200px;
margin: 0 auto 3px;
overflow: hidden;
}
.left_text p{
width: 166px;
margin: 0 auto 4px;
max-height: 40px;
line-height: 20px;
overflow: hidden;
font-size: 13px;
}
.left_text span{
font-size: 13px;
line-height: 13px;
color: #d4282d;
padding: 1px 0 9px;
margin: 0;
}

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>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2624277_tvvgo4a7o3d.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./index2.css">
</head>
<body>
<div class="content">
<div class="container">
<div class="xinping_top hidden">
<h2 class="xinping_left left">新品首发</h2>
<span>为你寻觅世间好物</span>
<ul class="xinping_right right">
<li class="more">
<p class="xinping_more left">更多新品</p>
<i class="iconfont icon-gengduo left"></i>
</li>
</ul>
</div>
<div class="left_tubiao">
<a href="">
<i class="iconfont icon-left"></i>
</a>
</div>
<ul class="xinping_bottom">
<li>
<img src="https://yanxuan-item.nosdn.127.net/0b9d317c7e61240f24c55c8df71b305a.png?type=webp&quality=95&thumbnail=265x265&imageView"
alt="">
<span>99选9</span>
<p class="introduce">【99选9】暑假必读,世界文学名著阅读系列</p>
<p class="money">¥25</p>
</li>
<li>
<img src="https://yanxuan-item.nosdn.127.net/0b9d317c7e61240f24c55c8df71b305a.png?type=webp&quality=95&thumbnail=265x265&imageView"
alt="">
<span>99选9</span>
<p class="introduce">【99选9】暑假必读,世界文学名著阅读系列</p>
<p class="money">¥25</p>
</li>
<li>
<img src="https://yanxuan-item.nosdn.127.net/0b9d317c7e61240f24c55c8df71b305a.png?type=webp&quality=95&thumbnail=265x265&imageView"
alt="">
<span>99选9</span>
<p class="introduce">【99选9】暑假必读,世界文学名著阅读系列</p>
<p class="money">¥25</p>
</li>
<li>
<img src="https://yanxuan-item.nosdn.127.net/0b9d317c7e61240f24c55c8df71b305a.png?type=webp&quality=95&thumbnail=265x265&imageView"
alt="">
<span>99选9</span>
<p class="introduce">【99选9】暑假必读,世界文学名著阅读系列</p>
<p class="money">¥25</p>
</li>
</ul>
<div class="right_tubiao">
<a href="">
<i class="iconfont icon-right"></i>
</a>
</div>
</div>
<div class="renqi_container">
<div class="container">
<div class="renqi hidden">
<div class="renqi_left hidden">
<h2 class="left">人气推荐</h2>
<a class="active left" href="">编辑推荐</a>
<a class="left" href="">热销总榜</a>
<ul class="renqi_right right hidden">
<li>
<p class="renqi_more left">更多推荐</p>
<i class="iconfont icon-gengduo left"></i>
</li>
</ul>
</div>
<div class="renqi_bottom_left hidden">
<div class="left_big left">
<div class="left_big_beijing">
<img src="https://yanxuan-item.nosdn.127.net/02a36de34896aa8a5d278a4c44c24165.png?type=webp&quality=95&thumbnail=320x320&imageView" alt="">
</div>
<div class="text">
<p>移动话费 多种面额充值</p>
<span>¥49.95</span>
</div>
</div>
<ul class="renqi_bottom_right">
<li class="renqi_bottom_right_list">
<img src="https://yanxuan-item.nosdn.127.net/feefe540760f3f43cc3d1a7e65f846d9.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
<div class="left_text">
<div class="tejia"></div>
<p>每一口都有七种肉,全价猫粮1.8千克</p>
<span>¥88</span>
</div>
</li>
<li class="renqi_bottom_right_list">
<img src="https://yanxuan-item.nosdn.127.net/feefe540760f3f43cc3d1a7e65f846d9.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
<div class="left_text">
<div class="tejia"></div>
<p>每一口都有七种肉,全价猫粮1.8千克</p>
<span>¥88</span>
</div>
</li>
<li class="renqi_bottom_right_list">
<img src="https://yanxuan-item.nosdn.127.net/feefe540760f3f43cc3d1a7e65f846d9.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
<div class="left_text">
<div class="tejia"></div>
<p>每一口都有七种肉,全价猫粮1.8千克</p>
<span>¥88</span>
</div>
</li>
<li class="renqi_bottom_right_list">
<img src="https://yanxuan-item.nosdn.127.net/feefe540760f3f43cc3d1a7e65f846d9.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
<div class="left_text">
<div class="tejia"></div>
<p>每一口都有七种肉,全价猫粮1.8千克</p>
<span>¥88</span>
</div>
</li>
<li class="renqi_bottom_right_list">
<img src="https://yanxuan-item.nosdn.127.net/feefe540760f3f43cc3d1a7e65f846d9.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
<div class="left_text">
<div class="tejia"></div>
<p>每一口都有七种肉,全价猫粮1.8千克</p>
<span>¥88</span>
</div>
</li>
<li class="renqi_bottom_right_list">
<img src="https://yanxuan-item.nosdn.127.net/feefe540760f3f43cc3d1a7e65f846d9.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
<div class="left_text">
<div class="tejia"></div>
<p>每一口都有七种肉,全价猫粮1.8千克</p>
<span>¥88</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.container {
width: 1090px;
margin: 0 auto;
}
.page_main {
background: #f5f5f5;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 792 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 736 B

View File

@@ -0,0 +1,219 @@
<!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_2624277_ffxrqmcw9r9.css">
</head>
<body>
<div class="head">
<div class="container">
<div class="head_left">
<img src="./img/快手logo.png" alt="">
<div class="head_middle">
<input type="text" placeholder="请输入你要搜索的内容" name="" id="">
<div class="sousuo">搜索
<i class="iconfont icon-ziyuan"></i>
</div>
</div>
<ul class="head_right">
<li class="shangchuan">
<i class="iconfont icon-shangchuan"></i>
<p>上传视频</p>
</li>
<li class="chongzhi">
<i class="iconfont icon-chongzhi"></i>
<p>快币充值</p>
</li>
<img src="./img/快手头像.png" alt="">
</ul>
</div>
</div>
</div>
<div class="content">
<div class="container">
<div class="banner">
<img src="https://s2-10623.kwimgs.com/kos/nlav10623/vision_images/topBannerx1.png" alt="">
</div>
<ul class="navigation">
<li>
<i></i>
<p>我的关注</p>
</li>
<li>
<i></i>
<p>我的关注</p>
</li>
<li>
<i></i>
<p>我的关注</p>
</li>
<li>
<i></i>
<p>我的关注</p>
</li>
<li>
<i></i>
<p>我的关注</p>
</li>
<li>
<i></i>
<p>我的关注</p>
</li>
<li>
<i></i>
<p>我的关注</p>
</li>
<li>
<i></i>
<p>我的关注</p>
</li>
</ul>
<div class="duanshiping">
<div class="duanshiping_top_left">
<h2>精彩短视频</h2>
<span>更多></span>
</div>
<div class="duanshiping_top_right">
<i class="iconfont icon-zuo"></i>
<p>1/15</p>
<i class="iconfont icon-you"></i>
</div>
<ul class="duanshiping_bottom">
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
<li>
<img src="https://tx2.a.yximgs.com/upic/2021/06/13/12/BMjAyMTA2MTMxMjU2NDVfMjIxMzQ4OTYxXzUxMzE1NDcxOTc0XzFfMw==_animatedV5_B5ba15f1441eb212ac5bd24a34fe4d2ea.webp?tag=1-1624801418-xpcwebhome-0-zrchwxjjfj-9cdc6013a98b6820&clientCacheKey=3xz87kc6pfttdme_animatedV5.webp&di=702098e0&bp=14944"
alt="">
<p>等车的正确方式</p>
<i class="iconfont icon-xihuan"></i>
<span>27.8w喜欢</span>
</li>
</ul>
</div>
<div class="kuaishourebang">
<h2 class="kuaishourebang_top_left">快手热榜</h2>
<div class="kuaishourebang_top_right">
<i class="iconfont icon-zuo"></i>
<p>1/15</p>
<i class="iconfont icon-you"></i>
</div>
<ul class="kuaishourebang_bottom">
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
<li>
<img src="./img/快手热榜1.png" alt="">
<p>七一勋章颁授仪式将隆重举行</p>
<i class="iconfont icon-08"></i>
<span>1907.2w热度</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,273 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head">
<div class="container">
<div class="head_left">
<img src="./img/it logo.png" alt="">
<ul>
<li>首页</li>
<li>IT圈</li>
<li>辣品</li>
</ul>
</div>
<ul class="head_right">
<li>设置</li>
<li>投稿</li>
<li>订阅</li>
<li>媒体应用</li>
<li>登录</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<ul class="content_title">
<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>业界</li>
<li>业界</li>
<li>业界</li>
<li>业界</li>
<li>业界</li>
<li>业界</li>
<li>业界</li>
<li>业界</li>
<li>业界</li>
</ul>
<div class="sousuo">
<div class="sousuo_kuang">
<input type="text" placeholder="请输入关键字" name="" id="">
<button>搜索</button>
</div>
<div class="resou">
<a href="">区块链</a>
<a href="">win11</a>
<a href="">win11下载</a>
<a href="">微信</a>
</div>
</div>
<div class="gonggao">
<a href="">
<img src="./img/IT_1.png" alt="">
高通发布骁龙 888 Plus 5G 移动平台
</a>
<a href="">
<img src="./img/IT_1.png" alt="">
苹果将推出比 12.9 英寸更大的 iPad Pro
</a>
</div>
<div class="content_left">
<div class="content_left_banner">
<img src="https://img.ithome.com/newsuploadfiles/focus/c2d561e0-e8d6-460d-af88-a8c2d6ae54bf.png"
alt="">
</div>
<div class="chanping">
<ul class="chanping_top">
<li class="ruanmeichanping">软媒产品</li>
<li class="changyongziyuan">常用资源</li>
</ul>
<ul class="chanping_bottom">
<li>
<img src="https://img.ithome.com/img/soft/zhm.svg" alt="">
<p>最会买最会买App(返利+神券)</p>
<img src="https://img.ithome.com/images/svg/down_btn4.svg" alt="">
</li>
<li>
<img src="https://img.ithome.com/img/soft/zhm.svg" alt="">
<p>最会买最会买App(返利+神券)</p>
<img src="https://img.ithome.com/images/svg/down_btn4.svg" alt="">
</li>
<li>
<img src="https://img.ithome.com/img/soft/zhm.svg" alt="">
<p>最会买最会买App(返利+神券)</p>
<img src="https://img.ithome.com/images/svg/down_btn4.svg" alt="">
</li>
<li>
<img src="https://img.ithome.com/img/soft/zhm.svg" alt="">
<p>最会买最会买App(返利+神券)</p>
<img src="https://img.ithome.com/images/svg/down_btn4.svg" alt="">
</li>
<li>
<img src="https://img.ithome.com/img/soft/zhm.svg" alt="">
<p>最会买最会买App(返利+神券)</p>
<img src="https://img.ithome.com/images/svg/down_btn4.svg" alt="">
</li>
<li>
<div class="chanping_more">
软媒全部产品 >>
</div>
</li>
</ul>
</div>
<div class="bangdan">
<ul class="bang">
<li>日榜</li>
<li>周榜</li>
<li>月榜</li>
</ul>
<ul class="bang_list">
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
<li>
<img src="./img/bangdan_1.png" alt="">
<p>Win11 预览版即将到来:即使不满足最低硬件要求</p>
</li>
</ul>
</div>
</div>
<div class="content_right">
<div class="content_right_top">
<ul class="content_right_top_left">
<li>最新</li>
<li>博客版</li>
<li>新闻日历</li>
<li>
<img class="content_right_top_middle" src="./img/IT_i love.png" alt="">
</li>
</ul>
<p class="content_right_top_right">今日129篇/11350评</p>
</div>
<ul class="content_right_bottom_left">
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
</ul>
<ul class="content_right_bottom_right">
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
<li>
<p>美国 FAA 推迟波音 777X 认证,表示其可能需要更多的飞行测试</p>
<span>22:18 </span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,10 @@
1:https://weibo.com/
2:https://www.kuaishou.com/
3:https://wan.baidu.com/home?idfrom=4087
4:https://www.zhihu.com/explore
5:https://xueshu.baidu.com/
6:https://www.ithome.com/
7:https://www.foxmail.com/
8:https://www.douyu.com/
9:https://aiqicha.baidu.com/
10:https://www.zhipin.com/hefei/

View File

@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快手</title>
</head>
<body>
<div class="head">
<div class="conteiner">
<img class="logo" src="" alt="">
<div class="search">
<input type="text" name="" id="">
<div class="sousuo">
<i></i>
<span>搜索</span>
</div>
</div>
<div class="head_right">
<ul>
<li>
<i></i>
<p>上传视频</p>
</li>
<li>
<i></i>
<p>上传视频</p>
</li>
</ul>
<img src="" alt="">
</div>
</div>
</div>
<div class="content">
<div class="banner">
<img src="" alt="">
</div>
<div class="gonggao">
<ul class="container">
<li>
<i></i>
<span>我的关注</span>
</li>
<li>
<i></i>
<span>我的关注</span>
</li>
<li>
<i></i>
<span>我的关注</span>
</li>
<li>
<i></i>
<span>我的关注</span>
</li>
<li>
<i></i>
<span>我的关注</span>
</li>
<li>
<i></i>
<span>我的关注</span>
</li>
<li>
<i></i>
<span>我的关注</span>
</li>
<li>
<i></i>
<span>我的关注</span>
</li>
</ul>
</div>
<div class="video">
<div class="container">
<div class="video_left">
<div class="duanship_top">
<div class="duanship_top_left">
<h2>精彩短视屏</h2>
<div class="duanshiping_top_left_more">
<span>更多</span>
<i></i>
</div>
</div>
<div class="duanship_top_right">
<i></i>
<span>1/15</span>
<i></i>
</div>
</div>
<ul class="duanshiping_bottom">
<li>
<img src="" alt="">
<p>心疼这个孩子</p>
<div class="duanshiping_bottom_text">
<i></i>
<span>41.4W喜欢</span>
</div>
</li>
</ul>
</div>
<div class="video_right">
<div class="kuaishourebang_top">
<p class="kuaishourebang_top_left">快手热榜</p>
<div class="kuaishourebang_top_right">
<i></i>
<span>1/15</span>
<i></i>
</div>
</div>
<ul class="kuaishourebang_bottom">
<li>
<img src="" alt="">
<div class="kuaishourebang_text">
<p> 七一勋章颁授仪式隆重举行 </p>
<div class="kuaishourebang_text_like">
<i></i>
<span>1219.8W热度</span>
</div>
</div>
<div class="re">
<img src="" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="foot"></div>
</body>
</html>

View File

@@ -0,0 +1,131 @@
<!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>weibo</title>
</head>
<body>
<div class="head">
<div class="container">
<div class="head_left">
<img src="logo" alt="">
<div class="search">
<input type="text">
<i></i>
</div>
</div>
<ul class="head_right">
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
<li class="zhuce">
<span>注册</span>
<span>|</span>
<span>登录</span>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<div class="content_left">
<ul class="menu">
<li>热门</li>
<li>热门</li>
<li>热门</li>
</ul>
</div>
<div class="content_cen">
<div class="rotation">
<div class="big_img">
<img src="" alt="">
</div>
<ul class="little_img">
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
<div class="news">
<img src="" alt="">
<p>abababababab</p>
<div class="news_text">
<div class="news_text_left">
<img src="" alt="">
<span>人民日报</span>
<span>今天</span>
<span>07:43</span>
</div>
<ul class="news_text_right">
<li>
<i></i>
<span>8044</span>
</li>
</ul>
</div>
</div>
</div>
<div class="content_right">
<div class="denglu">
<div class="denglukuang">
<ul class="denglukuang_top">
<li>账号登录</li>
<li>账号登录</li>
</ul>
<div class="denglukuang_content">
<div class="zhanghao">
<i></i>
<input type="text">
</div>
<div class="mima">
<i></i>
<input type="text">
</div>
<input type="checkbox" name="" id="">
<span>记住我</span>
<div class="wangjimima">忘记密码</div>
<div class="denglu">
登录
</div>
<p>还没有微博?
<span>立即注册!</span>
</p>
</div>
<div class="denglukuang_foot">
<div class="qita">
<span></span>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head">
<div class="container">
<div class="head_left">
<img src="" alt="">
<div class="city">
<i></i>
<span>合肥</span>
<span>[切换城市]</span>
</div>
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<ul class="head_right">
<li>上传简历</li>
<li class="上传">
上传简历
<span></span>
</li>
<li>上传简历</li>
</ul>
<div class="zhuce">
注册
</div>
<div class="denglu">
登录
</div>
</div>
</div>
<div class="content">
<div class="list1">
<div class="daohang">
<div class="container">
<img class="daohang_left" src="" alt="">
<div class="daohang_right">
<img src="" alt="">
<div class="search">
<img src="" alt="">
<input class="输入" type="text">
<div class="yanzhengma">
<input type="text">
<div class="huoqu">获取</div>
</div>
<div class="denglu">
登录/注册
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list2">
<div class="container">
</div>
</div>
</div>
<div class="foot"></div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,244 @@
.head{
width: 7.5rem;
height: 4.71rem;
background: url(../img/120img/背景2.png);
background-size: cover;
}
.head_top{
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 0.36rem ;
padding-left: 0.26rem;
}
.head_top img{
margin-top: 0.83rem;
width: 0.26rem;
height: 0.27rem;
}
.zijin{
margin-top: 0.77rem;
width: 1.36rem;
font-size: 0.34rem;
color: #ffffff;
margin-left: 1.1rem;
}
.shouzhi{
margin-top: 0.78rem;
width: 1.36rem;
font-size: 0.34rem;
color: #ffffff;
}
.head_bottom{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0.53rem;
}
.head_bottom p{
font-size: 0.24rem;
color: #ffffff;
}
.head_bottom h2{
font-size: 0.86rem;
color: #ffffff;
}
.head_bottom .tixian{
width: 2.41rem;
height: 0.71rem;
background-color: #ffffff;
border-radius: 0.355rem;
opacity: 0.8;
font-size: 0.32rem;
color: #2692ff;
text-align: center;
line-height: 0.71rem;
}
.content{
height: 8.63rem;
background-color: rgb(238, 238, 243);
position: relative;
}
.income{
width: 6.94rem;
height: 3.02rem;
background-color: #ffffff;
border-radius: 0.1rem;
margin: 0 auto;
margin-top: -0.41rem;
margin-left: 0.27rem;
position: absolute;
}
.income_top{
display: flex;
justify-content: space-evenly;
height: 1.51rem;
align-items: center;
position: relative;
}
.income_top::after{
content: "";
position: absolute;
width: 6.31rem;
height: 0.01rem;
background-color: #f4f4f7;
margin-top: 1.5rem;
}
.income_top li{
display: flex;
flex-direction: column;
text-align: center;
}
.income_top .leijishouru::after{
content: "";
position: absolute;
width: 0.01rem;
height: 0.91rem;
background-color: #ececf2;
margin-left: -0.66rem
}
.income_bottom{
display: flex;
justify-content: space-evenly;
height: 1.51rem;
align-items: center;
position: relative;
}
.income_bottom li{
display: flex;
flex-direction: column;
text-align: center;
}
.leijizhichu::after{
content: "";
position: absolute;
width: 0.01rem;
height: 0.91rem;
background-color: #ececf2;
margin-left: -0.66rem
}
.income_top li p{
font-size: 0.24rem;
line-height: 0.42rem;
color: #646464;
}
.income_top li span{
font-size: 0.34rem;
line-height: 0.42rem;
color: #333333;
}
.income_bottom li p{
font-size: 0.24rem;
line-height: 0.42rem;
color: #646464;
}
.income_bottom li span{
font-size: 0.34rem;
line-height: 0.42rem;
color: #333333;
}
.cash{
position: absolute;
bottom: 2.33rem;
margin-left: 0.27rem;
}
.cash_top{
font-size: 0.34rem;
color: #333333;
margin-bottom: 0.31rem;
}
.cash_bottom{
width: 6.94rem;
height: 2.38rem;
background-color: #ffffff;
border-radius: 0.1rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.weixin{
width: 3.01rem;
height: 1.2rem;
background-color: #ffffff;
border-radius: 0.05rem;
border: solid 0.01rem #d9e1e9;
display: flex;
justify-content: center;
align-items: center;
}
.active{
border: solid 0.01rem #74b9ff !important;
}
.yinhangka{
width: 3.01rem;
height: 1.2rem;
background-color: #ffffff;
border-radius: 0.05rem;
border: solid 0.01rem #d9e1e9;
display: flex;
justify-content: center;
align-items: center;
}
.cash_bottom img{
width: 0.6rem;
height: 0.6rem;
margin-right: 0.21rem;
}
.cash_bottom span{
font-size: 0.28rem;
line-height: 0.42rem;
color: #333333;
}
.foot{
position: fixed;
width: 100%;
height: 1rem;
background-color: #ffffff;
bottom: 0;
left: 0;
}
.tixian{
width: 6.8rem;
height: 0.8rem;
background-color: #5697f4;
border-radius: 0.4rem;
font-size: 0.34rem;
line-height: 0.42rem;
color: #eeeef3;
text-align: center;
line-height: 0.8rem;
margin: 0 auto;
margin-top: 0.1rem;
}

View File

@@ -0,0 +1,118 @@
.content{
width: 100%;
color: #fff;
position: relative;
padding-bottom: 2.95rem;
}
.head_left{
height: 0.9rem;
}
.head_left img{
width: 0.2rem;
height: 0.35rem;
position: absolute;
margin-top: 0.67rem;
margin-left: 0.21rem;
}
.zhuce{
margin-top: 1.78rem;
margin-left: 0.62rem;
margin-right: 0.6rem;
}
.zhuce h2{
font-size: 0.54rem;
font-weight: bold;
color: #000000;
margin-bottom: 1.25rem;
}
.yanzhengma_text{
margin-left: 0.68rem;
width: 1.38rem;
height: 0.52rem;
background-color: #f2f6f9;
border-radius: 0.26rem;
font-size: 0.24rem;
color: #555555;
text-align: center;
line-height: 0.52rem;
}
.zhuce_bottom input{
border: none;
font-size: 0.28rem;
width: 3.4rem;
}
.zhuce_bottom li{
margin-bottom: 0.65rem;
display: flex;
align-items: center;
}
.zhuce_bottom li:last-child{
margin-bottom: 0;
}
.zhuce_bottom{
position: relative;
}
.zhuce_bottom li::after{
content: "";
width: 6.3rem;
height: 0.01rem;
background-color: #d9e2e9;
position: absolute;
margin-top: 0.96rem;
}
.zhuce_bottom li img{
margin-right: 0.3rem;
}
.shouji{
width: 0.3rem;
height: 0.42rem;
background-color: #a4b8d4;
border-radius: 0.02rem;
border: solid 0.02rem #a4b8d4;
}
.yanzheng{
width: 0.32rem;
height: 0.24rem;
background-color: #a4b8d4;
border-radius: 0.04rem;
}
.mima{
width: 0.3rem;
height: 0.36rem;
}
.xieyi {
display: flex;
justify-content: flex-start;
margin-top: 0.65rem;
align-items: center;
}
.xieyi input{
width: 0.18rem;
height: 0.18rem;
margin-right: 0.12rem;
background-color: #79c9ff;
}
.xieyi p{
font-size: 0.2rem;
color: #333333;
}
.xieyi p span{
font-size: 0.2rem;
color: #79c9ff;
}
.now{
width: 6.3rem;
height: 0.98rem;
background-color: #5697f4;
border-radius: 0.49rem;
font-size: 0.34rem;
line-height: 0.36rem;
color: #ffffff;
text-align: center;
line-height: 0.98rem;
margin-top: 0.53rem;
}

View File

@@ -0,0 +1,317 @@
.head{
height: 0.9rem;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.head::after{
content: "";
position: absolute;
width: 7.5rem;
height: 0.02rem;
background-color: #d9e2e9;
margin-top: 0.8rem;
}
.head_left,.head_middle,.head_right{
width: 1.36rem;
height: 0.33rem;
}
.head_left img{
width: 0.2rem;
height: 0.33rem;
margin-left: 0.3rem;
}
.head p{
font-size: 0.34rem;
color: #333333;
margin-top: -5px;
}
.content{
background-color: #f2f2f2;
}
.xinxi{
height: 1.26rem;
padding: 0 0.3rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
}
.xinxi_left_top{
display: flex;
margin-bottom: 0.17rem;
}
.xinxi_left_top p{
font-size: 0.3rem;
color: #333333;
margin-right: 0.52rem;
}
.xinxi_left_bottom{
font-size: 0.24rem;
color: #333333;
}
.xinxi_right img{
width: 0.14rem;
height: 0.26rem;
}
.zhifu{
height: 0.84rem;
background-color: #ffffff;
border-radius: 0.1rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.19rem;
margin-bottom: 0.16rem;
}
.zhifu p{
font-size: 0.28rem;
color: #333333;
}
.zhifu_left{
margin-left: 0.26rem;
}
.zhifu_right{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 0.43rem;
}
.zhifu_right img{
width: 0.31rem;
height: 0.06rem;
}
.jiesuan li{
margin-top: 0.16rem;
}
.jiesuan_name{
height: 0.62rem;
line-height: 0.62rem;
background-color: #ffffff;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 0.24rem;
margin-bottom: 0.02rem;
}
.jiesuan_name .xiaodianpu{
width: 0.24rem;
height: 0.22rem;
}
.jiesuan_name p{
font-size: 0.26rem;
color: #333333;
margin-left: 0.06rem;
margin-right: 0.16rem;
}
.jiesuan_name .right{
width: 0.1rem;
height: 0.19rem;
}
.juesuan_chanping{
background-color: #ffffff;
}
.juesuan_chanping li{
margin-top: 0;
}
.juesuan_chanping_list{
height: 2.22rem;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 0.24rem;
padding-right: 0.76rem;
}
.juesuan_chanping_left img{
width: 2rem;
height: 1.65rem;
border-radius: 0.06rem;
margin-right: 0.36rem;
}
.juesuan_chanping_right{
width: 4.1rem
}
.juesuan_chanping_right_text{
width: 3.18rem;
font-size: 0.28rem;
color: #333333;
}
.shuxing{
display: flex;
align-items: center;
}
.shuxing p{
font-size: 0.2rem;
color: #999999;
margin-right: 0.36rem;
}
.jiage{
display: flex;
justify-content: space-between;
align-items: center;
}
.jiage_left .fuhao{
font-size: 0.2rem;
color: #ea4e3d;
}
.jiage_left .qiansan{
font-size: 0.34rem;
color: #ea4e3d;
}
.jiage_left .housan{
font-size: 0.24rem;
color: #ea4e3d;
}
.jiage_right{
font-size: 0.2rem;
color: #999999;
}
.beizhu{
height: 0.88rem;
background-color: #ffffff;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 0.3rem;
margin: 0.02rem 0;
}
.beizhu p{
font-size: 0.3rem;
color: #333333;
margin-right: 0.31rem;
}
.beizhu input{
width: 4.9rem;
border: none;
}
.jianmian{
height: 1.08rem;
background-color: #ffffff;
padding: 0 0.3rem;
line-height: 0.54rem;
}
.jianmian li{
margin-top: 0rem;
}
.jianmian_youhui{
display: flex;
justify-content: space-between;
align-items: center;
}
.jianmian_youhui p{
font-size: 0.24rem;
color: #333333;
}
.jianmian_youhui span{
font-size: 0.24rem;
color: #f09c48;
}
.jianmian_feiyong{
display: flex;
justify-content: space-between;
align-items: center;
}
.jianmian_feiyong p{
font-size: 0.24rem;
color: #333333;
}
.jianmian_feiyong span{
font-size: 0.24rem;
color: #333333;
}
.jiner{
height: 0.84rem;
background-color: #ffffff;
border-radius: 0rem 0rem 0.1rem 0.1rem;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.31rem;
padding-right: 0.26rem;
margin-top: 0.02rem;
}
.jiner p{
font-size: 0.3rem;
color: #333333;
}
.jiner span{
font-size: 0.34rem;
color: #ea4e3d;
}
.foot{
position: fixed;
bottom: 0;
left: 0;
width: 7.5rem;
height: 0.92rem;
background-color: #ffffff;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 0.22rem;
}
.foot_text{
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.1rem;
}
.foot_text p{
font-size: 0.26rem;
color: #c6c6c6;
margin-right: 0.14rem;
}
.foot_text span{
font-size: 0.26rem;
color: #999999;
}
.foot_money{
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.42rem;
}
.foot_money p{
font-size: 0.3rem;
color: #000000;
}
.foot_money span{
font-size: 0.24rem;
color: #000000;
}
.foot_jiesuan{
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
font-size: 0.28rem;
line-height: 0.66rem;
color: #ffffff;
text-align: center;
margin-right: 0.24rem;
}

View File

@@ -0,0 +1,184 @@
.header{
width: 7.5rem;
height: 5.5rem;
background: url(../img/46img/timg.png);
background-size: cover;
}
.head_top{
padding: 0.1rem;
display: flex;
justify-content: center;
align-items: center;
}
.head_top li{
margin-left: 0.16rem;
}
.head_top li a{
font-size: 0.36rem;
color: #ffffff;
margin-right: 0.2rem;
}
.camera img{
position: fixed;
right: 0.43rem;
top: 0.81rem;
width: 0.62rem;
height: 0.48rem;
}
.content{
padding: 0.42rem 0.41rem 0rem 0.24rem;
}
.dianpuxuanchuan .dianpu{
margin-bottom: 0.52rem;
}
.dianpuxuanchuan li:last-child{
margin-bottom: 0;
}
.dianpu{
display: flex;
}
.dianpu_left{
position: relative;
margin-right: 0.23rem;
}
.tubiao{
position: absolute;
right: 0;
top: 0.64rem;
}
.dianputouxiang{
width: 0.86rem;
height: 0.86rem;
}
.dianputubiao{
width: 0.27rem;
height: 0.29rem;
background-color: #ea4e3d;
border-radius: 0.05rem;
}
.dianpu_right_name{
display: flex;
justify-content: space-between;
align-items: center;
}
.dianpu_right_name p{
font-size: 0.3rem;
color: #5a6f92;
}
.dianpu_right_name span{
font-size: 0.24rem;
color: #999999;
}
.dianpu_right_text {
font-size: 0.24rem;
line-height: 0.36rem;
color: #686868;
}
.dianpu_right_show{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.25rem;
}
.dianpu_right_show img{
width: 1.85rem;
height: 1.85rem;
background-color: #ffffff;
}
.yinying{
height: 0.4rem;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: -0.4rem;
width: 1.85rem;
height: 0.4rem;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(0, 0, 0));
opacity: 0.8;
}
.yinying img{
width: 0.12rem;
height: 0.16rem;
}
.yinying .money{
font-size: 0.24rem;
line-height: 0.36rem;
color: #ffffff;
}
.yinying .dian{
font-size: 0.24rem;
color: #ffffff;
}
.yinying .zero{
zoom: 0.85;
font-size: 0.2rem;
color: #ffffff;
margin-right: 0.09rem;
margin-top: 4px;
}
.time{
display: flex;
justify-content: space-between;
margin-top: 0.28rem;
}
.time_left{
display: flex;
justify-content: flex-start;
}
.time_left p{
font-size: 0.24rem;
color: #989898;
}
.time_left span{
font-size: 0.2rem;
color: #989898;
}
.time img{
margin-top: 0.06rem;
margin-right: 0.19rem;
width: 0.34rem;
height: 0.26rem;
}
.commentary{
width: 5.7rem;
height: 1.97rem;
background-color: #f7f7f7;
border-radius: 0.1rem;
margin-top: 0.36rem;
}
.commentary_top{
height: 0.77rem;
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 0.28rem;
}
.commentary_top img {
width: 0.29rem;
height: 0.26rem;
margin-right: 0.22rem;
}
.commentary_top p{
font-size: 0.3rem;
color: #5a6f92;
}
.commentary_bottom{
height: 1.19rem;
}
.commentary_bottom_list{
display: flex;
margin-left: 0.27rem;
}
.commentary_bottom p{
font-size: 0.3rem;
color: #5a6f92;
}
.commentary_bottom span{
font-size: 0.3rem;
color: #0e0e0e;
}

View File

@@ -0,0 +1,212 @@
.content{
width: 100%;
height: 100Vh;
height: 13.34rem;
background: url(../img/58img/back.png);
background-size: cover;
padding-top: 0.02rem;
}
.ziliao{
width: 4.32rem;
height: 0.8rem;
background-color: #00000047;
border-radius: 0.4rem;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 0.12rem;
margin-left: 0.24rem;
}
.ziliao .ziliao_left{
width: 0.7rem;
height: 0.7rem;
border-radius: 100%;
}
.ziliao_middle{}
.ziliao_middle p{
font-size: 0.26rem;
color: #ffffff;
}
.ziliao_middle span{
font-size: 0.22rem;
color: #ffffff;
}
.ziliao_right{
width: 1.05rem;
height: 0.45rem;
background-color: rgb(234 78 61);
border-radius: 0.4rem;
text-align: center;
line-height: 0.45rem;
}
.ziliao_right img{
width: 0.34rem;
height: 0.24rem;
}
.ziliao_right span{
font-size: 0.24rem;
color: #ffffff;
}
.shangping{
width: 7.5rem;
height: 2.7rem;
background-color: #ffffff45;
position: fixed;
bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
}
.shangping li{
width: 1.65rem;
height: 2.36rem;
background-color: #ffffff90;
border-radius: 0.1rem;
margin-left: 0.1rem;
}
.shangping li:last-child{
width: 0.26rem;
height: 1.4rem;
background-color: #ffffff00;
}
.shangping_list img{
width: 1.65rem;
height: 1.65rem;
background-color: #ffffff;
border-radius: 0.1rem 0.1rem 0rem 0rem;
}
.shangping_list p{
width: 1.22rem;
font-size: 0.2rem;
color: #000000;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.shangping_list span{
width: 0.87rem;
font-size: 0.2rem;
color: #ea4e3d;
}
.shangping_text p{
margin-left: 0.13rem;
margin-bottom: 0.06rem;
margin-top: 0.08rem;
}
.shangping_text span{
margin-left: 0.13rem;
margin-bottom: 0.01rem;
}
.you img{
width: 0.26rem;
height: 1.45rem;
}
.fudong{
position: fixed;
left: 0.21rem;
bottom: 3.3rem;
}
.guanzhu{
width: 3.5rem;
height: 0.5rem;
background-color: #4799ee60;
border-radius: 0.1rem;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.31rem;
}
.guanzhu img{
width: 0.34rem;
height: 0.24rem;
}
.guanzhu p{
font-size: 0.26rem;
color: #ffffff;
}
.liaotian li{
margin-bottom: 0.13rem;
}
.liaotian_list{
width: 3.24rem;
height: 0.5rem;
background-color: #000000;
border-radius: 0.25rem;
opacity: 0.4;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 0.23rem;
}
.liaotian_list p{
font-size: 0.26rem;
color: #4799ee;
}
.liaotian_list span{
font-size: 0.26rem;
color: #ffffff;
}
.foot{
position: fixed;
width: 100%;
height: 1rem;
bottom: 0;
background-color: #ffffff35;
display: flex;
align-items: center;
}
.foot input{
width: 3.59rem;
height: 0.62rem;
background-color: #000000;
border-radius: 0.31rem;
opacity: 0.4;
color: #ffffff;
padding-left: 0.25rem;
margin-left: 0.12rem;
}
.foot input::placeholder {
font-size: 0.28rem;
color: #ffffff;
opacity: 0.74;
}
.dianputu{
width: 0.63rem;
height: 0.63rem;
background-color: #4799ee;
border-radius: 100%;
opacity: 0.45;
}
.foot img{
width: 0.63rem;
height: 0.63rem;
background-color: #000000;
border-radius: 100%;
opacity: 0.4;
margin-left: 0.13rem;
}

View File

@@ -0,0 +1,42 @@
.clear_size {
font-size: 0;
}
/* footer */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 1rem;
background-color: #000000;
display: flex;
align-items: center;
justify-content: space-around;
}
.footer ul li{
}
.footer li a{
font-size: 0.24rem;
color: #ffffff;
}
.footer .active{
position: relative;
}
.footer .active a{
font-size: 0.3rem;
}
.footer .active::after{
content: "";
position: absolute;
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
bottom: -0.26rem;
left: 50%;
transform: translateX(-50%);
}
/* footer结束 */

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 964 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 740 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1004 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 674 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

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>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index120.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div class="head clear_size">
<div class="head_top">
<img class="left" src="./img/120img/左.png" alt="">
<span class="zijin">资金管理</span>
<span class="shouzhi">收支明细</span>
</div>
<div class="head_bottom">
<p>账户余额(元)</p>
<h2>2314.11</h2>
<div class="tixian">提现记录</div>
</div>
</div>
<div class="content clear_size">
<div class="income">
<ul class="income_top">
<li class="jinrishouru">
<p>今日收入(元)</p>
<span>0.00</span>
</li>
<li class="leijishouru">
<p>累计收入(元)</p>
<span>0.00</span>
</li>
</ul>
<ul class="income_bottom">
<li class="dengdaijiesuan">
<p>等待结算(元)</p>
<span>0.00</span>
</li>
<li class="leijizhichu">
<p>累计支出(元)</p>
<span>0.00</span>
</li>
</ul>
</div>
<div class="cash">
<p class="cash_top">提现方式</p>
<ul class="cash_bottom">
<li class="weixin active">
<img src="./img/120img/微信.png" alt="">
<span>微信</span>
</li>
<li class="yinhangka">
<img src="./img/120img/银行卡拷贝.png" alt="">
<span>银行卡</span>
</li>
</ul>
</div>
<div class="foot">
<div class="tixian">申请提现</div>
</div>
</div>
</body>
</html>

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>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index130.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div class="content clear_size">
<div class="head_left">
<img src="./img/130img/左.png" alt="">
</div>
<div class="zhuce">
<h2 class="zhuce_top">注册</h2>
<ul class="zhuce_bottom input">
<li>
<img class="shouji" src="./img/130img/手机.png" alt="">
<input type="text" placeholder="填写手机号" name="" id="">
</li>
<li>
<img class="yanzheng" src="./img/130img/验证码.png" alt="">
<input type="text" placeholder="手机验证码" name="" id="">
<div class="yanzhengma_text">验证码</div>
</li>
<li>
<img class="mima" src="./img/130img/密码.png" alt="">
<input type="text" placeholder="设置登录密码" name="" id="">
</li>
<li>
<img class="mima" src="./img/130img/密码.png" alt="">
<input type="text" placeholder="再次确认密码" name="" id="">
</li>
</ul>
<div class="xieyi">
<input type="checkbox" name="" value="">
<p>
我已阅读并同意
<span>《用户协议和隐私协议》</span>
</p>
</div>
<div class="now">
立即注册
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index22.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div class="head clear_size">
<div class="head_left">
<img src="./img/22img/返回.png" alt="">
</div>
<p class="head_middle">填写订单</p>
<div class="head_right"></div>
</div>
<div class="content clear_size">
<div class="xinxi">
<div class="xinxi_left">
<div class="xinxi_left_top">
<p>张晓明</p>
<p>186****0019</p>
</div>
<div class="xinxi_left_bottom">
上海市黄浦区中山南路128号千古美城1楼1210室
</div>
</div>
<div class="xinxi_right">
<img src="./img/22img/右.png" alt="">
</div>
</div>
<div class="zhifu">
<p class="zhifu_left">选择支付方式</p>
<div class="zhifu_right">
<p>在线支付</p>
<img src="./img/22img/-e-三个点拷贝.png" alt="">
</div>
</div>
<ul class="jiesuan">
<li>
<div class="jiesuan_name">
<img class="xiaoduanpu" src="./img/22img/矢量智能对象.png" alt="">
<p>路易斯女装旗舰店</p>
<img class="right" src="./img/22img/右.png" alt="">
</div>
<ul class="juesuan_chanping">
<li class="juesuan_chanping_list">
<div class="juesuan_chanping_left">
<img src="./img/22img/-e-产品图拷贝.png" alt="">
</div>
<div class="juesuan_chanping_right">
<p class="juesuan_chanping_right_text">真丝连衣裙2019春夏新款杭州大牌气质修……</p>
<div class="shuxing">
<p class="yanse">颜色:黑白</p>
<p class="chicun">尺码:L</p>
</div>
<div class="jiage">
<div class="jiage_left">
<span class="fuhao">¥</span>
<span class="qiansan">160</span>
<span class="housan">.00</span>
</div>
<div class="jiage_right">
X1
</div>
</div>
</div>
</li>
</ul>
<div class="beizhu input">
<p>订单备注</p>
<input type="text" placeholder="有什么想对商家留言的可以在这里说" name="" id="">
</div>
<ul class="jianmian">
<li class="jianmian_youhui">
<p>优惠抵用</p>
<span>-¥5</span>
</li>
<li class="jianmian_feiyong">
<p>快递费用</p>
<span>免费包邮</span>
</li>
</ul>
<div class="jiner">
<p>商品金额</p>
<span>¥155.00</span>
</div>
</li>
<li>
<div class="jiesuan_name">
<img class="xiaoduanpu" src="./img/22img/矢量智能对象.png" alt="">
<p>路易斯女装旗舰店</p>
<img class="right" src="./img/22img/右.png" alt="">
</div>
<ul class="juesuan_chanping">
<li class="juesuan_chanping_list">
<div class="juesuan_chanping_left">
<img src="./img/22img/-e-产品图拷贝.png" alt="">
</div>
<div class="juesuan_chanping_right">
<p class="juesuan_chanping_right_text">真丝连衣裙2019春夏新款杭州大牌气质修……</p>
<div class="shuxing">
<p class="yanse">颜色:黑白</p>
<p class="chicun">尺码:L</p>
</div>
<div class="jiage">
<div class="jiage_left">
<span class="fuhao">¥</span>
<span class="qiansan">160</span>
<span class="housan">.00</span>
</div>
<div class="jiage_right">
X1
</div>
</div>
</div>
</li>
<li class="juesuan_chanping_list">
<div class="juesuan_chanping_left">
<img src="./img/22img/-e-产品图拷贝.png" alt="">
</div>
<div class="juesuan_chanping_right">
<p class="juesuan_chanping_right_text">真丝连衣裙2019春夏新款杭州大牌气质修……</p>
<div class="shuxing">
<p class="yanse">颜色:黑白</p>
<p class="chicun">尺码:L</p>
</div>
<div class="jiage">
<div class="jiage_left">
<span class="fuhao">¥</span>
<span class="qiansan">160</span>
<span class="housan">.00</span>
</div>
<div class="jiage_right">
X1
</div>
</div>
</div>
</li>
</ul>
<div class="beizhu input">
<p>订单备注</p>
<input type="text" placeholder="有什么想对商家留言的可以在这里说" name="" id="">
</div>
<ul class="jianmian">
<li class="jianmian_youhui">
<p>优惠抵用</p>
<span>-¥5</span>
</li>
<li class="jianmian_feiyong">
<p>快递费用</p>
<span>免费包邮</span>
</li>
</ul>
<div class="jiner">
<p>商品金额</p>
<span>¥155.00</span>
</div>
</li>
</ul>
</div>
<div class="foot">
<div class="foot_text">
<p>共3件,</p>
<span>合计:</span>
</div>
<div class="foot_money">
<span>¥</span>
<p>5999.00</p>
</div>
<div class="foot_jiesuan">结算(2)</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index46.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div class="header">
<ul class="head_top">
<li>
<a href="">圈子</a>
</li>
<li>
<a href="">附近</a>
</li>
</ul>
<div class="camera">
<img src="./img/46img/照相机.png" alt="">
</div>
</div>
<div class="content clear_size">
<ul class="dianpuxuanchuan">
<li class="dianpu">
<div class="dianpu_left">
<img class="dianputouxiang" src="./img/46img/店铺头像.png" alt="">
<div class="tubiao">
<img class="dianputubiao" src="./img/46img/店铺图标.png" alt="">
</div>
</div>
<div class="dianpu_right">
<div class="dianpu_right_name">
<p>护肤品专卖店</p>
<span>>200m</span>
</div>
<div class="dianpu_right_text">
我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲好用我亲测我亲测我亲测我亲测
</div>
<ul class="dianpu_right_show">
<li>
<div class="shangping">
<img src="./img/46img/86604拷贝.png" alt="">
<div class="yinying">
<img class="fuhao" src="./img/46img/人民币.png" alt="">
<span class="money">289.</span>
<span class="zero">00</span>
</div>
</div>
</li>
<li>
<div class="shangping">
<img src="./img/46img/86604拷贝.png" alt="">
<div class="yinying">
<img class="fuhao" src="./img/46img/人民币.png" alt="">
<span class="money">289.</span>
<span class="zero">00</span>
</div>
</div>
</li>
<li>
<div class="shangping">
<img src="./img/46img/86604拷贝.png" alt="">
<div class="yinying">
<img class="fuhao" src="./img/46img/人民币.png" alt="">
<span class="money">289.</span>
<span class="zero">00</span>
</div>
</div>
</li>
</ul>
<div class="time">
<div class="time_left">
<p>3</p>
<span>分钟前</span>
</div>
<img src="./img/46img/更多.png" alt="">
</div>
<div class="commentary">
<div class="commentary_top">
<img src="./img/46img/心.png" alt="">
<p>张三 、李</p>
</div>
<ul class="commentary_bottom">
<li class="commentary_bottom_list">
<p>小可</p>
<span>:精彩</span>
</li>
<li class="commentary_bottom_list">
<p>小可</p>
<span>:精彩</span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<ul class="footer clear_size">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">好友</a>
</li>
<li class="active">
<a href="">圈子</a>
</li>
<li>
<a href="">购物车</a>
</li>
<li>
<a href="">我的</a>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index58.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div class="content clear_size">
<div class="ziliao">
<img class="ziliao_left" src="./img/58img/头像.png" alt="">
<div class="ziliao_middle">
<p>昵称 | ID:12345</p>
<span>7455观看| 首尔市 </span>
</div>
<div class="ziliao_right">
<img src="./img/58img/关注.png" alt="">
<span>关注</span>
</div>
</div>
<ul class="shangping">
<li class="shangping_list">
<img src="./img/58img/-e-产品图.png" alt="">
<div class="shangping_text">
<p>品牌经典多…</p>
<span>¥160.00</span>
</div>
</li>
<li class="shangping_list">
<img src="./img/58img/商品.png" alt="">
<div class="shangping_text">
<p>品牌经典多…</p>
<span>¥160.00</span>
</div>
</li>
<li class="shangping_list">
<img src="./img/58img/-e-产品图.png" alt="">
<div class="shangping_text">
<p>品牌经典多…</p>
<span>¥160.00</span>
</div>
</li>
<li class="shangping_list">
<img src="./img/58img/-e-产品图.png" alt="">
<div class="shangping_text">
<p>品牌经典多…</p>
<span>¥160.00</span>
</div>
</li>
<li class="you">
<img class="zuo" src="./img/58img/-e-向右滑动拷贝.png" alt="">
</li>
</ul>
<div class="fudong">
<div class="guanzhu">
<img src="./img/58img/关注.png" alt="">
<p>我是嘟嘟嘴 关注了主播</p>
</div>
<ul class="liaotian">
<li>
<div class="liaotian_list">
<p>小飞仙:</p>
<span>我下单啦查看下</span>
</div>
</li>
<li>
<div class="liaotian_list">
<p>小飞仙:</p>
<span>我下单啦查看下</span>
</div>
</li>
</ul>
</div>
</div>
<div class="foot">
<img class="dianputu" src="./img/58img/店铺.png" alt="">
<input type="text" placeholder="说些什么..." name="" id="">
<img class="fenxiang" src="./img/58img/分享.png" alt="">
<img class="dianzan" src="./img/58img/点赞.png" alt="">
<img class="guanbi" src="./img/58img/关闭.png" alt="">
</div>
</body>
</html>

View File

@@ -0,0 +1,12 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
height: 100vh;
position: relative;
overflow: hidden;
}
.text {
position: absolute;
}
</style>
</head>
<body>
</body>
<script>
// var height = document.body.clientHeight,
// width = document.body.clientWidth
function CreatedAiGuo() {
var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"]
var span = document.createElement("span")
span.innerText = text[index];
var x=parseInt(Math.random()*width)
var y=parseInt(Math.random()*height)
span.className="span"
span.style.left=`${x}px`
span.style.top=`${y}px`
$("body").appendChild(span)
}
setInterval(function () {
CreatedAiGuo()
}, 1000);
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.main{
width: 520px;
height: 280px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.dot{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot li{
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
}
.dot .active{
background: red;
}
.swiper{
position: relative;
display: flex;
}
.action{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.but{
color: #fff;
font-size: 40px;
}
</style>
</head>
<body>
<div class="main">
<div class="swiper" style="left: 0px;">
<div class="swiper_item">
<img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg"
alt="">
</div>
<div class="swiper_item">
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
</div>
<div class="swiper_item">
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
</div>
</div>
<div class="action">
<div class="but prev">&lt;</div>
<div class="but next">&gt;</div>
</div>
<ul class="dot">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,72 @@
var time = null;
$(".next").onclick = () => {
motion(-520)
}
$(".prev").onclick = () => {
motion(520)
}
_(".dot li").forEach((v, i) => {
v.onclick = function () {
changeDot(i)
}
});
function changeDot(index) {
var liArr = _(".dot li")
liArr.forEach((item) => {
item.classList.remove("active")
})
liArr[index].classList.add("active")
set_Left(index * -520)
}
function motion(offset) {
var totalOffset = left() + offset
if (totalOffset < -1040) {
totalOffset = 0
}
if (totalOffset > 0) {
totalOffset = -1040
}
set_Left(totalOffset)
changeDot(totalOffset / -520)
}
function autoPlay() {
time = setInterval(() => {
$(".next").onclick()
}, 1000);
}
$(".main").onmouseover = () => {
clearInterval(time)
}
$(".main").onmouseout = () => {
autoPlay()
}
autoPlay()
function set_Left(offset) {
$(".swiper").style.left = `${offset}px`;
}
function left() {
return parseInt($(".swiper").style.left)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}

View File

@@ -0,0 +1,66 @@
class Ajax {
//请求方式不一样
//请求参数不一样
//请求地址不一样
constructor() {
this.ajax = new XMLHttpRequest()
}
get(params) {
var str = ""
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
this.ajax.open("GET", params.url + str)
this.ajax.send();
this.statechange(params)
}
post() {
this.open("POST", "http://127.0.0.1/index.php")
}
statechange (params) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
switch (data.status) {
case 200:
params.success(data.result)
break;
case 404:
alert(data.msg)
throw new Error(data.msg)
break;
}
//
} else {
params.error(this.ajax)
}
}
}
}
}
var ajax = new Ajax()

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>最新推荐</h2>
<ul></ul>
</body>
<script src="./ajax.js"></script>
<script>
function getIndex() {
ajax.get({
url: `http://127.0.0.1:3000/api/json/info`,
data: {},
success: (res) => {
console.log(res);
render(res)
},
error: (err) => {
console.log("请求出错:", err);
}
});
}
function render(result) {
result.recommended.data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">
<p>${v.title}</p>
<img src="${v.preview}" alt="">
</a>
</li>
`
});
}
getIndex()
</script>
</html>

View File

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

View File

@@ -0,0 +1,31 @@
.content{
margin-top: 45px;
}
.default{
margin-bottom: 20px;
}
.default h2,.add h2{
font-size: 16px;
}
.default ul,.default ul{
overflow: hidden;
}
.default ul li,.add ul li{
float: left;
font-size: 0.28rem;
width: 23%;
text-align: center;
border: 1px solid #ccc;
margin-bottom: 0.1rem;
padding: 0.1rem 0;
box-sizing: border-box;
margin-right: 0.1rem;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.default ul li:first-child{
border: 0px;
width: 0;
margin: 0;
}

View File

@@ -0,0 +1,106 @@
.header {
height: 1.6rem;
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 9;
}
.header_logo {
height: 0.88rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_logo i{
color: white;
font-size: 18px;
}
.header_logo a{
width: 82%;
}
.header_logo .search{
width: 100%;
background: #fff;
height: 0.6rem;
border-radius: 0.6rem;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 0.3rem;
}
.header_logo .search i{
color: #999;
font-size: 0.26rem;
margin-right: 0.1rem;
padding-top: 0.02rem;
}
.header_logo .search span{
font-size: 0.24em;
color: #999;
}
.header_menu {
height: 0.72rem;
display: flex;
background: #fe7fa2;
justify-content: space-between;
align-items: center;
}
.left_menu {
display: flex;
flex: 1;
margin-right: 0.26rem;
overflow-x: scroll;
}
.left_menu .active {
color: #ffffff !important;
}
.left_menu li{
font-size: 0.26rem;
flex-shrink: 0;
margin-right: 0.26rem;
color: #d3d2d2;
}
.header_menu .icon-edit{
color: #e3e3e3;
font-size: 17px;
}
.model_list {
margin: 20px 0;
}
.model-slide {
display: flex;
align-items: center;
justify-content: space-around;
}
.model-slide .model-item{
position: relative;
text-align: center;
width: 73px;
}
.model-slide .model-item p{
font-size: 0.24rem;
color: #7e7979;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.model-slide .item-img {
position: relative;
}
.model-slide .item-img img{
width: 1.2rem;
height: 1.2rem;
border-radius: 100%;
}
.model-slide .item-img span{
font-size: 0.22rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.06rem;
padding: 0.02rem 0.1rem;
background: rgb(0 0 0 / 58%);
color: #fff;
border-radius: 0.2rem;
}

View File

@@ -0,0 +1,16 @@
.info_img img{
width: 100%;
font-size: 0;
}
.info_img figcaption{
display: none;
}
.xia{
display: block;
font-size: 0.4rem;
margin-top: 0.2rem;
color: #fb7299;
width: 100%;
text-align: center;
}

View File

@@ -0,0 +1,208 @@
.loading {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.back {
padding: 0.4rem 0.4rem;
background: #fb7299;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.16rem;
max-width: 4rem;
}
.back span {
font-size: 0.3rem;
letter-spacing: 0.02rem;
color: #fff;
}
.load8 {
width: 0.8rem;
height: 0.8rem;
position: relative;
}
.dialog_f {
width: 86%;
background: #fff;
border-radius: 0.32rem;
font-size: 0.32rem;
}
.dialog_header {
padding-top: 0.52rem;
font-weight: 500;
line-height: 0.48rem;
text-align: center;
}
.dialog_message {
max-height: 60vh;
padding: 0.16rem 0.48rem 0.52rem 0.48rem;
overflow-y: auto;
font-size: 0.28rem;
line-height: 0.4rem;
text-align: center;
}
.dialog_footer {
display: flex;
height: 0.96rem;
border-top: 0.02rem solid #ebedf0;
}
.dialog_cancel,
.dialog_confirm {
width: 50%;
text-align: center;
line-height: 0.96rem;
}
.dialog_cancel:active {
background: #e6e6e6;
border-bottom-left-radius: 0.32rem;
}
.dialog_confirm:active {
background: #e6e6e6;
border-bottom-right-radius: 0.32rem;
}
.dialog_cancel {
color: #323233;
border-right: 0.02rem solid #ebedf0;
}
.dialog_confirm {
color: #fb7299;
}
.container1>div,
.container2>div,
.container3>div {
width: 0.2rem;
height: 0.2rem;
background-color: #fff;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.load8 .load8-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 {
top: 0;
left: 0;
}
.circle2 {
top: 0;
right: 0;
}
.circle3 {
right: 0;
bottom: 0;
}
.circle4 {
left: 0;
bottom: 0;
}
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

View File

@@ -0,0 +1,28 @@
.content_mechanism{
width: 90%;
top: 0.9rem;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap:wrap;
margin-top: 0.9rem;
padding: 0.2rem 0.3rem;
}
.content_mechanism li{
width: 25%;
text-align: center;
font-size: 0;
margin-bottom: 0.7rem;
}
.content_mechanism .content_mechanism_list p{
font-size: 0.32rem;
margin-bottom: 0.06rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content_mechanism .content_mechanism_list span{
font-size: 0.24rem;
color: #fb7299;
}

View File

@@ -0,0 +1,3 @@
.pitem{
padding: 0 0.3rem;
}

View File

@@ -0,0 +1,116 @@
.content{
margin-top: 0.9rem !important;
}
.hot{
padding: 0.3rem 0.3rem 0 0.3rem;
}
.hot p{
font-size: 0.34rem;
color: #333;
margin-bottom: 0.26rem;
margin-top: 0.3rem;
}
.hot_list{
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 0.24rem;
flex-wrap: wrap;
}
.hot_list li{
margin-bottom: 0.6rem;
margin-right: 0.52rem;
}
.hot_list li:nth-child(4n){
margin-right: 0;
}
.hot_list_top{
position: relative;
}
.hot_list_top img{
width: 1.2rem;
height: 1.2rem;
border-radius: 100%;
}
.hot_list_top .xiao{
zoom: 0.9;
font-size: 0.22rem;
position: absolute;
left: 50%;
transform: translateX(-57%);
bottom: -0.2rem;
padding: 0.02rem 0.1rem;
background: rgb(0 0 0 / 58%);
color: #fff;
border-radius: 0.2rem;
}
.hot_list li p{
width: 1.3rem;
font-size: 0.24rem;
color: #7e7979;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.new{
padding: 0.3rem 0.3rem 0 0.3rem;
}
.new p{
font-size: 0.34rem;
color: #333;
margin-bottom: 0.26rem;
margin-top: 0.3rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.new_list{
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 0.24rem;
flex-wrap: wrap;
}
.new_list li{
margin-bottom: 0.6rem;
margin-right: 0.52rem;
}
.new_list li:nth-child(4n){
margin-right: 0;
}
.new_list_top{
position: relative;
}
.new_list_top img{
width: 1.2rem;
height: 1.2rem;
border-radius: 100%;
}
.new_list_top .xiao{
zoom: 0.9;
font-size: 0.22rem;
position: absolute;
left: 50%;
transform: translateX(-57%);
bottom: -0.2rem;
padding: 0.02rem 0.1rem;
background: rgb(0 0 0 / 58%);
color: #fff;
border-radius: 0.2rem;
}
.new_list li p{
width: 1.3rem;
font-size: 0.24rem;
color: #7e7979;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}

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