小米官网静态网页项目实战2

最新推荐文章于 2024-03-17 23:16:16 发布

梁龙裕的博客

最新推荐文章于 2024-03-17 23:16:16 发布

阅读量328

点赞数

分类专栏：项目实战文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_53732821/article/details/115966379

版权

项目实战专栏收录该内容

6 篇文章 0 订阅

订阅专栏

顶部导航条
结构：最外围的容器（最大）
三个div块
左右两侧各一块，购物车独占一块（样式需设置）
css下的文档（样式）

    /* 主页index1.html的样式表 */

    /* 顶部导航条的样式 */
    .topbar-wrapper{
        /* 设置宽度全屏 */
        width: 100%;
        /* 设置高度和行高 */
        height: 40px;
        line-height: 40px;
        /* 设置背景颜色 */
        background-color: #333;
    }

    /* 设置超链接的颜色 */
    .topbar a{
        font-size: 12px;
        color:#b0b0b0;
        display: block;
    }

    /* 设置超链接移入的效果 */
    .topbar a:hover{
        color: #fff;
    }

    /* 设置中间分割线 */
    .topbar .line{
        font-size: 12px;
        color: #424242;
        margin: 0px 8px;
        margin-top: -1px;
    }

    /* 设置左侧导航栏 */
    .service, .topbar li{
        float: left;
    }

    /* 设置右侧导航 */
    .shop-cart, .use-info{
        float: right;
    }

    /* 设置购物车的内边距 */
    .shop-cart{
        margin-left: 26px;
    }

    /* 设置购物车（０）这个超链接 */
    .shop-cart a{
        width: 120px;
        background: #424242;
        /* 设置购物车居中 */
        text-align: center;
    }

    /* 设置图标购物车与购物车之间的距离 */
    .shop-cart i{
        margin-right: 2px;
    }

    /* 设置超链接购物车移入效果 */
    .shop-cart:hover a{
        background-color: #fff;
        color:#FF6700;
    }

/* 公共样式 */
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

/* 去除a的下划线 */
a{
    text-decoration: none;
    color: #333;
}

body{
    font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    /* 设置容器最低宽度，以防溢出 */
    min-width: 1226px;
}

/* 设置一个类，用来表示中间容器的宽度 */
.w{
    /* 固定容器的宽度 */
    width: 1226px;
    /* 设置容器居中 */
    margin: 0 auto;
}

结构代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base1.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fa/css/all.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index1.css">

</head>
<body>
    <!-- 创建顶部导航条 -->
    <!-- 创建顶部导航条外部容器 -->
    <div class="topbar-wrapper">
        <!-- 创建内部容器 -->
        <div class="topbar w clearfix">
            <!-- 左侧的导航条 -->
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">金融</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">下载app</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>         
            </ul>

            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车（０）
                    </a>
                </li>
            </ul>

            <!-- 用户登录注册 -->
            <ul class="use-info">
                <li><a href="javascript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">消息通知</a></li>
                <li class="line">|</li>
            </ul>
  
        </div>
    </div>

</body>
</html>

效果图
在这里插入图片描述
补充：图标字体的文档一定要正确引入才能从页面中显示购物车图标

梁龙裕的博客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小米官网静态网页项目实战2

顶部导航条结构：最外围的容器（最大）三个div块左右两侧各一块，购物车独占一块（样式需设置）css下的文档（样式） /* 主页index1.html的样式表 */ /* 顶部导航条的样式 */ .topbar-wrapper{ /* 设置宽度全屏 */ width: 100%; /* 设置高度和行高 */ height: 40px; line-height: 40px; /* 设
复制链接

扫一扫