css和div重构类淘宝页面

其他 2018-08-06 14:41:26 阅读次数: 0

现在开始使用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**************************

猜你喜欢

转载自blog.csdn.net/qq_41891803/article/details/80845117
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022