学了知识就一定要对知识进行巩固，而做实战做练习就是对知识最好的巩固了。

例1：

代码行：

效果图：

例2：

代码行：

效果图：

例1：

先用块元素div装下文档，并用空格符br隔开每一行，再给box1添加参数，width：230px，height： 800px，background-color：whitesmoke，font-size：20px。

代码行：

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

效果图：

自己动手做的跟京东的还是有些差距，但是大体一样就好了。

例2：

先用块元素div装下文档，用style：text-align:center，设置字体居中，然后添加img图片标签，可以再百度找到类似的图片复制链接添加到src里，之后再给box1 box2 box3添加参数，width: 200px; height: 200px;background-colo:颜色看图而定；再给img添加参数，width:150px;padding-top: 50px;到这里就完成了。

代码行：

<div class="box1" style="text-align:center">电脑万店<br>满1000元减100 <img id="box1" src="https://img1.baidu.com/it/u=4249977665,2401571261&fm=253&fmt=auto&app=138&f=JPEG?w=8h=500"></div><div class="box2" style="text-align:center">上新了京造<br>新品享早鸟价<img id="box2" src="https://img2.baidu.com/it/u=817224735,3153868777&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"></div><div class="box3" style="text-align:center">新客有礼<br>领券满11减10<img id="box3" src="https://img0.baidu.com/it/u=2214557647,2813279602&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></div>

效果图：

实在是能力有限，只能做到尽量类似，之后技术更新再来修改代码了。

web开发——css京东图片列表和左侧导航条的演示相关推荐

京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
Web开发中的图片管理：策略与实践
前言在Web开发中,图像是无法忽视的重要组成部分.然而,随着图片数量的增加和高清图像的普及,图片管理变得越来越复杂.在这篇文章中,我们将详细探讨Web开发中的图片管理策略和实践,包括图片优化.存储. ...
java开发图片显示不出来_java web开发中显示图片的问题
记录一个java Web开发中显示图片的小问题: 我碰到的问题是:把服务器上存的图片,在客户端的浏览器中显示出来.解决方法如下: 两种显示方式一是:在servlet 或 action中直接输入图片到 ...
详细阐述Web开发中的图片上传问题
Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...
jquery-9 京东和酒仙网左侧导航如何实现
jquery-9 京东和酒仙网左侧导航如何实现一.总结一句话总结:布局的话多用定位,由底往上一层层的来布. 1.如何实现导航向div的平滑滑动? 右侧div和左侧的li一定要放在一起 127 &l ...
京东左侧导航条练习笔记
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
excel工作簿左侧导航条_Excel工作簿中的高效导航
excel工作簿左侧导航条 When I saw the signs in this shop window, I laughed, and snapped this picture. 当我在商店橱窗 ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

web开发——css京东图片列表和左侧导航条的演示

学了知识就一定要对知识进行巩固，而做实战做练习就是对知识最好的巩固了。

例1：

代码行：

效果图：

例2：

代码行：

效果图：

web开发——css京东图片列表和左侧导航条的演示相关推荐

最新文章

热门文章