CSS 2.7仿天貓
阿新 • • 發佈：2018-12-18
一、CSS
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
.html,body,wrap{
height: 100%;
width: 100%;
}
body{
background: rgba(90,60,30,0.3);
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: #fff;
}
a:active{
text-decoration: underline;
color: #000;
}
header{
background: rgba(120,30, 30,0.4);
width: 100%;
height: 50px;
display: flex;
font-size: 10px;
color: #fff;
}
header figcaption{
text-align: center;
}
.ff{
width: 40px;
height: 50px;
}
.flp ,.frp{
width: 25px;
height: 20px;
margin: 8px 8px auto;
}
.ss{
flex: 1;
margin: 10px 0px;
height: 30px;
border-radius: 5px;
background-image: url("tmall/search.png"),url(tmall/ht.png);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left ,right;
}
#footer{
width: 100%;
height: 50px;
background: rgba(90,60,30,1);
position: fixed;
bottom: 0px;
}
#foot_list .list_li{
float: left;
height: 50px;
line-height: 50px;
width: 25%;
font-size: 10px;
text-align: center;
}
#foot_list .list_li:nth-child(1){
background-image: url("tmall/icon_tab_home_nomal.png");
background-repeat: no-repeat;
background-size: 22px 21px;
background-position: top;
}
#foot_list .list_li:nth-child(2){
background-image: url("tmall/icon_tab_featured_normal.png");
background-repeat: no-repeat;
background-size: 22px 21px;
background-position: top;
}
#foot_list .list_li:nth-child(3){
background-image: url("tmall/icon_tab_cart_normal.png");
background-repeat: no-repeat;
background-size: 22px 21px;
background-position: top;
}
#foot_list .list_li:nth-child(4){
background-image: url("tmall/bottombtn0201.png");
background-repeat: no-repeat;
background-size: 22px 21px;
background-position: top;
}
#foot_list .list_li:nth-child(1):active{
background: url("tmall/icon_tab_home_selected.png") no-repeat;
background-size: 22px 21px;
background-position: top;
}
#foot_list .list_li:nth-child(2):active{
background: url("tmall/icon_tab_featured_selected.png") no-repeat;
background-size: 22px 21px;
background-position: top;
}
#foot_list .list_li:nth-child(3):active{
background: url("tmall/bottombtn0202.png") no-repeat;
background-size: 22px 21px;
background-position: top;
}
#foot_list .list_li:nth-child(4):active{
background: url("tmall/icon_tab_home_selected.png") no-repeat;
background-size: 22px 21px;
background-position: top;
}
.title{
background-image:linear-gradient(to bottom,#DAAAAA,#E87373 80%,#DAAAAA);
height: 30px;
line-height: 30px;
}
.main{
width: 320px;
color: #000;
background: #eee;
}
.sp{
width: 50%;
float: left;
margin-top: 0.5em;
margin-bottom: 0.5em;
background: #a9a9a9;
text-align: center;
}
二、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="back.css">
<title></title>
</head>
<body>
<header id="header" class="home">
<figure class="f1 ff">
<img src="tmall/fl.png" alt="分類" class="flp">
<figcaption>分 類</figcaption>
</figure>
<input type="text" class="ss" name="ss"placeholder="      搶購雙11">
<figure class="fr ff">
<img src="tmall/sys.png" alt="掃一掃" class="frp">
<figcaption>掃一掃</figcaption>
</figure>
</header>
<section class="main">
<h3 class="title">行業精選</h3>
<figure class="sp sp1">
<img src="tmall/index_img_i1.png" alt="">
<figcaption>
女裝<br>最新款式
</figcaption>
</figure>
<figure class="sp sp1">
<img src="tmall/index_img_i9.png" alt="">
<figcaption>
運動<br>愛運動
</figcaption>
</figure>
<figure class="sp sp1">
<img src="tmall/index_img_i3.png" alt="">
<figcaption>
女鞋<br>搶秋冬新款
</figcaption>
</figure>
<figure class="sp sp1">
<img src="tmall/index_img_i4.png" alt="">
<figcaption>
男裝<br>潮男搭配
</figcaption>
</figure>
<figure class="sp sp1">
<img src="tmall/index_img_i5.png" alt="">
<figcaption>
箱包<br>包你滿意
</figcaption>
</figure>
<figure class="sp sp1">
<img src="tmall/index_img_i6.png" alt="">
<figcaption>
男鞋<br>英倫休閒季
</figcaption>
</figure>
</section>
<footer id="footer">
<nav>
<ul id="foot_list">
<li class="list_li home active">
<a href=""class="text">天貓</a>
</li>
<li class="list_li follow">
<a href=""class="text">關注</a>
</li>
<li class="list_li cart">
<a href=""class="text">購物車</a>
</li>
<li class="list_li profile">
<a href=""class="text">我</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>三、效果展示
