购物网站制作——顶部导航栏（index.html)

素心如月桠

已于 2022-09-25 10:31:09 修改

阅读量2.6k

点赞数 2

分类专栏： css 文章标签： html 前端 css

于 2022-09-24 19:22:07 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/127029480

版权

css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1. 快捷导航shortcut制作

1.1 如何分块

在这里插入图片描述
分析如下

1.2 如何添加“| ”分隔符

在这里插入图片描述

1.3 如何添加小箭头

在这里插入图片描述

字体图标下载地址： IcoMoon App - Icon Font, SVG, PDF & PNG Generator
选好以后打开文件夹复制fonts文件和style.css文件的第一个css代码
复制fonts到我自己的fonts文件
复制style.css的第一个：@font-face{……}到我的common.css第一行，注意路径前面加上…/

/* 版心 */
.w{
    width: 1200px;
    margin: 0 auto;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.style_red{
    color:#c81623;
}
.shortcut{
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
    font-size: 15px;
}
.shortcut ul li{
    float: left;
}
.shortcut .fr ul li:nth-child(even){
    width: 1px;
    height: 17px;
    background-color: rgb(90, 90, 90);
    margin: 7px 12px;
}
.arrow-icon::after {
    content: '';
    font-family: 'icomoon';
    margin-left: 6px;
}

<!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>昕之优选购物网站-正品低价、品质保障、配送及时、轻松购物！</title>

    <meta name="description"
        content="昕之优选购物网站-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon" />
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="shortcut">
        <div class="w">
            <!-- 左侧 登录注册-->
            <div class="fl">
                <ul>
                    <li>昕之优选欢迎您！&nbsp;</li>
                    <li>
                        <a href="">请登录</a>&nbsp;
                        <a href="" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <!-- 右侧 导航列表-->
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">个人主页</li>
                    <li></li>
                    <li>会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注我们</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>