前端实现小米商城网页1（头部导航栏）

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

Gib Gas!

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

阅读量5k

点赞数 5

分类专栏：前端学习文章标签： css html html5 css3 javascript

本文链接：https://blog.csdn.net/weixin_44584059/article/details/108210686

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

模仿小米商城，写一个网页，头部主要通过HTML+CSS完成，用hover实现菜单栏的影藏与显示

HTML部分
style.CSS部分
效果图
小知识点

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小米商城首页</title>
    <meta name="description"
        content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
    <meta name="keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>

<body>
    <div class="page_top">
        <div class="container">
            <div class="top_lf">
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">MIUI</a>
                <span>|</span>
                <a href="">IoT</a>
                <span>|</span>
                <a href="">云服务</a>
                <span>|</span>
                <a href="">金融</a>
                <span>|</span>
                <a href="">有品</a>
                <span>|</span>
                <a href="">小爱开放平台</a>
                <span>|</span>
                <a href="">企业团购</a>
                <span>|</span>
                <a href="">资质证照</a>
                <span>|</span>
                <a href="">协议规则</a>
                <span>|</span>
                <a href="" class="download" id="">下载app
                    <div class="down_box"><b></b><img src="./img/down_load.jpg" alt=""><i>小米商城APP</i></div>
                </a>
                <span>|</span>
                <a href="">智能生活</a>
                <span>|</span>
                <a href=""> Select Location</a>
            </div>
            <div class="top_gt">
                <div class="car_box">
                    <a href="" class="tit">
                        <i class="iconfont icongouwuche "></i>
                        购物车
                        <span>0</span>
                    </a>
                    <div class="pop">
                        <!-- <p class="no_good"><a href="">购物车中没有商品,快选购吧！</a></p> -->
                        <ul class="list">
                            <li><a href="" class="pic"><img
                                        src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=225&h=225&f=webp&q=90"
                                        alt=""></a>
                                <div class="txt">小米10至尊纪念版
                                    「明天上午10点再次开售，分期最高享24期免息，火爆预约中」120X 超远变焦 / 120W 秒充科技 / 120Hz刷新率 + 240Hz采样率 /
                                    骁龙865旗舰处理器 / 双模5G / 10倍光学变焦 / OIS光学防抖+EIS数字防抖 / 2000万超清前置相机 / 双串蝶式石墨烯基锂离子电池 /
                                    等效4500mAh大电量 / 120W 有线秒充+50W无线秒充+10W无线反充 / WiFi 6 / 多功能NFC / 红外遥控</div>
                                <div class="num">
                                    <h4>5299 ×1</h4>
                                    <i>×</i>
                                </div>
                            </li>
                            <li><a href="" class="pic"><img
                                        src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=225&h=225&f=webp&q=90"
                                        alt=""></a>
                                <div class="txt">小米10</div>
                                <div class="num">
                                    <h4>5299 ×1</h4>
                                    <i>×</i>
                                </div>
                            </li>
                            <li><a href="" class="pic"><img
                                        src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=225&h=225&f=webp&q=90"
                                        alt=""></a>
                                <div class="txt">小米10</div>
                                <div class="num">
                                    <h4>5299 ×1</h4>
                                    <i>×</i>
                                </div>
                            </li>
                            <li><a href="" class="pic"><img
                                        src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=225&h=225&f=webp&q=90"
                                        alt=""></a>
                                <div class="txt">小米10</div>
                                <div class="num">
                                    <h4>5299 ×1</h4>
                                    <i>×</i>
                                </div>
                            </li>
                            <li><a href="" class="pic"><img
                                        src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=225&h=225&f=webp&q=90"
                                        alt=""></a>
                                <div class="txt">小米10</div>
                                <div class="num">
                                    <h4>5299 ×1</h4>
                                    <i>×</i>
                                </div>
                            </li>
                            <li><a href="" class="pic"><img
                                        src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=225&h=225&f=webp&q=90"
                                        alt=""></a>
                                <div class="txt">小米10</div>
                                <div class="num">
                                    <h4>5299 ×1</h4>
                                    <i>×</i>
                                </div>
                            </li>
                            <li><a href="" class="pic"><img
                                        src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=225&h=225&f=webp&q=90"
                                        alt=""></a>
                                <div class="txt">小米10</div>
                                <div class="num">
                                    <h4>5299 ×1</h4>
                                    <i>×</i>
                                </div>
                            </li>
                        </ul>
                        <div class="total">
                            <div class="price">
                                <p>共6件商品</p>
                                <h3>6666元</h3>
                            </div>
                            <a href="" class="btn">立即结算</a>
                        </div>
                    </div>
                </div>
                <div class="login">
                    <a href="">登陆</a>
                    <span>|</span>
                    <a href="">注册</a>
                    <span>|</span>
                    <a href="">消息通知</a>
                </div>

                <!-- 登陆之后的显示 -->
                <!-- <div class="userinfo">
                    <div class="user">
                        <a href="" class="tit">用户↓</a>
                        <ul>
                            <li><a href="">个人中心</a></li>
                            <li><a href="">评价晒单</a></li>
                            <li><a href="">我的喜欢</a></li>
                            <li><a href="">小米账号</a></li>
                            <li><a href="">退出登录</a></li>
                        </ul>
                    </div>
                    <a href="" class="link">消息通知</a>
                    <span>|</span>
                    <a href="" class="link">我的订单</a>
                </div> -->

            </div>
        </div>
    </div>
</body>

</html>

style.CSS部分

/* 公共样式 */
body {
    font-size: 12px;
    color: #333;
}

.container {
    width: 1206px;
    margin-left: auto;
    margin-right: auto;
}

/* 公共顶部 */
.page_top {
    height: 38px;
    background-color: #323232;
}

.page_top .top_lf {
    float: left;
    color: #a2a2a2;
    line-height: 38px;
}

.page_top .top_lf a {
    display: inline-block;
}

.page_top .top_lf span {
    color: #3f3f3f;
    padding: 0 3px;
}

.page_top .top_lf a:hover {
    color: #fff;
}

.page_top .top_lf .download {
    position: relative;
}

.page_top .top_lf .down_box {
    width: 126px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -63px;
    top: 38px;
    padding-top: 20px;
    box-shadow: rgb(170, 170, 170) 0px 1px 5px;
    text-align: center;
    display: none;
}

.page_top .top_lf .down_box img {
    width: 88px;
    height: 88px;
    display: block;
    margin: 0 auto;
}

.page_top .top_lf .down_box b {
    width: 20px;
    height: 13px;
    position: absolute;
    background-image: url(../img/sanjiao.png);
    left: 50%;
    margin-left: -10px;
    top: -13px;
}

.page_top .top_lf a.download i {
    font-style: normal;
    color: #323232;
}

.page_top .top_lf a.download:hover .down_box {
    display: block;
}

.page_top .top_lf a.download:hover i {
    color: #323232;
    font-size: 13px;
}

.page_top .top_gt {
    float: right;
}


.page_top .top_gt .login {
    color: #a2a2a2;
    line-height: 38px;
    float: right;
    margin-right: 20px;
}

.page_top .top_gt .login span {
    color: #3f3f3f;
    padding: 0 3px;
}

.page_top .userinfo {
    float: right;
    margin-right: 20px;
}

.page_top .userinfo .link {
    line-height: 38px;
    color: #a2a2a2;
}

.page_top .userinfo span {
    padding: 0 3px;
    color: #3f3f3f;
}

.page_top .userinfo .user {
    width: 120px;
    display: inline-block;
    position: relative;
}

.page_top .userinfo .user .tit {
    line-height: 38px;
    text-align: center;
    display: block;
    color: #a2a2a2;
}

.page_top .userinfo .user ul {
    display: none;
    position: absolute;
    left: 0;
    top: 36px;
    width: 120px;
    padding: 10px 0;
    box-shadow: rgb(0, 0, 0, 0.15) 0px 5px 10px;
}

.page_top .userinfo .user ul li {
    line-height: 30px;
    text-align: center;
}

.page_top .userinfo .user li a {
    display: block;
}

.page_top .userinfo .user li:hover {
    background-color: #f5f5f5;
    color: #ff6700;
}

.page_top .userinfo .user:hover {
    background-color: #fff;
}

.page_top .userinfo .user:hover .tit {
    color: #ff6700;
}

.page_top .userinfo .user:hover ul {
    display: block;
}


.page_top .car_box {
    float: right;
}

.page_top .car_box .tit {
    display: block;
    width: 118px;
    height: 38px;
    background-color: #424242;
    text-align: center;
    line-height: 38px;
    color: #a2a2a2;
    position: relative;
    z-index: 1000;
}

.page_top .car_box .pop {
    width: 316px;
    position: absolute;
    top: 38px;
    right: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    display: none;
}

.page_top .car_box .pop .no_good {
    text-align: center;
    font-size: 15px;
    padding: 40px 0;
}

.page_top .pop .list {
    padding: 15px 20px 0;
    max-height: 450px;
    overflow-y: scroll;
}

.page_top .pop .list li {
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
    overflow: hidden;
}

.page_top .pop .list .pic {
    float: left;
}

.page_top .pop .list li:last-child {
    border: none;
}

.page_top .pop .list img {
    width: 60px;
    height: 60px;
}

.page_top .pop .list .txt {
    width: 120px;
    float: left;
    line-height: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page_top .pop .list .txt:hover {
    color: #EF6700;
}

.page_top .pop .list .num {
    float: right;
    text-align: right;
}

.page_top .pop .list .num h4 {
    margin-top: 12px;
    font-weight: normal;
    font-size: 12px;
    margin-bottom: 10px;
}

.page_top .pop .list .num i {
    font-style: normal;
    cursor: pointer;
    color: #aaa;
}

.page_top .pop .list .num i:hover {
    color: #333;
}

.page_top .pop .total {
    background-color: #fafafa;
    padding: 15px 10px;
    overflow: hidden;
}

.page_top .pop .total .price {
    float: left;
}

.page_top .pop .total .price p {
    color: #7e7e7e;
}

.page_top .pop .total .price h3 {
    font-size: 20px;
    color: #EF6700;
    font-weight: normal;
    margin-top: 5px;
}

.page_top .pop .total .btn {
    width: 132px;
    height: 40px;
    background-color: #EF6700;
    color: #fff;
    text-align: center;
    line-height: 40px;
    float: right;
}

.page_top .car_box:hover .tit {
    background-color: #fff;
    color: #ff6700;
}

.page_top .car_box:hover .pop {
    display: block;
}

效果图

在这里插入图片描述

小知识点

1.写hover显示影藏内容时，通常是一个大的div包裹，当做一整个模块

2. 去掉list最后一个元素的某些样式，用:hover:last child

3.盒子里有浮动，则要给最外面的盒子设置overflow:hidden

4.position: absolute;下实现居中的方法：

  position: absolute;
  left: 50%;
  margin-left: 负的原盒子宽度的一半