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

四席城

于 2023-01-09 22:16:44 发布

阅读量335

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_61506131/article/details/128621540

版权

文章通过两个示例强调了学习知识后进行实战练习的重要性，特别是对于IT技术如HTML和CSS。例1展示了如何使用div和br元素创建类似京东的商品分类布局，而例2则演示了如何居中显示文本和添加图片来创建促销广告效果。尽管实现可能不完全相同，但这些练习有助于巩固和应用所学的技术。

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

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

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