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,16 @@
/* 专门用来重置浏览器默认样式的 */
body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

View File

@@ -0,0 +1,126 @@
.header .header_left,
.header .header_right {
display: flex;
align-items: center;
height: 40px;
}
.header .header_left a,
.header .header_right a{
color: #b0b0b0;
}
.header {
background-color: #333;
height: 40px;
}
.header .fa {
display: flex;
justify-content: space-between;
}
.header .header_left {
}
.header .header_left li{
margin-right: 17px;
}
.header .header_left li a {
position: relative
}
.header .header_left li:last-child a::after {
width: 0px !important;
}
.header .header_left li a::after{
position: absolute;
content: " ";
height: 16px;
width: 1px;
background: #424242;
right: -10px;
top: 3px;
}
.header .header_right{
}
.header .header_right li{
margin-right: 17px;
}
.header .header_right li:last-child{
width: 120px;
height: 40px;
background: #424242;
margin-right: 0 !important;
line-height: 40px;
text-align: center;
position: relative;
}
.header .header_right li:last-child:hover .drop_menu{
height: 90px !important;
}
.header .header_right li:last-child:hover {
background: #fff !important;
}
.header .header_right li:last-child:hover a{
color: #ff6700;
}
.drop_menu {
position: absolute;
width: 316px;
height: 0;
background: #c7bcbc;
right: 0;
transition: all ease 0.3s;
}
.menu {}
.mc{
display: flex;
justify-content: space-between;
height: 100px;
align-items: center;
}
.menu .menu_left {
display: flex;
align-items: center;
}
.menu .menu_left .logo{
width: 55px;
height: 55px;
margin-right: 15px;
}
.menu .menu_left .dlogo{
height: 55PX;
margin-right: 10px;
}
.menu .menu_left ul{
display: flex;
}
.menu .menu_left ul li{
margin-right: 10px;
}
.menu .menu_left ul a{
color: #333;
}
.menu .menu_right {
width: 296px;
height: 50px;
display: flex;
border: 1px solid #e0e0e0;
}
.menu .menu_right input{
width: 223px;
height: 100%;
border: none;
padding: 0 10px;
}
.menu .menu_right i{
width: 52px;
height: 50px;
display: inline-block;
text-align: center;
line-height: 50px;
border-left: 1px solid #e0e0e0;
}

View File

@@ -0,0 +1,21 @@
/* 存放公共css的 */
.theme_red {
color: blue;
}
.left {
float: left;
}
.right {
float: right;
}
.w-1226 {
width: 1226px;
margin: 0 auto;
}
.center {
text-align: center;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1975352_1z5nvrzd60v.css">
</head>
<body>
<div class="header">
<div class="w-1226 fa">
<ul class="header_left">
<li>
<a>小米商城</a>
</li>
<li>
<a>小米商城</a>
</li>
<li>
<a>小米商城</a>
</li>
<li>
<a>小米商城</a>
</li>
<li>
<a>小米商城</a>
</li>
<li>
<a>小米商城</a>
</li>
</ul>
<ul class="header_right">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">
购物车(0)
</a>
<div class="drop_menu">
</div>
</li>
</ul>
</div>
</div>
<div class="menu">
<div class="w-1226 mc">
<div class="menu_left">
<img class="logo" src="./img/logo.png" alt="">
<img class="dlogo" src="./img/love.gif" alt="">
<ul>
<li><a href="">小米手机</a></li>
<li><a href="">Redmi 红米</a></li>
<li><a href="">Redmi 红米</a></li>
<li><a href="">Redmi 红米</a></li>
<li><a href="">Redmi 红米</a></li>
</ul>
</div>
<div class="menu_right">
<input type="text" placeholder="米家运动心电T恤">
<i class="iconfont icon-search1"></i>
</div>
</div>
</div>
<div class="swiper">
<div class="swiper_top">
<div class="swiper_banner"></div>
<div class="swiper_banner"></div>
</div>
<ul class="swiper_bottom">
<li></li>
</ul>
</div>
<div class="list">
<div class="list_title"></div>
<div class="list_content">
<div class="content_img"></div>
<div class="content_item"></div>
</div>
</div>
</body>
</html>