14课作业

时间：2017-08-23 23:01:55 阅读：219 评论：0 收藏：0 [点我收藏+]

标签：head alt 购物商品 doc es2017 width logs 图片

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-head{
            background:#dddddd;
            height:38px;
        }
    </style>
</head>
<body style="margin:0 auto">
    <div class="pg-head">
        <div style="width:1000px;margin:0 auto">
            <div style="float:left;line-height:38px;width:10%">收藏本站</div>
            <div style="float:right;line-height:38px;width:90%">
                <div style="float:right;">注册 登录</div>
            </div>
        <div style="clear:both;"></div>
        </div>
    </div>
    <div style="background:blank;height:90px;width:1400px">
        <div style="width:200px;line-height:38px;float:left;border:1px;">
            <img src="2.png" style="float:right"/>
        </div>

        <div style="width:500px;line-height:38px;float:left;border:1px;height:90px;">
            <div style="line-height:38px;float:right;border:1px;">
                <input type="text"/>
                <input type="button" value="搜索"/>
            </div>

        </div>


        <div style="width:400px;line-height:38px;float:left;border:1px;height:90px;">
            <div style="line-height:38px;float:right;border:1px;">
                <div style="background:#dddddd">购物车2件</div>
            </div>
        </div>

    </div>

    <div  style="background:#C71585;height:40px;width:1400px">
        <div style="width:200px;line-height:38px;float:left;border:1px;">
            <div style="float:right">全部商品分类</div>
        </div>

        <div style="width:600px;line-height:38px;float:left;border:1px;">
            <div style="float:right">
                首页&nbsp&nbsp&nbsp&nbsp
                网上超市&nbsp&nbsp&nbsp&nbsp
                水果超市&nbsp&nbsp&nbsp&nbsp
                超级订餐&nbsp&nbsp&nbsp&nbsp
                生活娱乐&nbsp&nbsp&nbsp&nbsp
                研究院&nbsp&nbsp&nbsp&nbsp
            </div>
        </div>
    </div>

    <div  style="border:1px solid green;height:400px;width:1400px">
        <div style="border:1px solid red;height:400px;width:300px;float:left;"></div>
        <div style="border:1px solid red;height:400px;width:800px;float:left;">
            <div style="border:1px solid red;height:200px;width:250px;float:left;">
                <img src="3.png" style="float:left;height:190px;width:250px;"/>
            </div>
            <div style="border:1px solid red;height:200px;width:250px;float:left;">
                <img src="3.png" style="float:left;height:190px;width:250px;"/>
            </div>
            <div style="border:1px solid red;height:200px;width:250px;float:left;">
                <img src="3.png" style="float:left;height:190px;width:250px;"/>
            </div>
            <div style="border:1px solid red;height:200px;width:250px;float:left;">
                <img src="3.png" style="float:left;height:190px;width:250px;"/>
            </div>
            <div style="border:1px solid red;height:200px;width:250px;float:left;">
                <img src="3.png" style="float:left;height:190px;width:250px;"/>
            </div>
            <div style="border:1px solid red;height:200px;width:250px;float:left;">
                <img src="3.png" style="float:left;height:190px;width:250px;"/>
            </div>

        </div>

    </div>
</body>
</html>

运行结果：

技术分享

老师的图片：

技术分享

14课作业

标签：head alt 购物商品 doc es2017 width logs 图片

原文地址：http://www.cnblogs.com/momo8238/p/7420523.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行