小米官网
html代码
<!DOCTYPE html>
<html>
<head>
<title>小米</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css\index.css">
</head>
<body>
<div class="topbar">
<div class="container">
<div class="topbar-left">
<ul>
<li><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">IoT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">金融</a></li>
<li><a href="#">有品</a></li>
<li><a href="#">小爱开发平台</a></li>
<li><a href="#">政企服务</a></li>
<li><a href="#">Select Region</a></li>
</ul>
</div>
<div class="topbar-right">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">消息通知</a>
<a href="#">购物车</a>
</div>
</div>
</div>
<div class="header">
<div class="container">
<div class="logo" >
<img src="image\logo-footer.png" ;>
</div>
<div class="nav">
<ul>
<li><a href="#">小米手机</a>
<div class="xiala">
</div>
</li>
<li><a href="#">红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">盒子</a></li>
<li><a href="#">新品</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="search">
<input type="text">
<input type="submit">
</div>
</div>
</div>
<div class="content">
<div class="container">
<img src="image/大背景.jpg" />
<div class="content-nav">
<ul>
<li><a href="#">小米商城<span>></span></a>
</li>
<li><a href="#">MIUI</a>
</li>
<li><a href="#">IoT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">金融</a></li>
<li><a href="#">有品</a></li>
<li><a href="#">小爱开发平台</a></li>
<li><a href="#">政企服务</a></li>
<li><a href="#">Select Region</a></li>
</ul>
</div>
</div>
</div>
<div class="items">
<div class="container">
<div class="item1"><img src="image/2.png"></div>
<div class="item2"><img src="image/2.png"></div>
<div class="item2"><img src="image/2.png"></div>
<div class="item2"><img src="image/2.png"></div>
</div>
</div>
<div class="goods">
<div class="container">
<h2>小米闪购</h2>
<div class="item">
<img src="image/55.png" />
</div>
<div class="item">
<img src="image/11.jpg"/>
<p>米家小相机</p>
<p>清晰捕捉</p>
<p>649元<span>699元</span></p>
</div>
<div class="item">
<img src="image/22.jpg"/>
<p>米家小相机</p>
<p>清晰捕捉</p>
<p>649元<span>699元</span></p>
</div>
<div class="item">
<img src="image/33.jpg"/>
<p>米家小相机</p>
<p>清晰捕捉</p>
<p>649元<span>699元</span></p>
</div>
<div class="item">
<img src="image/44.jpg"/>
<p>米家小相机</p>
<p>清晰捕捉</p>
<p>649元<span>699元</span></p>
</div>
</div>
</div>
</body>
</html>
CSS代码
*{
margin: -1px;
padding: 0px;
}
.topbar{
height: 40px;
background-color: rgb(51,51,51);
}
.container{
width: 1226px;
height: 100%;
margin: 0px auto;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.topbar a{
color: rgb(176,176,176);
}
.topbar-left li{
float: left;
line-height: 40px;
}
.topbar-left a{
border-right: 1px solid #424242;
padding-right: 10px;
padding-left:10px;
font-size: 12px;
}
.topbar-left a:hover{
color: #fff;
}
.topbar-right{
position:absolute;
left:1100px;
top:0px;
}
.topbar-right a{
line-height: 40px;
margin-right: 10px;
border-right:1px solid #42 ;
padding-right: 10px;
}
.topbar-right a:hover{
color:#fff;
}
.header .container {
height: 100px;
}
.header .logo{
margin-top: 21.5px;
width: 234px;
margin-left: -60px;
}
.header .logo, .header .nav{
float: left;
}
.header a{
color: black;
line-height: 100px;
}
/*.header .nav{
position:absolute;
left:400px;
top:50px;
}*/
.header .nav li{
float: left;
margin-right: 20px;
}
.header .container .nav ul li .xiala{
width: 100%;
height: 0px;
background-color: black;
position: absolute;
top: 0px;
left: 0px;
transition: height 0.5s;
}
.logo {
float: left;
}
.header a: hover{
color: #ff6700;
}
.header .search input{
height: 40px;
margin-top: 25px;
border: 1px solid gray;
font-size: 18px;
opacity:0.5;
}
input[type="submit"]{
background-color:#fff;
position: relative;
top: 2px;
right: 0px;
}
.header .search{
position:absolute;
left:1100px;
top:50px;
}
.header .search:hover input{
border-color: #FF6700 ;
}
.content .container img{
width: 1226px;
height: 460px;
}
.content .container .content-nav{
height: 460px;
width: 234px;
background-color:grey;
position: absolute;
left: 0px;
top:0px;
background-color: rgba(0,0,0,0.3);
}
.content .container .content-nav ul li .leftdonghua{
position: absolute;
left: 381px;
top:136px;
height: 460px;
width: 600px;
background-color:grey;
z-index: 2;
display: none;
}
.content .container .content-nav li:hover{
display: block;
}
.content .container{
position: relative;
}
.content .content-nav a{
color: #FFFFFF;
}
.content .content-nav li{
padding: 15px 30px;
}
.content .content-nav li:hover{
z-index: 2;
background-color: #FF6700;
}
.content .content-nav ul{
margin-top: 15px;
}
.content.container* {
margin: 0px;
}
.content .content-nav a span{
float: right;
}
.items .item2 img{
width: 306px;
height: 209px;
}
.items .item1 , .items .item2{
float: left;
}
.items .container .item2{
margin-left: 5px;
}
.items .container *{
margin: 0px;
}
.goods .item{
width: 234px;
height: 339px;
background-color: white;
margin: 5px;
float: left;
}
.goods h2{
margin-top: 30px;
}
.clear:after{
content: "";
display: block;
clear: both;
}
.goods .item img{
transition: all 0.6s;
width: 204px;
margin: 10px 15px;
}
.goods .item img:hover{
transform: scale(1.2);
}
.goods .item p{
text-align: center;
}
.goods .item .t1{
font-size: 14px;
}
.goods .item .t2{
color: gray;
font-size: 12px;
margin: 10px 0px;
}
.goods .item .t3{
color: red;
}
.goods .item .t3 span{
color: gray;
text-decoration: line-through;
}