HTML网页入门练习——淘宝抢购模块设计

抢购模块设计

使用浮动属性进行抢购模块的设计。制作过程遵循从外到内，先整体后细节的顺序。
先进行分析：抢购模块分为图片部分（img）和详情部分（info）。其中详情部分又分为标题（title）、补充信息（info-detail）、进度条（progress）、售出信息（sold）和价格（price）五个小部分。
如下图所示：

经过从整体到细节的分析，设计思路也会更加清晰，相应的代码编写起来也会更加得心应手。
完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>D5-2</title><link rel="stylesheet" href="css/reset.css" /><style>.fl{float: left;}.fr{float: right;}.clearfix:after{clear: both;display: block;content: "";}.page{width: 395px;height: 180px;border: 1px solid #000000;}.img{width: 180px;height: 180px;background-color: #dcc6b9;}.info{width: 180px;height: 180px;margin-left: 35px;/* background-color: #f5dd87; */}img{width: 180px;height: 180px;}.title{width: 161px;font-size: 16px;line-height: 22px;margin-top: 11px;}.info-detail{margin-top: 12px;line-height: 28px;font-size: 12px;color: #989898;}.progress{background-color: #FFE4Dc;width: 159px;height: 6px;border-radius: 3px;overflow: hidden;}.progress .sold{width: 20%;height: 6px;background-color: red;}.sold{color: #FE3338;line-height: 28px;height: 28px;font-size: 12px;}.price span:nth-of-type(1){font-size: 12px;color: red;}.price span:nth-of-type(2){font-size: 19px;color: #ff6113;}.price span:nth-of-type(3){font-size: 12px;color: #989898;text-decoration: line-through;margin-left: 6px;}</style></head><body><div class="page clearfix"><div class="img fl"><img src="./img/goods.jpg" /></div><div class="info fl"><p class="title">[正版书籍] 浪漫地理学：追寻崇高景观</p><p class="info-detail"> 春节不打烊，新年更优惠</p><div class="progress"><div class="sold"></div></div><p class="sold clearfix"><span class="fl">20%</span><span class="fr">已抢288件</span></p><p class="price"><span> ￥</span><span>34.8</span><span class="price">￥56.1</span></p></div></div></body>
</html>

效果图：

HTML网页入门练习——淘宝抢购模块设计相关推荐

视频教程-【吴刚】淘宝天猫网站设计初级入门标准视频教程-UI
[吴刚]淘宝天猫网站设计初级入门标准视频教程业内知名UID.UED.用户体验.品牌策略与创意设计师,十三年行业职业教育培训经验,业内"UI视频第一人",教学总监.视觉设计讲师. ...
【吴刚】淘宝天猫网站设计初级入门标准视频教程-吴刚-专题视频课程
[吴刚]淘宝天猫网站设计初级入门标准视频教程-454人已学习课程介绍 <淘宝天猫网站设计初级入门标准视频教程>是WUI网页设计模块的系列课程,针对初级小白上手企业官方网站 ...
python爬取网页数据(例如淘宝)
爬取网页数据(例如淘宝) 现在淘宝商品页面不能直接爬取,需要登录,所以我们得实现模拟登录,如下即可实现模拟登录: import requests cookie_str = r'cna=QsJDGKPt ...
运用selenium库写淘宝抢购详解【3】（文末附带源码）
#每日一更[3] 今天讲的是用selenium库写一个淘宝抢购程序,10.19亲测可用 1.淘宝抢购的思路和上一篇的思路类似,通过打开浏览器筛选浏览器内的标签,并点击来实现自动化 #下面来想一下思路 ...
使用Python编写淘宝抢购代码
在 Python 中编写淘宝抢购代码,需要使用一些第三方库来帮助我们登录淘宝并获取商品信息.具体步骤如下: 安装所需的第三方库.需要使用的库有:requests.selenium 和 chromedr ...
淘宝抢购python代码-仅供学习
淘宝抢购python代码-仅供学习需要使用的python工具包有 from selenium import webdriver import datetime import time from se ...
手机淘宝的flexible设计与实现
手机淘宝的flexible设计与实现寒冬winter 发布在像winter一样冷2015年8月7日view:70095HTML5CSSCSS3移动开发在文章任何区域双击击即可给文章添加[评注]!浮 ...
淘宝商品数据库设计的一些经验
前言这几个月都在做一个通过淘宝API线下管理淘宝店的系统,学习了很多东西,这里想对淘宝商品表设计用自己的想法表现出来,如果你觉得很扯淡,可以写下自己的看法.OK,切入正题. 淘宝的商品这块的复杂程度 ...
《UCD火花集2：有效的互联网产品设计交互/信息设计用户研究讨论》一1.3 数据—判断淘宝店铺页面设计优劣的显微镜...
本节书摘来自异步社区<UCD火花集2:有效的互联网产品设计交互/信息设计用户研究讨论>一书中的第1章,第1.3节,作者 UCDChina,更多章节内容可以访问云栖社区"异步社 ...
淘宝抢购Python脚本
想买mate40,但总是抢不到,所以想试着能不能写个脚本代码. 第一步:把想要抢购的商品加进购物车,注意:脚本是对购物车内全部商品进行下单操作,所以不够买的商品最好先从购物车内删除. 第二步:写好Py ...

HTML网页入门练习——淘宝抢购模块设计

抢购模块设计

HTML网页入门练习——淘宝抢购模块设计相关推荐

最新文章

热门文章