<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewort" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>京東首頁</title>
</head>
<body>
<header class="app">
<ul>
<li>
<img src="images/changenicnameshutbtn.png" alt="">
</li>
<li><img src="images/killpest.png" alt=""></li>
<li>京東好物</li>
<li>25</li>
</ul>
</header>
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon"></div>
</div>
<div class="search-login">登錄</div>
</div>
<div class="maincontent">
<div class="slide">
<img src="images/energyrankbanner.png" alt="">
</div>
</div>
<div class="ckybrand">
<div class="one"><img src="images/energyrankbanner.png" alt=""></div>
<div class="two"><img src="images/energyrankbanner.png" alt=""></div>
<div class="three"><img src="images/energyrankbanner.png" alt=""></div>
</div>
<nav class="categary">
<a href=""><img src="images/killpest.png" alt="">
<span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
<a href=""><img src="images/killpest.png" alt=""><span>京東超市</span></a>
</nav>
</body>
</html>
.body {
width:100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system,Helvetica,sans-serif;
color: red;
line-height: 1.5;
}
.app {
height: 45px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: top;
}
.app ul li {
float: left;
height: 45px;
background-color: #333333;
line-height: 45px;
text-align: center;
}
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li img {
width: 10px;
}
.app ul li:nth-child(2) {
width: 17%;
background-color: blue;
}
.app ul li:nth-child(3) {
width: 50%;
background-color:
}
.app ul li:nth-child(4) {
width: 25%;
background-color: red;
}
/*搜索*/
.search-wrap {
position: fixed;
min-width: 320px;
max-width: 640px;
width: 100%;
overflow: hidden;
height: 44px;
}
.search-btn {
position: absolute;
left:: 0;
top: 0;
width: 40px;
height: 44px;
background-color: red;
}
.search-login {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 44px;
background-color: purple;
}
.search {
position: relative;
height: 30px;
background-color: gray;
margin: 0 50px;
border-radius: 15px;
margin-top: 7px;
}
.jd-icon {
width: 20px;
height: 20px;
position: absolute;
top: 5px;
left:5px;
background:url(../images/killpest.png);
background-size: 20px 20px;
}
/*主題*/
.maincontent {
}
.slide {
}
.slide img {
width: 100%;
}
.ckybrand div {
float: left;
width: 33.33%;
}
.ckybrand div img {
width: 100%;
}
.categary{
}
.categary a {
float: left;
width: 20%;
text-align: center;;
}
.categary a img {
width: 40px;
margin: 10px 0;
}
.categary a span {
display: block;
}
練習二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewort" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/xcindex.css">
<title>攜程首頁</title>
</head>
<body>
<div class="search-index">
<div class="search"></div>
<a href="#" class="user"></a>
</div>
<div class="banner">
<img src="images/energyrankbanner.png" alt="">
</div>
<ul class="local-nav">
<li>
<a href="#" title="景點">
<span class="local-nav-icon"></span>
<span>景點</span>
</a>
</li>
<li>
<a href="#" title="景點">
<span class="local-nav-icon"></span>
<span>景點</span>
</a>
</li>
<li>
<a href="#" title="景點">
<span class="local-nav-icon"></span>
<span>景點</span>
</a>
</li>
<li>
<a href="#" title="景點">
<span class="local-nav-icon"></span>
<span>景點</span>
</a>
</li>
<li>
<a href="#" title="景點">
<span class="local-nav-icon"></span>
<span>景點</span>
</a>
</li>
</ul>
</body>
</html>
.body {
widt:100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system,Helvetica,sans-serif;
color: red;
line-height: 1.5;
overflow: hidden;
-webkit-tap-highlight-color:transparent;
}
.search-index {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 44px;
background-color: pink;
min-width: 320px;
max-width: 640px;
}
ul {
list-style: none;
margin:0;
padding: 0;
}
div {
box-sizing: border-box;
}
.search {
flex: 1;
height: 26px;
border: 1px solid red;
margin:6px 10px
}
.user {
width: 44px;
height: 44px;
background-color: red;
}
.banner {
margin-top: 44px;
}
.banner img {
width:100%;
}
.local-nav {
display: flex;
/*flex-direction: row;
justify-content: space-around;*/
background-color: gray;
height: 64px;
margin:3px 4px;
}
.local-nav li {
flex:1;
}
.local-nav a {
display: flex;
flex-direction: column;
align-items: center;
}
.local-nav-icon {
width: 32px;
height: 32px;
background-color: pink;
}