【汇智学堂】-div+css布局十二(商品列表图文展示）

效果图：

html文件：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图文显示商品</title></head><body><div style="padding-bottom: 10px;"><span style="padding-left: 20px;">已付款</span><span style="padding: 300px;">付款方式：微信支付</span></div><div><hr style="width: 700px;margin-left: 0px;"></div>             <div ><div style="float: left;">[外链图片转存失败(img-WsbFjtHC-1562071685050)(https://mp.csdn.net/mdeditor/images/070201.jpg)]</div><div style="float:left"><p style="line-height: 1px;padding-left: 15px;">杂纸张A级</p><p style="padding-left: 15px;">单价：12.2元</p><p style="padding-left: 15px;line-height: 1px;">24kg</p></div><div style="float: left;padding-top: 30px;padding-left: 20px;"><label>1000元</label></div><div style="float: left;padding-left: 100px;">[外链图片转存失败(img-bL0uUBFK-1562071685051)(https://mp.csdn.net/mdeditor/images/070202.jpg)]</div><div style="float:left"><p style="line-height: 1px;padding-left: 15px;">黄纸张A级</p><p style="padding-left: 15px;">单价：2.2元</p><p style="padding-left: 15px;line-height: 1px;">14kg</p></div><div style="float: left;padding-top: 5px;padding-left: 20px;"><label>1000元</label></div></div><div><hr style="width: 700px;margin-left: 0px;margin-top: 130px;"></div><div style="padding-top:0px;padding-left: 500px;"><p>总计：2000元</p></div>            </body>
</html>

【汇智学堂】-div+css布局十二(商品列表图文展示）相关推荐

【汇智学堂】-div+css布局十五(汇智学堂主页-工程项目展示）
效果图: html文件的第一行div: <div style="height: 250px;"><div style="margin:0 auto;wi ...
【汇智学堂】docker网络管理之二
1.创建自定义网络 在Docker主机上可以使用docker network create指令来创建网络. 其中 --driver bridge可省略 查看是否成功 查看新建网络的详情 dock ...
div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div. 块级元素div尽量少用,其实和ta ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
网页设计（二）——DIV+CSS布局1
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
Div+CSS布局入门教程(二) 写入整体层结构与CSS
接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: <!DOCTYPE html PUBLIC "- ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家
虽然不是狂爱足球爱好者,但多少会有关注下,像梅西和C罗是经常听到的可能是没有我们队的原因,关注会比较少,只看个结果,所以趁着这次机会,通过js前端技术div+css布局方式绘制本次世界杯足球比赛对 ...

【汇智学堂】-div+css布局十二(商品列表图文展示）

【汇智学堂】-div+css布局十二(商品列表图文展示）相关推荐

最新文章

热门文章