2021-07-15

最新推荐文章于 2022-09-08 12:39:40 发布
最新推荐文章于 2022-09-08 12:39:40 发布
阅读量95 收藏
点赞数
分类专栏： 网页 前端小项目 文章标签： css html5 js 前端 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chris_qj/article/details/118741631
版权

前端网页小项目（模仿京东官网左侧导航栏）

在这里插入图片描述
使用VS编辑器
带有详细注释
注：1.未插入超链接
2.未更改对应的京东官网中文

<!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>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        /* 设置boby */
        body {
            /* 设置页面背景，方便查看 */
            background-color: aquamarine;
        }

        /* 设置菜单外部容器 */
        .left-nav {
            /* 设置宽度 */
            width: 190px;
            /* 设置高度 */
            height: 450px;
            /* 设置padding */
            padding: 10px o;
            /* 设置整体背景颜色 */
            background-color: #fff; 
            /* 外部容器位置移动 */
            margin: 50px auto;
        }

        /* 设置菜单内部的（每一行）item */
        .left-nav .item {
            /* 每一个item的高度 */
            height: 25px;
            /* 让文字元素上下居中，只需将父元素的line-height设置为和父元素的height一样即可 */
            line-height: 25px;
            /* 设置item的右内边距，所有文字整体左移 */
            padding-left: 18px;
            /* 设置字体大小 */
            font-size: 12px;
        }

        /* 为item设置一个鼠标移入的状态 */
        .item:hover {
            background-color: #d9d9d9;
        }

        .item a{
            /* 设置字体大小 */
            font-size: 14px;
            /* 设置字体颜色 */
            color:#333 ;
            /* 去除下划线 */
            text-decoration: none;
        }
        /* 给超链接设置颜色，点击则变色 */
        .item a:hover{
            color: #c81623;
        }
    </style>
</head>

<body>
    <!-- 创建一个外部容器 nav(div) div(div)  ul(li) -->
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">电脑</a>/
            <a href="#">办公</a>/
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>


    </nav>

</body>

</html>
小洋葱oO-Oo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-07-28
lixiaoxianer的博客
07-28 3927
kubeadmin 安装k8s1.20集群 标签（空格分隔）： kubernetes架构系列 一：k8s1.20.x 的重要更新 二：k8s1.20.x 的安装 2.1 ：高可用Kubernetes集群规划 2.2 yum 的更新配置 （所有节点全部安装） 一：k8s1.20.x 的重要更新 1、Kubectl debug 设置一个临时容器 2、Sidecar 3、Volume：更改目录权限，fsGroup 4、ConfigMap和Secret K8S官网：https://kubernetes.io/
PHP8.0中文手册【2021-07-15更新】
07-26
如果下载后无法浏览可能是锁定了 在属性中解锁 如果下载后无法浏览可能是锁定了 在属性中解锁 如果下载后无法浏览可能是锁定了 在属性中解锁 重要的事情说三遍！！！ PHP8.0手册 白女票看这里->下载路径： cn2....
2021-07-18 Debug
Choulongx的博客
07-18 435
今天发现了一个低级错误 [Error] ld returned 1 exit status 回去查发现是写错了主函数名称 我是sb
2021-03-15
weixin_44902539的博客
03-15 1173
好网站 https://blog.csdn.net/u013317445/article/details/88196373?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-6.control&dist_request_id=1328641.48931.16157665162059593&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-
2021-07-15 Android repo 使用学习持续更新中
海月汐辰
07-15 2271
1、repo常用命令 xxx$ .repo/repo/repo help usage: repo COMMAND [ARGS] The most commonly used repo commands are: abandon Permanently abandon a development branch branch View current topic branches branches View current topic bran...
2021-07-15-2021年全球10大最佳单板计算机开发板（SBC）（第1-3名）
南岭笑笑生之家
09-08 1731
2021-07-15-2021年全球10大最佳单板计算机开发板（SBC）（第1-3名）发布于2021-07-15 17:14:02 作者：Cabe Atwell EE Times资深博主2021年全球10大最佳单板计算机开发板（SBC）系列之一。
2021-07-20
热门推荐
bananaAppen的博客
07-20 1万+
Markdown学习 标题： 二级标题 三级标题 字体 hello world! hello world! hello world! hello world! 引用 当一个牛逼的大佬 分割线 图片 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QBYDjzR-1626793548647)(C:\Users\Public\Pictures\Sample Pictures\de1d0155b209eb8677402e5bb7c217f31c21675b.png@880
2021-01-05
weixin_44822406的博客
01-05 851
第一次接触这个CSDN博客，希望大家多多关照，有什么做的不好不周到的地方希望大家谅解。从现在开始会陆续发一些大家所需要的东西。
2021-01-18
weixin_54641072的博客
01-18 1756
找程序猿哥哥！！！！编制App或者小程序
2021-01-10
qq_22667507的博客
01-10 920
jupyter notebook中直接安装python的第三方库。 例如安装pymysql ： ! pip install pymysql。 升级pip：
2021全球网络趋势报告[2021-07-15]（18页）.pdf
05-19
2021全球网络趋势报告[2021-07-15]（18页）.pdf
2021-07-15：一元多项式的乘法计算（C++）.cpp
07-17
2021-07-15：一元多项式的乘法计算（C++）：https://blog.csdn.net/qq_45913057/article/details/118851829
制造业数字化发展模式的先进探索[2021-07-15]（29页）.pdf
05-24
【制造业数字化发展模式的先进探索】 本报告聚焦于中国制造业在数字化变革中的发展模式，探讨如何应对当前挑战并实现高效转型。报告指出，我国制造业在过去的几十年里取得了显著成就，但随着传统红利的减弱，以及新...
report_vip_2021-12-18-15-17-07.zip
12-18
标题“report_vip_2021-12-18-15-17-07.zip”表明这是一个VIP级别的报告，生成于2021年12月18日15点17分07秒。通常，这样的命名格式用于记录文件的创建日期和时间，以便后续追踪和管理。在IT领域，VIP（Very ...
VW 80000 最新版 EN-2021.pdf
04-06
* VW 80101：1987-06, 1988-08, 1992-01, 1993-04, 1994-05, 1995-06, 1998-01, 1999-06, 2000-09, 2001-04, 2003-05, 2004-07, 2005-06, 2006-10, 2009-03 * VW 80000：2009-10, 2013-06, 2017-10, 2020-12 变化 ...
集合框架2021-07-02.docx
07-02
例如，初始容量为10，第一次扩容后变为15，第二次扩容后变为22，以此类推。 在Java中，异常处理是必不可少的一部分。例如，`NoSuchFieldException`表示尝试访问的字段不存在，`NullPointerException`表示空指针引用...
gtk3-runtime-3.24.29-2021-04-29-ts-win64.exe
07-10
gtk3-runtime-3.24.29-2021-04-29-ts-win64.exe
Pipeline-Trigger-2021-04-07T15-15-10.916Z:为工具链创建
04-07
标题“Pipeline-Trigger-2021-04-07T15-15-10.916Z:为工具链创建”表明这是一个关于自动化构建或持续集成（CI/CD）流程的项目，可能是一个特定时间点的版本快照。在IT行业中，Pipeline通常指的是CI/CD管道，它是一...
结果是这样的，没有根据id排：start_date end_date 0 2020-01-15 2020-04-27 1 2020-09-30 2020-10-10 2 2021-02-07 2021-02-22 3 2021-03-06 2021-03-24 4 2020-01-21 2020-03-03 .. ... ... 639 2021-03-09 2021-03-18 640 2021-03-24 2021-04-01 641 2020-01-12 2020-04-19 642 2021-02-09 2021-02-18 643 2020-01-18 2020-03-09
最新发布
06-03
如果你想根据企业id对结果进行排序，可以在输出结果之前加上一行代码： ```python result = result.sort_values(by=['id']) ``` 此代码将会根据id对结果进行排序，使得每个企业的结果排在一起。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值