现在开始使用css和div重构类淘宝页面。具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>#作业-css和div重构类淘宝页面#</title> <style> #table{ width: 90%; height: 80px; margin:auto; } #logo{ float: left; width: 33.3%; } #right{ height:50px; padding-top: 30px; float: left; width: 33.0%; font-size: 25px; text-align: right; } #right a{ text-decoration: none; color: black; } #guide{ background-color: darkorange; width: 100%; height: 60px; float: left; } #guide .title{ font-size: 30px; padding: 15px; display: block; width: 10%; text-align: center; float: left; color: white; } #guide a{ font-size: 20px; padding: 20px; display: block; width: 10%; text-align: center; float: left; color: white; } #new{ background-color: darkorange; width: 100%; height: 60px; } #hot{ background-color: purple; width: 100%; height: 60px; } .shop{ width: 270px; height: 245px; float: left; } #img{ background-color: darkorange; width: 330px; height: 300px; padding-top: 200px; float: left; } #img2{ background-color: purple; width: 330px; height: 300px; padding-top: 200px; float: left; } #low{ height: 66px; width: 100%; font-size: 20px; text-align: center; padding-top: 20px; } #head{ height: 80px; width: 100%; } #mid{ height:80px; float: left; width: 33.3%; } </style> </head> <body> <div id="table"> <div id="head"> <div id="logo"> <img src="01_ali_logo.png"> </div> <div id="mid"> </div> <div id="right"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <div id="guide"> <a href="#" class="title">首页</a> <a href="#">数码产品</a> <a href="#">日常用品</a> <a href="#">食品饮料</a> <a href="#">运动户外</a> <a href="#">衣服家具</a> <a href="#">历史记录</a> </div> <div> <img src="https://s1.tuchong.com/content-image/201805/bb6532bae9f17785ab3191642bd9b292.jpg" width="100%"> </div> <div id="new"> <div style="font-size: 20px;color: white;padding: 20px;"><b>最新商品</b></div> </div> <div style="height: 500px;"> <div id="img"> <img src="01_ali_logo.png" style="width: 100%;margin: auto;"> </div> <div style="float: left"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" style="height: 240px;width: 550px;"> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> </div> <div> <img src="https://img.alicdn.com/simba/img/TB1J.BIcWmWBuNkHFJHSuuatVXa.jpg" width="100%"> </div> <div id="hot"> <div style="font-size: 20px;color: white;padding: 20px;"><b>热门商品</b></div> </div> <div style="height: 500px;"> <div id="img2"> <img src="01_ali_logo.png" style="width: 100%;margin: auto;"> </div> <div style="float: left"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" style="height: 240px;width: 550px;"> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> <div class="shop"> <img src="https://img.alicdn.com/simba/img/TB1CP9ltACWBuNjy0FaSutUlXXa.jpg" height="125px" width="270px"> <p style="width: 270px;">巴厘岛沙滩裙女夏新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:20px;width: 270px;">¥99.90</p> </div> </div> <div> <img src="https://img.alicdn.com/simba/img/TB1J.BIcWmWBuNkHFJHSuuatVXa.jpg" width="100%"> </div> <div id="low"> <a href="#">关于淘宝</a> <a href="#">合作伙伴</a> <a href="#">营销中心</a> <a href="#">廉正举报</a> <a href="#">联系客服</a> <a href="#">开放平台</a> <a href="#">诚征英才</a> <a href="#">联系我们</a> <a href="#">网站地图</a> <a href="#">法律声明</a> <a href="#">知识产权</a> <p style="font-size: 15px;">© 2003-现在 Taobao.com 版权所有</p> </div> </div> </body> </html>
代码完成后,运行结果如下:
**********************end**************************