实现页面的图文混排布局（Web作业）

介绍

实现如下图的HTML+CSS的静态网页

给了一个JS的设计稿，可以查看各个元素的间距、颜色、样式代码等

仿写一个静态的网页

静态代码效果

代码

以上的代码，我会打包放在本文的链接中，需要学习交流的小伙伴们可以下载。
实践代码：20201021HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>周黑鸭网站</title><style>body {background: #f2f2f2;}.box {width: 90%;height: 90%;margin: 0 auto;}.nav {margin-left: 87px;}.tit {color: #ff5500;font-family: Noto Sans SC;font-weight: regular;font-size: 22px;line-height: normal;letter-spacing: 0px;text-align: left;}.img-vector {float: left;}.tit {position: relative;top: -4px;vertical-align: bottom;left: 20px;}.categor {margin-left: 16px;}.content {height: 400px;width: 260px;margin: 4px 50px 0px 0px;display: flex;border-radius: 32px;background: #ffffff;border: 1px solid #ebebeb;}.content-box {border-radius: 10px;}.image-pic {position: relative;top: 2px;left: 2px;margin: 21px 21px 144px 21px;height: 178px;width: 218px;}.desc {color: #666666;font-family: Noto Sans SC;font-weight: regular;font-size: 12px;line-height: normal;letter-spacing: 0px;text-align: left;}.discount {width: 91px;height: 26px;margin-top: 10px;background: #ffffff;border: 1px solid #ff8000;color: #ff8000;line-height: 26px;text-align: center;}.bottom {margin-left: 22px;margin-right: 22px;position: relative;top: -120px;}.container {display: flex;justify-content: center;}.miaosha {color: #ff2200;font-family: Noto Sans SC;font-weight: regular;font-size: 12px;line-height: normal;letter-spacing: 0px;text-align: left;width: 50px;}.fz {font-size: 28px;color: #ff5000;}.fc {color: #999999;font-family: Noto Sans SC;font-weight: regular;font-size: 12px;line-height: normal;letter-spacing: 0px;text-align: left;text-decoration: line-through;}.hot-count {color: #ff2200;font-family: Noto Sans SC;font-weight: regular;font-size: 14px;line-height: normal;letter-spacing: 0px;text-align: left;}.hot-pic {width: 11px;height: 15px;vertical-align: middle;}.hot {margin-top: 8px;}</style></head><body><div class="box"><div class="nav"><div class="title"><imgsrc="../热卖/data/exports/Vector-1@1x.png"class="img-vector"alt=""/><div class="tit">热卖单品</div></div><div class="category"><img src="../热卖/data/exports/牙膏@1x.png" alt="" /><img class="categor" src="../热卖/data/exports/口红@1x.png" alt="" /><imgclass="categor"src="../热卖/data/exports/帆布鞋@1x.png"alt=""/><imgclass="categor"src="../热卖/data/exports/沐浴露@1x.png"alt=""/><img class="categor" src="../热卖/data/exports/拖鞋@1x.png" alt="" /></div><!-- <hr style="border: 1px solid #EBEBEB" /> --><img src="../热卖/data/exports/Line-1@1x.png" alt="" /></div><div class="container"><div class="content"><div class="content-box"><imgclass="image-pic"src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"alt=""/><div class="bottom"><div class="desc">燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...</div><div class="discount">满200减50</div><span class="miaoshabox"><span class="miaosha">秒杀价￥</span><span class="miaosha fz">268</span><span class="fc">￥588</span></span><div class="hot"><img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /><span class="hot-count">卖爆15.6万件</span></div></div></div></div><div class="content"><div class="content-box"><imgclass="image-pic"src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"alt=""/><div class="bottom"><div class="desc">燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...</div><div class="discount">满200减50</div><span class="miaoshabox"><span class="miaosha">秒杀价￥</span><span class="miaosha fz">268</span><span class="fc">￥588</span></span><div class="hot"><img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /><span class="hot-count">卖爆15.6万件</span></div></div></div></div><div class="content"><div class="content-box"><imgclass="image-pic"src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"alt=""/><div class="bottom"><div class="desc">燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...</div><div class="discount">满200减50</div><span class="miaoshabox"><span class="miaosha">秒杀价￥</span><span class="miaosha fz">268</span><span class="fc">￥588</span></span><div class="hot"><img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /><span class="hot-count">卖爆15.6万件</span></div></div></div></div><div class="content"><div class="content-box"><imgclass="image-pic"src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"alt=""/><div class="bottom"><div class="desc">燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...</div><div class="discount">满200减50</div><span class="miaoshabox"><span class="miaosha">秒杀价￥</span><span class="miaosha fz">268</span><span class="fc">￥588</span></span><div class="hot"><img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /><span class="hot-count">卖爆15.6万件</span></div></div></div></div></div></div></body>
</html>

其他

上面的代码主要使用了图文混排的display布局方式，图文混排是网页中常用的排版方式，本人资质尚浅，代码有误之处，还望指出，鄙人感激不尽！

实现页面的图文混排布局（Web作业）相关推荐

03-CSS操作--CSS操作规范（书写技巧）+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中
一.CSS操作规范 1.CSS书写技巧 (1)最外层是一个<div id="bigDiv">,将所有元素都包进去 (2)去除<body>的外边距(body{ ...
页面内容样式设计——图文混排
目录图文混排实现一个图文混合单元模块 1. HTML代码 2. 浏览器显示效果图文混排图文混排是制作精美页面必须使用的技术,通过将适当的图像与文字有效地排列在一起,可以大大丰富版面内容.图文混 ...
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码. 今天我们共同学习一款"图文混排CSS列表&qu ...
CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属 ...
为了用Unity来实现APP效果的页面，自制一个简易的图文混排系统。
图文混排设计方案实现一个Unity支持的简单图文混排模块,实现时需要考虑尺寸适配的限制,设计思路是自定义标签,采用微信朋友圈里的那种流式布局,一行一个标签,做一个一维的列表,方便手动编辑也方便程序实 ...
简单的图文混排页面设计
一偏及其简单的图文混排页面设计,先看效果图. 在看代码图,在img图片标签用src调用图片路径,align设置图片左对齐,hspace设置左右水平间距,width和height设置图片大小.接下来在段 ...
html怎么制作图文混排页面,CSS 网页图文混排的10个技巧
1. 首行缩进你知道的,从小学,老师就教我们,段落的开头应该空两格.而你使用word的时候,也有首行缩进这个功能,但在html中你的空格键好像起不了作用了.当然,你可以用来代替一个空格,但这不是理 ...
iOS - 图文混排技术方案分享
前言不少同学在工作中都能遇到图文混排的需求.但是实现图文混排的技术方案有好几种,相应的方案优劣也有差别.今天和大家一起分享一下图文混排的技术方案以及我的选择. Demo和解析工具已经开源 GitHu ...
XMPP键盘订制实现图文混排
在现阶段的通信服务中,各种标准都有,因此会出现无法实现相互连通,而XMPP(Extensible Message and presence Protocol)协议的出现,实现了整个及时通信服务协议的互 ...
html5网页制作图文混排,03第3章制作图文混排网页.docx
第3章制作图文混排网页图像也是网页中的主要元素之一,图像不但能美化网页, 而且能够更直观地表达信息. 在页面中恰到好处地使用图像,能使网页更加生动.形象和美观. [教学导航] 教学目标 (1)学会通 ...

实现页面的图文混排布局（Web作业）

介绍

静态代码效果

代码

其他

实现页面的图文混排布局（Web作业）相关推荐

最新文章

热门文章