老男孩python作业9-简单的商城页面布局

于 2018-10-20 09:14:00 发布
阅读量96 收藏
点赞数
文章标签： python
原文链接：http://www.cnblogs.com/luckyplj/p/9820500.html
版权

利用HTML相关知识编写下面的网页：

核心代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 40px;
            background-color: #dddddd;
            line-height: 40px;
            width: 1366px;
        }
        .header_menu{
            display: inline-block;
            padding: 0 10px 0 10px;
        }
        .header_menu:hover{
            background-color:cornflowerblue;
        }
        .pg-search{
            height: 140px;
            line-height: 140px;
            margin:2px;
            width: 1366px;
        }
        .pg-item{
            height: 45px;
            background-color: red;
            line-height: 45px;
            margin-top: -2px;
            width: 1366px;
        }

    </style>
</head>
<body style="margin: 0 auto;">
    <div class="pg-header">
        <div style="width: 1366px;margin: 0 auto">
            <div style="float: left;margin-left: 50px">*收藏本站</div>
            <div style="float: right;margin-right: 50px">
                <a class="header_menu">登录</a>
                <a class="header_menu">注册</a>
                <a class="header_menu">我的订单</a>
                <a class="header_menu">我的收藏</a>
                <a class="header_menu">*VIP会员俱乐部</a>
                <a class="header_menu">关注</a>
            </div>
        </div>
    </div>
    <div class="pg-search">
         <div style="width: 1366px;margin: 0 auto">
             <div style="float: left;margin-left: 100px;height:140px;">
                    <img src="1.jpg" style="height: 110px">
             </div>
             <div style="float: left;width: 400px;height: 140px;margin-left:-50px;margin-top:-30px">
                    <div style="width: 400px;height: 40px;position: relative">
                        <input type="text" style="width: 370px;height: 40px;padding-right: 30px;"/>
                        <span style="position: absolute;top: 10px;right: 10px;background-image: url(2.jpg);height: 16px;width: 16px;margin-top: 60px"></span>
                    </div>
                    <div >
                        <span style="color: red">热门搜索：</span>
                        <a>红龙果</a>
                        <a>香蕉</a>
                    </div>
             </div>
             <div style="float: left;margin:25px;border: 1px solid darkgrey;height:50px;line-height:50px;width: 300px;text-align: center">
                 我的购物车<img src="3.jpg">
             </div>
             <div style="clear: both"></div>
         </div>
    </div>
    <div class="pg-item">
        <div style="width: 1366px">
            <div style="width: 1150px;margin: 0 auto;">
                <!--width: 1100px;达到“全部商品列表”栏不靠边的效果-->
                 <div style="float: left;height:45px;width: 200px;text-align:center;background-color: brown;line-height: 45px">
                     全部商品列表
                 </div>
                 <div style="float: left;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     首页
                 </div>
                 <div style="float: left;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     网上超市
                 </div>
                 <div style="float: left;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     水果超市
                 </div>
                 <div style="float: left;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     超级订餐
                 </div>
                 <div style="float: left;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     生活娱乐
                 </div>
                 <div style="float: left;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     研究院
                 </div>
                 <div style="float: right;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     研究院
                 </div>
                 <div style="float: right;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     研究院
                 </div>
                 <div style="float: right;height:45px;width: 75px;background-color: brown;line-height: 45px;margin-left: 10px;text-align: center">
                     论坛
                 </div>
                 <div style="clear: both"></div>
            </div>
        </div>
    </div>
    <div style="width: 1366px">
        <div style="width: 1150px;margin: 0 auto">
            <div style="float: left;width: 200px">
                 <div style="height: 70px;border: 1px solid silver">
                     <div style="font-weight: bold;color: purple">南方水果</div>
                     <br/>
                     <div>火龙果 火龙果 火龙果</div>
                 </div>
                 <div style="height: 70px;border: 1px solid silver">
                     <div style="font-weight: bold;color:purple">南方水果</div>
                     <br/>
                     <div>火龙果 火龙果 火龙果</div>
                 </div>
                 <div style="height: 70px;border: 1px solid silver">
                     <div style="font-weight: bold;color: purple">南方水果</div>
                     <br/>
                     <div>火龙果 火龙果 火龙果</div>
                 </div>
                 <div style="height: 50px;border: 1px solid silver">
                     <div style="font-weight: bold;color: purple;background-color: #dddddd">热销排行榜</div>
                     <div>content</div>
                 </div>
            </div>
            <div style="float: right;width:930px;">
                <div style="margin-top: 10px">福特>蒙迪欧>2.0T</div>
                <div style="height: 190px;border: 1px solid silver;border-top-color: red;margin-top: 10px">
                    <div style="border-bottom: dotted silver;height: 45px;line-height: 45px">
                        <span style="font-weight: bold">您已选择：</span>
                        <span>苹果</span>
                    </div>
                    <div style="border-bottom: dotted silver;height: 45px;line-height: 45px">
                        <span style="font-weight: bold;margin-left: 40px">材质：</span>
                        <span style="margin-left: 40px">苹果</span>
                        <span style="margin-left: 40px">苹果</span>
                        <span style="margin-left: 40px">苹果</span>
                    </div>
                    <div style="border-bottom: dotted silver;height: 45px;line-height: 45px">
                        <span style="font-weight: bold;margin-left: 40px">品牌：</span>
                        <span style="margin-left: 40px">苹果</span>
                        <span style="margin-left: 40px">苹果</span>
                        <span style="margin-left: 40px">苹果</span>
                    </div>
                    <div style="height: 45px;line-height: 45px">
                        <span style="font-weight: bold;margin-left: 40px">风格：</span>
                        <span style="margin-left: 40px">苹果</span>
                        <span style="margin-left: 40px">苹果</span>
                        <span style="margin-left: 40px">苹果</span>
                    </div>
                </div>
                <div style="margin-top: 30px;height: 40px;border: solid 1px silver">
                    <div style="float: left">
                        <span style="line-height: 40px">排序：</span>
                        <span style="line-height: 40px;margin-left: 40px">价格↑</span>
                        <span style="line-height: 40px;margin-left: 40px">销量↑</span>
                        <span style="line-height: 40px;margin-left: 40px">最新↑</span>
                    </div>
                    <div style="float: right;height: 40px;padding-right: 10px">
                        <span style="color: red;line-height: 40px">共XX件商品</span>
                        <div style="border: solid 1px silver;display: inline-block">
                            <span style="height: 40px;">
                                <span style="color:red;">1</span>
                                <span>/675</span>
                                <input type="submit" value="<"/>
                                <input type="submit" value=">"/>

                            </span>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div style="width: 300px;height: 300px;margin-top: 10px;border:solid 1px red;float: left">
                    <div style="margin-top: 5px;margin-left: 25px">
                        <img src="4.jpg">
                        <div style="font-weight: bold">
                            奥迪A6L  2018款 30周年年型 30 FSI 风尚型
                        </div>
                        <div style="margin-top: 15px;">
                             <span style="color: red;font-weight: bold">￥34.78万</span>
                             <input type="submit" value="-"/>
                             <input type="text" value="1" style="width: 40px"/>
                             <input type="submit" value="+"/>
                             <span style="background-color: red;width:100px;color: #dddddd ">买买买</span>
                        </div>
                    </div>
                </div>
                <div style="width: 300px;height: 300px;margin-top: 10px;border:solid 1px red;float: left;margin-left: 10px">
                    <div style="margin-top: 5px;margin-left: 25px">
                        <img src="5.jpg">
                        <div style="font-weight: bold">
                            奔驰C级  2019款 C 260 运动版
                        </div>
                        <div style="margin-top: 35px;">
                             <span style="color: red;font-weight: bold">￥28.88万</span>
                             <input type="submit" value="-"/>
                             <input type="text" value="1" style="width: 40px"/>
                             <input type="submit" value="+"/>
                             <span style="background-color: red;width:100px;color: #dddddd ">买买买</span>
                        </div>
                    </div>
                </div>
                <div style="width: 300px;height: 300px;margin-top: 10px;border:solid 1px red;float: left;margin-left: 10px">
                    <div style="margin-top: 5px;margin-left: 25px">
                        <img src="6.jpg">
                        <div style="font-weight: bold">
                            法拉利 GTC4Lusso  2017款 3.9T V8
                        </div>
                        <div style="margin-top: 35px;">
                             <span style="color: red;font-weight: bold">￥322.80万</span>
                             <input type="submit" value="-"/>
                             <input type="text" value="1" style="width: 40px"/>
                             <input type="submit" value="+"/>
                             <span style="background-color: red;width:100px;color: #dddddd ">买买买</span>
                        </div>
                    </div>
                </div>
                <div style="width: 300px;height: 300px;margin-top: 10px;border:solid 1px red;float: left;">
                    <div style="margin-top: 5px;margin-left: 25px">
                        <img src="4.jpg">
                        <div style="font-weight: bold">
                            奥迪A6L  2018款 30周年年型 30 FSI 风尚型
                        </div>
                        <div style="margin-top: 15px;">
                             <span style="color: red;font-weight: bold">￥34.78万</span>
                             <input type="submit" value="-"/>
                             <input type="text" value="1" style="width: 40px"/>
                             <input type="submit" value="+"/>
                             <span style="background-color: red;width:100px;color: #dddddd ">买买买</span>
                        </div>
                    </div>
                </div>
                <div style="width: 300px;height: 300px;margin-top: 10px;border:solid 1px red;float: left;margin-left: 10px">
                    <div style="margin-top: 5px;margin-left: 25px">
                        <img src="4.jpg">
                        <div style="font-weight: bold">
                            奥迪A6L  2018款 30周年年型 30 FSI 风尚型
                        </div>
                        <div style="margin-top: 15px;">
                             <span style="color: red;font-weight: bold">￥34.78万</span>
                             <input type="submit" value="-"/>
                             <input type="text" value="1" style="width: 40px"/>
                             <input type="submit" value="+"/>
                             <span style="background-color: red;width:100px;color: #dddddd ">买买买</span>
                        </div>
                    </div>
                </div>
                <div style="width: 300px;height: 300px;margin-top: 10px;border:solid 1px red;float: left;margin-left: 10px">
                    <div style="margin-top: 5px;margin-left: 25px">
                        <img src="4.jpg">
                        <div style="font-weight: bold">
                            奥迪A6L  2018款 30周年年型 30 FSI 风尚型
                        </div>
                        <div style="margin-top: 15px;">
                             <span style="color: red;font-weight: bold">￥34.78万</span>
                             <input type="submit" value="-"/>
                             <input type="text" value="1" style="width: 40px"/>
                             <input type="submit" value="+"/>
                             <span style="background-color: red;width:100px;color: #dddddd ">买买买</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/luckyplj/p/9820500.html

weixin_30917213
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值