练习-京东左侧栏

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量86 收藏
点赞数
分类专栏： 练习 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/n32349/article/details/127310826
版权

在这里插入图片描述

<!DOCTYPE html>
<html>

<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>Document</title>
    <style>
        body{
            background-color: gray;
        }
        .left-nav{
              width: 176px;
              height:460px;
              background-color: white;
              padding: 1px 10px;                         
        }
        .left-nav .item{
            height: 25px;
            line-height: 25px;
            padding-left: 10px;
        }
        .cate_menu_line{
            padding: 0 1px;
            font-size: 12px;
            
        }
        .item a:hover{
            color: red;
        }
        .item a{
            font-size: 14px;
            color: #333;
            text-decoration: none;
        }
       
    </style>

</head>

<body>
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

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

        </div>
        <div class="item">
            <a href="#">家居</a><span class="cate_menu_line">/</span>
            <a href="#">家具</a><span class="cate_menu_line">/</span>
            <a href="#">家装</a><span class="cate_menu_line">/</span>
            <a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">男装</a><span class="cate_menu_line">/</span>
            <a href="#">女装</a><span class="cate_menu_line">/</span>
            <a href="#">童装</a><span class="cate_menu_line">/</span>
            <a href="#">内衣</a>
        </div>
        <div class="item">
            <a href="#">美妆</a><span class="cate_menu_line">/</span>
            <a href="#">个护清洁</a><span class="cate_menu_line">/</span>
            <a href="#">宠物</a>
        </div>
        <div class="item">
            <a href="#">女鞋</a><span class="cate_menu_line">/</span>
            <a href="#">箱包</a><span class="cate_menu_line">/</span>
            <a href="#">钟表</a><span class="cate_menu_line">/</span>
            <a href="#">珠宝</a>
        </div>
        <div class="item">
            <a href="#">男装</a><span class="cate_menu_line">/</span>
            <a href="#">运动</a><span class="cate_menu_line">/</span>
            <a href="#">户外</a>
        </div>
        <div class="item">
            <a href="#">房产</a><span class="cate_menu_line">/</span>
            <a href="#">汽车</a><span class="cate_menu_line">/</span>
            <a href="#">汽车用品</a>
        </div>
        <div class="item">
            <a href="#">母婴</a><span class="cate_menu_line">/</span>
            <a href="#">玩具乐器</a>
        </div>
        <div class="item">
            <a href="#">食品</a><span class="cate_menu_line">/</span>
            <a href="#">酒类</a><span class="cate_menu_line">/</span>
            <a href="#">生鲜</a><span class="cate_menu_line">/</span>
            <a href="#">特产</a>
        </div>
        <div class="item">
            <a href="#">艺术</a><span class="cate_menu_line">/</span>
            <a href="#">礼品鲜花</a><span class="cate_menu_line">/</span>
            <a href="#">农资绿植</a>
        </div>
        <div class="item">
            <a href="#">医药保健</a><span class="cate_menu_line">/</span>
            <a href="#">计生情趣</a>
        </div>
        <div class="item">
            <a href="#">图书</a><span class="cate_menu_line">/</span>
            <a href="#">文娱</a><span class="cate_menu_line">/</span>
            <a href="#">教育</a><span class="cate_menu_line">/</span>
            <a href="#">电子书</a>
        </div>
        <div class="item">
            <a href="#">机票</a><span class="cate_menu_line">/</span>
            <a href="#">酒店</a><span class="cate_menu_line">/</span>
            <a href="#">旅游</a><span class="cate_menu_line">/</span>
            <a href="#">生活</a>
        </div>
        <div class="item">
            <a href="#">众筹</a><span class="cate_menu_line">/</span>
            <a href="#">白条</a><span class="cate_menu_line">/</span>
            <a href="#">保险</a>
        </div>
        <div class="item">
            <a href="#">安装</a><span class="cate_menu_line">/</span>
            <a href="#">维修</a><span class="cate_menu_line">/</span>
            <a href="#">清洗</a><span class="cate_menu_line">/</span>
            <a href="#">二手</a>
        </div>
        <div class="item">
            <a href="#">工业品</a>
        </div>

    </nav>
</body>

</html>

盒子模型

CSS将页面所有元素都设置为了一个矩形的盒子，对页面的布局就变成了将不同的盒子摆放到不同的位置。

每一个盒子由以下几个部分组成：

  • 内容区（content）

  • 边框（border）

  • 内边距（padding）

  • 外边距（margin）

n32349
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（小项目）--京东左侧导航栏
weixin_55904436的博客
12-10 230
前端练习小项目--京东左侧导航栏
CSS布局练习，jd左侧导航栏
qq_43987112的博客
05-10 323
css布局练习，jd左侧导航栏
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
weixin_70320000的博客
07-09 1117
跟着尚硅谷老师的练习，记录一下自己做的内容，查漏补缺。目录一、京东左侧导航栏 1、第一次自己做的代码（未看老师讲解视频前做的）：总结： 2、看完老师视频后跟着写的代码：注意点及总结删除行内元素间的空白的方法二、网易新闻列表1、自己做的结构2、看视频后做的代码.........
前端练习--京东导航
comegoing_xin_lv的博客
07-22 383
京东左侧导航，超链接
P34-前端基础-京东左侧导航条
Bruce小鬼
01-19 834
P34-前端基础-京东左侧导航条 1.概述 在这个导航栏中会用到前面学习CSS的一些基础知识。通过一个导航栏的练习，将前面学习的内容做一个总结。 2.京东左侧导航条案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>京东左侧导航条</title> <link rel="stylesheet" href="./css/normalize.cs
练习：京东商城左侧导航栏_1
斜键仙的博客
11-08 2336
练习：京东商城左侧导航栏，运用了css的简单布局，以及当鼠标移到li标签时有一个背景效果，练习源文件下面有链接。 目录前言一、练习1、效果图：2、文件目录：二、效果实现1、源码：2、运行效果：总结下载链接 前言 该练习，可以采用nav(div)、div(div)、ul(li)等几种结构，看个人喜欢，我下面用的是ul(li)。 一、练习 1、效果图： 2、文件目录： 二、效果实现 1、源码： 1_index.html文件代码如下： <!DOCTYPE html> <html la
jQuery仿京东左侧物品导航栏练习
AI悦创·编程私教1v1
12-24 2068
1、HTML 和样式部分 <style type="text/css"> html{color:#666;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} body{font:12px/1.3 arial,helvetica,
前端基础练习-实现JD顶部导航
阿甘正传
09-12 2326
前言 京东是典型的电商类网站，学习这个网站的制作比较有价值。我们准备用WebStorm进行开发。 京东首页的截图为：http://img.smyhvae.com/20180119_1653.jpg 页面规划：新建一个空的工程 我们首先新建一个空的工程： CSS初始化（基本样式） 京东网站有一些基本样式，在各个页面中都要用到：（将这些基本样式copy到css.base里面去） base.css中的...
仿京东左侧菜单弹出html代码,一个类似京东网页左侧菜单扩展的特效代码
weixin_36302268的博客
05-30 765
Furniture* {margin:0; padding:0;}html {color:#434343; background-color:#fff;}body{color:#434343;font-family:Arial,宋体;line-height:20px; font-size:12px;height: 100%;width: 100%; word-break:normal; backg...
练习-京东商品详情界面.rar
03-02
在本实践项目“练习-京东商品详情界面.rar”中，主要目标是为初学者提供一个运用jQuery技术来构建京东商品详情界面的练习平台。jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript代码的...
DOM练习-onkeydown事件--onmouseover事件-左侧菜单栏点击收放-图片切换-checkbox全选-表单校验
02-15
【前端 HTML+CSS+JavaScript(JS)】DOM练习-左侧菜单栏点击收放 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片切换的实现 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选 带...
【CSS源码】前端基础练习-京东顶部导航
01-19
本实践项目是关于“【CSS源码】前端基础练习-京东顶部导航”，它旨在帮助开发者掌握如何使用CSS来创建类似京东网站的顶部导航条。通过这个练习，你可以深入理解CSS布局、选择器、定位、过渡效果以及响应式设计等关键...
练习2：京东商城左侧导航栏.rar
11-08
在本练习中，我们将探讨如何创建京东商城左侧导航栏，这是一个常见的网页设计任务，涉及到HTML和CSS的基础知识。我们将分析这个项目中所用到的技术和方法，并深入理解它们的工作原理。 首先，HTML（HyperText ...
Simulink仿真练习-习题+解析
05-30
Simulink仿真练习-习题+解析Simulink仿真练习-习题+解析 Simulink仿真练习-习题+解析Simulink仿真练习-习题+解析 Simulink仿真练习-习题+解析Simulink仿真练习-习题+解析 Simulink仿真练习-习题+解析Simulink仿真...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1301
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 442
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 228
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 285
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
Oracle Database 10g 教材：课堂练习II-数据库管理
"Oracle Database 10g：数据库管理－课堂练习II" Oracle Database 10g 是 Oracle 公司推出的一款企业级数据库管理系统，它提供了强大的数据存储、管理和处理能力。这个练习手册是Oracle官方的培训教材，旨在帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值