14课作业

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>

 运行结果:

老师的图片:

 

转载于:https://www.cnblogs.com/momo8238/p/7420523.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值