仿小米和考拉页面
一、小米穿戴设备(浮动)
- 用浮动布局
智能穿戴.png
<!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>
.mi_wrapper {
width: 1226px;
margin: 0 auto;
}
.clear_fix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clear_fix {
*zoom: 1;
}
body,
h1,
h2,
h3,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
ul,
li {
list-style-type: none;
}
.dress {
margin-top: 30px;
}
.dress .header {
height: 58px;
line-height: 58px;
}
.dress .header .left-area {
float: left;
}
.dress .header .right-area {
float: right;
font-size: 14px;
}
.dress .header .right-area .item {
margin-left: 20px;
}
.dress .header .right-area .item:hover,
.dress .header .right-area .item.active {
padding: 3px 0;
border-bottom: 2px solid red;
color: red;
}
.dress .list {
margin-right: -14px;
}
.dress .list .item {
float: left;
width: 234px;
height: 300px;
margin-bottom: 14px;
margin-right: 14px;
background-color: #f00;
transition: all 0.2s linear;
}
.dress .list .item.item1 {
height: 614px;
}
.dress .list .item.item9,
.dress .list .item.item10 {
height: 143px;
}
.dress .list .item:hover {
/* transform: translate3d(0, -2px, 0); */
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
.dress .list .item a {
display: inline-block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="mi_wrapper dress">
<div class="header clear_fix">
<div class="left-area">
<h3>智能穿戴</h3>
</div>
<div class="right-area">
<a class="item active hot" href="#">热门</a>
<a class="item info" href="#">穿戴</a>
</div>
</div>
<div>
<ul class="list clear_fix">
<li class="item item1"><a href="#">1</a></li>
<li class="item item2"><a href="#">2</a></li>
<li class="item item3"><a href="#">3</a></li>
<li class="item item4"><a href="#">4</a></li>
<li class="item item5"><a href="#">5</a></li>
<li class="item item6"><a href="#">6</a></li>
<li class="item item7"><a href="#">7</a></li>
<li class="item item8"><a href="#">8</a></li>
<li class="item item9"><a href="#">9</a></li>
<li class="item item10"><a href="#">10</a></li>
</ul>
</div>
</div>
</body>
</html>
考拉海购.png
<!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>
.kl_wrapper {
width: 1100px;
margin: 0 auto;
}
.clear_fix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clear_fix {
*zoom: 1;
}
body,
h1,
h2,
h3,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
ul,
li {
list-style-type: none;
}
.sport {
height: 100px;
margin-top: 30px;
background-color: orange;
}
.sport .item {
float: left;
height: 541px;
}
.sport .item.left {
width: 330px;
background-color: purple;
}
.sport .item.center {
width: 550px;
background-color: skyblue;
}
.sport .center .center-item {
float: left;
width: 275px;
height: 271px;
box-sizing: border-box;
border: 1px solid #000;
border-left: none;
background-color: #f00;
}
.sport .center .center-item:nth-last-child(-n + 2) {
margin-top: -1px;
}
.sport .item.right {
width: 220px;
background-color: burlywood;
}
.sport .right .item {
float: left;
width: 220px;
height: 121px;
border: 1px solid #000;
margin-top: -1px;
border-left: none;
box-sizing: border-box;
}
.sport .right .header {
height: 61px;
margin-top: 0;
}
</style>
</head>
<body>
<div class="kl_wrapper sport">
<div class="item left"></div>
<div class="item center">
<div class="center-item">1</div>
<div class="center-item">2</div>
<div class="center-item">3</div>
<div class="center-item">4</div>
</div>
<div class="item right">
<div class="item header">header</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
</body>
</html>
