css作业：京东头部导航

最新推荐文章于 2022-06-23 21:37:55 发布

abc630727719

最新推荐文章于 2022-06-23 21:37:55 发布

阅读量514

点赞数

分类专栏： # css 文章标签： css html css3

本文链接：https://blog.csdn.net/abc630727719/article/details/105122036

版权

该博客介绍了如何使用CSS3技术来制作京东风格的头部导航。通过展示html代码和详细的css源码，作者提供了完整的实现步骤，并提供源码下载链接以供读者实践。

摘要由CSDN通过智能技术生成

目标：
在这里插入图片描述
成品：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/top/iconfont.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/top-style.css">
</head>
<body>
    <div class="top-bar">
        <div class="top-bar-content">
            <div class="content-left">
                <div class="menu-box">
                    <i class="iconfont icon-dingwei"></i>
                    <a href="javascritp:;">山西</a>
                </div>  
                <div class="menu-item-box box1-set"></div>
            </div>          
            <div class="content-right">
                <ul>
                    <li>
                        <a href="javascript:;">你好，请登录