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,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;
}