小米商城静态页面练习（一）

鹿蹊zz

已于 2022-07-03 14:06:16 修改

阅读量779

点赞数 4

分类专栏：小米商城静态页面仿写文章标签： html css3 前端

于 2022-05-05 16:30:34 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/124590606

版权

小米商城静态页面仿写专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、练习前的准备工作

1、项目的搭建

新建一个小米商城的文件夹，在其目录下分别再新建两个文件夹：img、css，文件夹用来存放重置样式表、公共样式表、页面样式表等文档，文件夹img用来存放素材图片。
结构的划分：将整个页面进行一块块的拆分，一块一块的来写。

计划效果：

二、顶部导航条的搭建

结构：最外围的容器

设置三个div块，左、右两侧各一块，购物车独占一块。
css下的文档（当前页面样式表）

  /* 主页index.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;
        font-size: 12px;
    }

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

公共样式（base.css）

/* 清除浮动*/
.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;
}

HTML代码（index.html）

<!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>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./font_3373002_ourrffhs0zc/iconfont.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index.css">

</head>

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

            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="#">
                        <i class="iconfont">&#xe63f;
                        </i>
                        购物车（０）
                    </a>
                </li>
            </ul>

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

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

效果图：

注意：图标字体需要正确引用，才能显示购物车的图标。

鹿蹊zz

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
小米商城静态页面练习（一）

一、练习前的准备工作1、项目的搭建新建一个小米商城的文件夹，在其目录下分别再新建两个文件夹：img、css，文件夹用来存放重置样式表、公共样式表、页面样式表等文档，文件夹img用来存放素材图片。结构的划分：将整个页面进行一块块的拆分，一块一块的来写。计划效果：二、顶部导航条的搭建结构：最外围的容器设置三个div块，左、右两侧各一块，购物车独占一块。 css下的文档（当前页面样式表） /* 主页index.html的样式表 */ ......
复制链接

扫一扫