HTML+CSS简单应用实例——购物网站的制作（四）
2024-05-18 00:45:38
HTML+CSS简单应用实例——购物网站的制作（四）
本页面是第二个商品页面，做了个限时抢购的页面。
下面是效果图：
分析：上方限时抢购和12点准时开抢是两个DIV，下面每个商品是一个单独的DIV,总体是一个大的DIV。下面是脚本
具体代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘淘网限时抢购</title><style>.Bar{width: 100%; background-color:#FFFFFF;height:100px;position: absolute;top:0px;left:0px;}.bar{width: 100%; background-color: #DC143C;height:60px;position: absolute;top:100px;left:0px;text-align: center;padding-bottom: 35px;}.ta{position: absolute;top:220px;left:295px;width: 1000px;}.ma{background-color: white;float: left;margin: 10px;}.footer{ position:absolute;top:2500px;left:220px;width:1100px;margin:0 auto;border-top:#dddddd 1px solid; height: 210px; background: rgb(245,245,245);text-align: center;}.footer p{ margin-top:20px;}.footer a{color:#666;}.footer a:hover{ color:rgb(228, 121, 89);}.footer .fp{color:#666;margin-top:10px;}.footimg{width="120px";height: "10px";}</style></head><body bgcolor=#EEEEEE><div class="Bar"><p align="center" style="font-family: 宋体; font-size: 40px;color: #FF4500;"><b>-限时抢购-</b></p></div><div class="bar"><p align="center" style="font-family: 宋体; font-size: 35px;color:darkslategray;" ><b>12月12日00：00准时开抢</b></p></div ><div class="ta"><div class="ma"><img src="img/坚果.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">每日坚果混合坚果一箱30包</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">前两小时前150件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥26.8</p></div><div class="ma"><img src="img/抽纸.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">瑜伽猫大号抽纸每包一百抽</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前两小时前50件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥19.9</p></div><div class="ma"><img src="img/挂架.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">长形挂架放床边质量保证</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前一小时前150件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥59.9</p></div><div class="ma"><img src="img/橘子.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">10斤水果甜柑橘新鲜现摘</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">前两小时前50件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥9.9</p></div><div class="ma"><img src="img/洗衣液.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">洗衣液家庭促销总和整箱</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前两小时前150件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥80.5</p></div><div class="ma"><img src="img/润唇膏.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">润唇膏女保湿滋润去死皮</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前一小时前200件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥17.8</p></div><div class="ma"><img src="img/饼干.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">上海三牛饼干散装特价</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">前两小时前50件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥29.9</p></div><div class="ma"><img src="img/马甲.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">V领针织马甲背心女秋冬</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前两小时前150件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥75.0</p></div><div class="ma"><img src="img/鸭脖子.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">百草味甜辣鸭脖子休闲</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前一小时前150件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥21.5</p></div><div class="ma"><img src="img/面膜.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">屈臣氏清洁面膜去黑头</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">前两小时前100件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥29.9</p></div><div class="ma"><img src="img/棉服.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">限时半价中长棉服外套</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前两小时前50件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥199.9</p></div><div class="ma"><img src="img/耳机.jpg" width="300px" height="350px"><p style="font-size: 23px;font-family: '微软雅黑';">千元音效 双倍电池</p><p style="font-size: 25px;color: red;font-family: '微软雅黑';">前一小时前50件5折</p><p style="font-size: 25px; color: red;font-family: '微软雅黑';">￥79.9</p></div></div><div class="footer"><p><a href="#">联系我们</a> | <a href="#">诚聘英才</a> | <a href="#">合作招商</a> | <a href="#">广告平台</a></p><p class="fp">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p><div class="footimg"><img src="img/冠名商标2.jpg" width="70px";height="60px";><img src="img/冠名商标.jpg" width="60px";height="40px"><img src="img/商标.jpg" width="70px";height="60px"><img src="img/商标2.jpg" width="60px";height="30px"></div></div></body>
</html>
HTML+CSS简单应用实例——购物网站的制作（四）相关推荐
- HTML+CSS简单应用实例——购物网站的制作（二）注册页面
HTML+CSS简单应用实例--购物网站的制作(二)注册页面 接上一篇文章,本片文章是注册页面. 下面是效果图: 分析:上方欢迎注册是DIV,下面是表单,点击登录按钮会出现注册成功提示.下方为脚本,同 ...
- HTML+CSS简单应用实例——购物网站的制作（五）
HTML+CSS简单应用实例--购物网站的制作(五) 本页面是第三个商品页面. 下面是效果图: 分析:上方淘淘超市是一个DIV,下面超值套装每个商品是一个DIV,美容护肤是一个大表格.下面是脚本. 具 ...
- HTML+CSS简单应用实例——购物网站的制作（七）
HTML+CSS简单应用实例--购物网站的制作(七) 本页面是客服页面. 效果图: 分析:上方是一个DIV,下面是两个表格,表格里有列表. 具体代码: <!DOCTYPE html> &l ...
- HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签 实现目的: 制作导航栏菜单 代码分析: 基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪类选择器对a状态修饰 分步实 ...
- HTML+CSS+JavaScript仿京东购物网站制作 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 个人简介 - HTML/CSS简单页面实例
用 div + css 控制页面 1.position属性: absolute(绝对定位):参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 在没有设定 ...
- web前端期末大作业(我的家乡广安网页设计与制作)HTML+CSS网页设计实例 企业网站制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- javabean+servlet+JSP页面做购物网站 （附效果图+源码）
一个简单的jsp购物网站 概要 需求 用到的技术 效果图 登录页 登陆结果 购物页 消费记录页 管理用户信息和商品信息 数据库格式 踩过的坑 jdbc进行数据库操作 java动作指令结合jsp脚本 j ...
- div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 文章目录 HTML5期末大作业:电商购物网站设计- ...
最新文章
- VMware 虚拟化编程(13) — VMware 虚拟机的备份方案设计
- Win8 Metro(C#)数字图像处理--2.66FloodFill算法
- linux diff patch 生成和打补丁
- Matplotlib实例教程（十五） 3D散点图
- 【干货】从国外知名网站看用户体验4个基本标准
- Blazor.Server以正确的方式集成Ids4
- cuba 平台_认识CLI for CUBA平台
- mysql游标_MySQL 游标的使用
- Linux系统与网络服务管理技术
- Leetcode705.Design HashSet设置哈希集合
- Flutter DecoratedBox装饰容器
- TTL转USB电路(CH340G)
- 密码字典生成工具汇总
- 文件MD5查看linuxwindows
- python excel数据分析师职业技能_数据分析师=Excel+Python？其实不止！
- android两边是椭圆的按钮,自定义Button形状（圆形、椭圆）
- 使用谷歌Colab(Colaboratory)免费GPU训练自己的模型及谷歌网盘无限容量(Google drive)申请教程
- 巨头再度加码区块链，蚂蚁金服发布区块链合作伙伴计划
- 信鸽推送集成采坑之代码混淆报错/XINGE: [Util] please add wup-1.0.0.E-SNAPSHOT.jar in your libs
- sap 流程图 退货销售订单_销售订单_退货入库及退款(采用高级退货)