小米商城项目实战(二) 分类导航与字体图标

程序员文章站 2022-04-25 09:10:14

...

分类导航需求

小米商城官方网站: https://www.mi.com/index.html
阿里巴巴矢量字体图标库: https://www.iconfont.cn/

项目结构

小米商城项目实战(二) 分类导航与字体图标

阿里巴巴矢量图标库下载与使用

图标如何下载?

访问iconfont官方网站，寻找需要的图标并加入购物车
将购物车的图标批量添加到项目中，便于管理
将项目中的图标打包下载到本地
下载解压后的效果
demo_index文件详细描述了用法

HTML代码

核心代码

<!--第二部分: 导航栏=Logo+导航条+搜索框-->
<div class="header">
    <div class="container">
        <div class="header-logo">
            <a href="" class="lr">小米官网</a>
        </div>
        <div class="header-nav">
            <ul class="nav-list">
                <!--   小米手机 Redmi 红米 电视 笔记本 家电 路由器 智能硬件 服务 社区             -->
                <li class="nav-item nav-all"><a href="">全部商品</a></li>
                <li class="nav-item"><a href="">小米手机</a></li>
                <li class="nav-item"><a href="">Redmi</a></li>
                <li class="nav-item"><a href="">红米</a></li>
                <li class="nav-item"><a href="">电视</a></li>
                <li class="nav-item"><a href="">笔记本</a></li>
                <li class="nav-item"><a href="">家电</a></li>
                <li class="nav-item"><a href="">路由器</a></li>
                <li class="nav-item"><a href="">智能硬件</a></li>
                <li class="nav-item"><a href="">服务</a></li>
                <li class="nav-item"><a href="">社区</a></li>
            </ul>
        </div>
        <div class="header-search">
            <form action="" class="search-form">
                <input type="search" name="keyword" class="search-text">
                <input type="submit" value="&#xe63c;" class="search-btn iconfont">
            </form>
        </div>
    </div>
</div>

index.html完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米闪购-小米商城</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--第一部分: 顶部导航栏=导航条+登录/注册信息+购物车-->
<div class="topbar">
    <div class="container">
        <div class="topbar-nav">
            <a href="">小米商城<span>|</span></a>
            <a href="">MIUI<span>|</span></a>
            <a href="">云服务<span>|</span></a>
            <a href="">金融<span>|</span></a>
            <a href="">有品<span>|</span></a>
            <a href="">小爱开放平台</a>
        </div>
        <div class="topbar-cart"><a href=""><i class="iconfont">&#xe63b;</i>购物车 <span>（0）</span></a></div>
        <div class="topbar-info">
            <a href="">登录<span>|</span></a>
            <a href="">注册<span>|</span></a>
            <a href="" class="sep">消息通知</a>
        </div>

    </div>
</div>


<!--第二部分: 导航栏=Logo+导航条+搜索框-->
<div class="header">
    <div class="container">
        <div class="header-logo">
            <a href="" class="lr">小米官网</a>
        </div>
        <div class="header-nav">
            <ul class="nav-list">
                <!--   小米手机 Redmi 红米 电视 笔记本 家电 路由器 智能硬件 服务 社区             -->
                <li class="nav-item nav-all"><a href="">全部商品</a></li>
                <li class="nav-item"><a href="">小米手机</a></li>
                <li class="nav-item"><a href="">Redmi</a></li>
                <li class="nav-item"><a href="">红米</a></li>
                <li class="nav-item"><a href="">电视</a></li>
                <li class="nav-item"><a href="">笔记本</a></li>
                <li class="nav-item"><a href="">家电</a></li>
                <li class="nav-item"><a href="">路由器</a></li>
                <li class="nav-item"><a href="">智能硬件</a></li>
                <li class="nav-item"><a href="">服务</a></li>
                <li class="nav-item"><a href="">社区</a></li>
            </ul>
        </div>
        <div class="header-search">
            <form action="" class="search-form">
                <input type="search" name="keyword" class="search-text">
                <input type="submit" value="&#xe63c;" class="search-btn iconfont">
            </form>

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

CSS样式

body ul li {
    margin: 0;
    padding: 0;
    font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}


/*topbar*/
.topbar {
    background-color: #333;
    height: 40px;
}

.container {
    /*块级元素居中*/
    margin: 0 auto;
    width: 1226px;
}

.container::before .container::after {
    content: '';
    display: table;
}

.container::after {
    clear: both;
}

.topbar a {
    color: #b0b0b0;
    font-size: 10px;
}

.topbar a:hover {
    color: #ffffff;
}

.topbar-nav {
    float: left;
    line-height: 40px;
    height: 40px;
    font-size: 0;
}

.topbar-nav span {
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    margin: 0.5rem;
}

.topbar-info, .topbar-cart {
    float: right;
}

.topbar-cart a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 120px;
    background-color: #424242;
}

.topbar-cart a:hover {
    background-color: #ffffff;
    color: #ff6700;

}

.topbar-cart span {
    margin-left: -4px;
    font-size: 12px;
}

/*购物车字体图标设置*/
.topbar-cart i{
    font-size: 20px;
    margin-right: 4px;
    /*设置元素的垂直对齐方式, 顶端对齐*/
    vertical-align: top;
}

.topbar-info {
    margin-right: 15px;
}


.topbar-info a {
    float: left;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
}

.topbar-info span {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    margin: 0.5rem;
}

.topbar-info .sep {
    padding: 0 10px;
}


/*header*/
.header {
    height: 100px;
}

.header-logo {
    float: left;
    width: 62px;
    margin-top: 25px;
    height: 55px;
    /*border: 1px solid black;*/
}

.header-logo a {
    display: block;
    height: 55px;
    width: 55px;
    /*背景颜色为小米黄, 图片填充，不重复，居中显示*/
    background: #ff6700 url(../img/favicon.ico) no-repeat center;
}

/*网络不好的情况下，logo不能正常显示，则显示lr里面的文字*/
.header-logo .lr {
    text-align: left;
    /*文本缩进*/
    text-indent: -288888em;
}

.header-nav {
    float: left;
    width: 850px;
    height: 100px;
    /*border: 1px solid black;*/
}

.header-nav .nav-list {
    width: 820px;
    height: 88px;
    font-size: 16px;
}

.header-nav .nav-list .nav-item {
    float: left;
}

.header-nav .nav-list .nav-item a {
    color: #333;
    display: block;
    padding: 26px 10px 38px;
}

.header-nav .nav-list .nav-item a:hover {
    color: #ff6700;

}

.header-nav .nav-list .nav-all a:hover {
    color: #333;

}

.header-search {
    /*定位*/
    position: relative;
    float: right;
    width: 296px;
    height: 55px;
    margin-top: 25px;
    /*border: 1px solid black;*/
}

.header-search .search-form {
    display: block;
    height: 296px;
    width: 50px;
}


.header-search .search-form .search-text {
    /*定位*/
    position: absolute;
    top: 0;
    right: 51px;
    display: block;
    width: 245px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #e0e0e0;
    outline: 0;
}

.header-search .search-form .search-btn {
    /*定位*/
    position: absolute;
    top: 0;
    right: 0;
    /*块显示*/
    display: block;
    /*设置宽高和边框*/
    width: 52px;
    height: 50px;
    border: 1px solid #e0e0e0;
    /*字体大小和上下居中*/
    font-size: 24px;
    line-height: 24px;
    /*背景颜色、字体颜色*/
    background: #fff;
    color: #616161;
    /*轮廓线不显示*/
    outline: 0;
}

.header-search .search-form .search-btn:hover {
    background-color: #ff6700;
    color: #fff;
}


/*基于阿里巴巴矢量图标库的图像字体*/
@font-face {
  font-family: 'iconfont';
  src: url('font/iconfont.eot');
  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
      url('font/iconfont.woff2') format('woff2'),
      url('font/iconfont.woff') format('woff'),
      url('font/iconfont.ttf') format('truetype'),
      url('font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

相关标签：小米商城项目实战 html css javascript Web前端

上一篇：安卓自定义view仿小米商城购物车动画

下一篇： rem和em的区别