【Web前端实操20】商城官网_黑色导航

墨倾许

已于 2024-05-14 20:05:17 修改

阅读量421

点赞数 9

分类专栏： Web前端实操文章标签：前端 css html 开发语言

于 2024-01-31 06:30:00 首次发布

本文链接：https://blog.csdn.net/qq_45498824/article/details/135941712

版权

Web前端实操专栏收录该内容

22 篇文章 0 订阅

订阅专栏

今天继续着上一篇博客的内容进行编写，本次主要实现的是商场官网实战里面的黑色导航栏部分，也就是广告图片下面的部分。

本次除了每篇都要通用的样式CSS代码之外，还增添了一个引用矢量图标的样式，如果有兴趣的友友们，可以看看我的这篇博客，上面详细介绍了如何下载矢量图标并进行应用的：【Web前端实操17】导航栏效果——滑动门-CSDN博客

代码如下：

reset.css:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}

mi.css:

/* 头部样式开始 */
.header{
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
}

.header img{
    height: 120px;
    /* 图片，以中间开始渲染 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/* 头部样式结束 */

/* 黑色导航样式开始 */
/* 黑色背景容器主体，设置宽高，设置行高，设置背景色，设置文字大小 */
.black-nav{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    font-size: 12px;
}
/* 设置内容居中和宽度 */
.wrap{
    width: 1226px;
    margin: 0 auto;
}
/* 设置左导航整体往往左浮动 */
.black-nav-left{
    float: left;
}
/* 设置右导航整体往右浮动 */
.black-nav-right{
    float: right;
}
/* 设置两个导航栏里面的列表左浮动，相对定位 */
.black-nav li{
    float: left;
    position: relative;
}
/* 设置超链接文本颜色 */
.black-nav a{
    color: #b0b0b0;
}
/* 设置超链接旁边连接符的颜色和边距 */
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
/* 设置下载APP超链接下的图片块效果 */
.download{
    /* 设定宽高、背景色以及绝对定位，离左边的距离和上边的距离 */
    width: 124px;
    height: 0;
    background: #fff;
    /* 有阴影效果 */
    box-shadow: 0 1px 5px #aaa;
    position: absolute;
    top: 40px;
    left: 50%;
    /* 调整图片块的位置 */
    margin-left: -62px;
    overflow:hidden;
    /* 过渡效果 */
    transition: all 0.3s;
}
/* 设置图片宽度，调整图片内边距 */
.download img{
    width: 90px;
    margin: 18px auto 0;
}
/* 设置图片下面的文字背景、字体大小和行高 */
.download p{
    color: #333;
    font-size: 14px;
    line-height: 14px;
}
/* 鼠标悬停的效果 
具体的大小可以自己调定*/
.black-nav-left li:hover>.download{
    height: 140px;
}
/* 添加箭头，宽高设置为0，边框设置
绝对定位，设置居中 */
.stri{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position:absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    display: none;
}
.black-nav-left>li:hover>.stri{
    display: block;
}
/* 购物车滑下去的效果设置，宽高背景色，边距，相对定位 */
.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 25px;
    position: relative;
}
/* 设置鼠标悬停在购物车上的背景色，为白色 */
.cart:hover{
    background: #fff;
}
/* 设置超链接文本为橘色 */
.cart:hover>a{
    color: #ff6700;
}
/* 设置购物车文本样式正常，右边距为8px */
.cart i{
    font-style: normal;
    margin-right: 8px;
}
/* 设置“购物车中还没有商品，赶紧选购吧”的块结构的宽高背景色，阴影效果等 */
.cart-list{
    width: 316px;
    height: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    position: absolute;
    right: 0;
    top: 40px;
    color: #424242;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 100px;
}
/* 当鼠标悬停在购物车上时会出现“购物车中还没有商品，赶紧选购吧”的提示 */
.cart:hover>.cart-list{
    height: 100px;
} 
/* 黑色导航样式结束 */

矢量图标：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <!-- 全局样式基本上所有文档都需要 
    正式开始开发网站的话就不能写内联样式的，需要使用外接，利用链接引入-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mi.css">
    <!-- 引用图标的界面 -->
    <link rel="stylesheet" href="css/iconfont/iconfont.css">
</head>
<body>
    <!-- 头部广告条开始 -->
    <div class="header">
        <a href="#">
            <img src="img/top.jpg" alt="顶部广告条">
        </a>
    </div>
    <!-- 头部广告条结束 -->
    <!-- 黑色导航部分开始 -->
    <!-- 1、黑色背景，主容器 
        2、内容部分要居中显示，容器进行处理
        3、左导航栏和右导航
        4、动画——有一个图片出现，右导航有个效果
    -->
    <div class="black-nav">
        <div class="wrap">
            <ul class="black-nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">Lot</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星数科</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li>
                    <a href="#">下载APP</a>
                    <span>|</span>
                    <!-- 点击下载APP会出现一个图案 -->
                    <div class="download">
                        <img src="img/download.png" alt="下载二维码">
                        <p>小米商城APP</p>
                    </div>
                    <!-- 点击下载APP出现的图框还有个箭头呢 -->
                    <div class="stri"></div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">Select Location</a><span>|</span></li>
            </ul>
            <ul class="black-nav-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a><span>|</span></li>
                <li class="cart">
                    <a href="#">
                        <span class="iconfont">&#xe607;</span>
                        <i>购物车（0）</i>
                    </a>
                    <!-- 点击购物车会出现相应文字和效果 -->
                    <div class="cart-list">
                        购物车中还没有商品，赶紧选购吧
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 黑色导航部分结束 -->
</body>
</html>