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>