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

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

目录

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

例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>
    

 

 效果图：

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