HTML+CSS简单应用实例——购物网站的制作（五）
本页面是第三个商品页面。
下面是效果图：
分析：上方淘淘超市是一个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;}.fi{color:black;margin-top: 120px;font-size: 32px;}.fi2{color:black;margin-top: 700px;font-size: 32px;}.ta{position: absolute;top:180px;left:255px;width: 1200px;}.ma{background-color: white;float: left;margin: 5px;}.table1{position: absolute;top:900px;left:245px;}.footer{ position:absolute;top:1200px;left:220px;width:1100px;margin:0 auto;border-top:#dddddd 1px solid;margin-top:600px; 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="plum"><div class="Bar"><p align="center" style="font-family: 宋体; font-size: 40px; color: #FF4500;"><b>淘淘超市</b></p></div><p class="fi" align="center" >-超值套装-</p><div class="ta"> <div class="ma"><img src="img/超市1.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 进口咔咔脆饼干</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥12.9</p></div><div class="ma"><img src="img/超市2.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 俄罗斯进口紫皮糖</p><p style="font-size: 18px; color: red;font-family: '微软雅黑';"> ￥17.8</p></div><div class="ma"><img src="img/超市3.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 韩国三养火鸡面</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥28.9</p></div><div class="ma"><img src="img/超市4.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 印尼奶酪饼干</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥18.5</p></div><div class="ma"><img src="img/超市5.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 蒙牛纯甄常温酸奶</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥92.9</p></div><div class="ma"><img src="img/超市6.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 统一汤达人拉面</p><p style="font-size: 18px; color: red;font-family: '微软雅黑';"> ￥21.5</p></div><div class="ma"><img src="img/超市7.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 三只松鼠猪肉铺</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥36.9</p></div><div class="ma"><img src="img/超市8.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 蒙牛成人牛奶粉</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥26.8</p></div></div><p class="fi2" align="center" >-美容护肤-</p><table cellspacing="10" class="table1"><tr><td rowspan="2"><img src="img/美容1.jpg" width="250px" height="500px"></td><td ><img src="img/美容11.jpg" width="250px" height="250px"></td><td><img src="img/美容12.jpg" width="250px" height="250px"></td> <td><img src="img/美容13.jpg" width="250px" height="250px"></td> </tr> <tr> <td><img src="img/美容21.jpg" width="250px" height="250px"></td><td><img src="img/美容22.jpg" width="250px" height="250px"></td><td><img src="img/美容23.jpg" width="250px" height="250px"></td> </tr> <tr> <td><img src="img/美容31.jpg" width="250px" height="250px"></td><td><img src="img/美容32.jpg" width="250px" height="250px"></td><td><img src="img/美容33.jpg" width="250px" height="250px"></td> <td><img src="img/润唇膏.jpg" width="250px" height="250px"></td></tr> </table> <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>
