高仿小米商城局部页面 (HTML+CSS)

最新推荐文章于 2024-08-17 18:47:23 发布

置顶 Dariuslwk

最新推荐文章于 2024-08-17 18:47:23 发布

阅读量2.6k

点赞数 11

分类专栏： DAYNOTE 文章标签： html css

本文链接：https://blog.csdn.net/qq_44158936/article/details/104787763

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

在这里插入图片描述

1、设计思路

1.1、将整个页面分为两部分

手机 和 查看全部 部分，取名为 header
手机展示部分，取名为 main

1.2、页面设计思维导图

在这里插入图片描述

2、HTML 代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城 - 小米10 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
        <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="style/header.css">
        <link rel="stylesheet" href="style/main.css">
    </head>
    <body>
    <div class="XiaoMi">
        <div class="header">
                <span>手机</span>
                <div class="more_link" href="https://www.mi.com/a/h/9891.html" target="_blank" >查看全部
                <i class="fa fa-chevron-circle-right"></i>
                </div>
        </div>

        <div class="main">
            <div class="main-left">
                <img src="images/小米MIX%20Alpha%20.webp" alt="小米 MIX Alpha" style="width: 234px; height: 614px">
            </div>

            <li class="main-right">
                <ul class="new—phone">
                    <li class="phone">
                        <a href="https://item.mi.com/product/10000214.html?selected=10000214&pClass=p">
                            <div class="phone_image">
                                <img src="images/小米10.webp"  width="160px" height="160px" alt-="小米10" lazy="loaded">
                            </div>
                            <a class="title">小米10</a>
                            <p class="desc">骁龙865/1亿像素相机，全靠友商衬托</p>
                            <div class="num">3999元起</div>
                        </a>
                    </li>

                    <li class="phone">
                        <a href="https://item.mi.com/product/10000203.html?selected=10000203">
                            <div class="phone_image">
                                <img src="images/Redmi%20K30.webp" width="160px" height="160px" alt-="Redmi K30" lazy="loaded">
                            </div>
                            <a class="title">Redmi K30</a>
                            <p class="desc">120Hz流速屏，强行奥利奥四摄</p>
                            <div class="num">1599元起</div>
                        </a>
                    </li>

                    <li class="phone">
                        <a href="https://item.mi.com/product/10000204.html?cfrom=search&selected=10000204&pClass=p">
                            <div class="phone_image">
                                <img src="images/Redmi%20K30%205G.webp" width="160px" height="160px" alt-="Redmi K30 5G" lazy="loaded">
                            </div>
                            <a class="title">Redmi K30 5G</a>
                            <p class="desc">双模5G,120Hz流速屏,最便宜的5G手机</p>
                            <div class="num">1999元起</div>
                        </a>
                    </li>

                    <li class="phone">
                        <a href="https://item.mi.com/product/10000198.html?selected=10000198&pClass=p">
                            <div class="phone_image">
                                <img src="images/小米CC9%20Pro.webp" width="160px" height="160px" alt-="小米CC9 Pro" lazy="loaded">
                            </div>
                            <a class="title">小米CC9 Pro</a>
                            <p class="desc">1亿像素 5摄4闪，大像素才是正确方向</p>
                            <div class="num">2599元起
                                <div class="old_num">2799元</div>
                            </div>
                        </a>
                    </li>

                    <li class="phone">
                        <a href="https://www.mi.com/redmi8">
                            <div class="phone_image">
                                <img src="images/Redmi%208.webp" width="160px" height="160px" alt="Redmi 8" lazy="loaded">
                            </div>
                            <a class="title">Redmi 8</a>
                            <p class="desc">5000mAh超长续航，领先行业Type-C</p>
                            <div class="num">749元起
                                <div class="old_num">799元</div>
                            </div>
                        </a>
                    </li>

                    <li class="phone">
                        <a href="https://www.mi.com/redmi8a">
                            <div class="phone_image">
                                <img src="images/Redmi%208A.webp" width="160px" height="160px" alt-="Redmi 8A" lazy="loaded">
                            </div>
                            <a class="title">Redmi 8A</a>
                            <p class="desc">5000mAh超长续航，走量的电子垃圾</p>
                            <div class="num">599元起
                                <div class="old_num">699元</div>
                            </div>
                            </a>
                        </li>

                    <li class="phone">
                        <a href="http://www.mi.com/redminote8pro">
                            <div class="phone_image">
                                    <img src="images/Redmi%20Note8%20Pro.webp" width="160px" height="160px" alt-="Redmi Note 8 Pro" lazy="loaded">
                            </div>
                            <a class="title">Redmi Note 8 Pro</a>
                            <p class="desc">6400万全场景四摄，联发科的咸鱼翻身</p>
                            <div class="num">1299元起
                                <div class="old_num">1399元</div>
                            </div>
                        </a>
                    </li>

                        <li class="phone">
                            <a href="http://www.mi.com/redminote8">
                                <div class="phone_image">
                                    <img src="images/Redmi%20Note8.webp" width="160px" height="160px" alt-="Redmi Note 8" lazy="loaded">
                                </div>
                                <a class="title">Redmi Note 8</a>
                                <p class="desc">千元4800万四摄，砸不烂的小金刚</p>
                                <div class="num">999元起</div>
                            </a>
                        </li>
                </ul>
            </div>
        </div>
    </div>


    </body>
</html>

3、CSS 代码

3.1、header.css

@charset "UTF-8";
body {
    margin: 0px;
    padding: 0px;
    background-color: #f5f5f5;
}

.XiaoMi{
    width: 1298px;
    height:686px;
    display: block;
    margin: 0 auto;
    text-align: center;

}

.header{
    position: relative;
    height: 68px;
    width: 1265px;
}

span{
    font-size: 24px;
    font-weight: 200;
    line-height: 68px;
    color: #333;
    float: left;
    width: 60px;
}

.more_link{
    font-size: 24px;
    font-weight: 200;
    line-height: 68px;
    text-decoration: none;
    color: #333;
    float: right;
}

.more_link:hover{
    color: #ff6700;
}

3.2、middle.css

@charset "UTF-8";
.main{
    width: 1266px;
    height: 628px;
}

.main-left{
    width: 248px;
    height: 614px;
    float: left;

}

.main-right{
    width: 1030px;
    height: 614px;
    position: relative;
    float: right;
    margin: 0 0 -14px -14px;
}

ul{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
    margin: 0;
}

li{
    display: list-item;
    list-style: none;
}

.phone{
    height: 260px;
    padding: 20px 0;
    position: relative;
    z-index: 1;
    float: left;
    width: 234px;
    margin-left: 14px;
    margin-bottom: 14px;
    background: #fff;
    transition: all .2s linear;
}

.new—phone{
    width: 1020px;
    height: 642px;
}

a{
    background-color: rgba(0,0,0,0);
    font-size:0;
}

a:-webkit-any-link{
    cursor: pointer;
}

.phone_image{
    margin: 0 auto 18px;
}

.title{
    font-size: 14px;
    font-weight: 400;
    color: #333;
    text-decoration: none;
}

.desc{
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
}

p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.num{
    color: #ff6700;
    display: inline;
}

.old_num{
    text-decoration: line-through;
    font-size: 16px;
    color: #b0b0b0;
    display: inline;
}

.main-left:hover{
    -webkit-box-shadow: #ccc 0 2px 2px;
    -moz-box-shadow: #ccc 0 2px 2px;
    box-shadow: #ccc 0 2px 2px;
    transform: translate(0, -2px);
    transition: all .2s linear;
}

li:hover{
    -webkit-box-shadow: #ccc 0 10px 10px;
    -moz-box-shadow: #ccc 0 10px 10px;
    box-shadow: #ccc 0 10px 10px;
    transform: translate(0, -5px);
}