CSS 2.7仿天猫

最新推荐文章于 2022-10-26 22:07:55 发布

原创最新推荐文章于 2022-10-26 22:07:55 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#仿天猫

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文通过实例展示了如何使用CSS和HTML构建一个简洁美观的电商网站界面，包括头部导航、搜索框、商品分类展示及底部导航栏的设计。

一、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>分&nbsp类</figcaption>
        </figure>
        <input type="text" class="ss" name="ss"placeholder="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp抢购双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>

三、效果展示