利用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>

老男孩python作业9-简单的商城页面布局的更多相关文章

  1. python之urllib2简单解析HTML页面之篇一

    一.urllib2简单获取html页面 #!/usr/bin/env python # -*- coding:utf-8 -*- import urllib2 response = urllib2.u ...

  2. （数据科学学习手札103）Python+Dash快速web应用开发——页面布局篇

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  3. 老男孩python作业5-开发一个简单的python计算器

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...

  4. 老男孩Day5作业：电子银行购物商城

    1.作业需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录支持账户间转账 记录每月日常消 ...

  5. 老男孩python作业8-学员管理系统

    学员管理系统开发: 需求: 用户角色,讲师＼学员, 用户登陆后根据角色不同,能做的事情不同,分别如下 讲师视图 管理班级,可创建班级,根据学员qq号把学员加入班级 可创建指定班级的上课纪录,注意一节上 ...

  6. 老男孩python作业7-开发一个支持多用户在线的FTP程序

    作业6:开发一个支持多用户在线的FTP程序 要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp s ...

  7. 老男孩python作业6-选课系统开发

    角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. 课程包含,周期,价格 ...

  8. 老男孩python作业4-ATM程序开发

    实现一个ATM + 购物商城程序: 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款 ...

  9. 老男孩python作业1

    作业1:编写登陆接口 (1)输入用户名密码 (2)认证成功后显示欢迎信息 (3)输错三次后锁定 作业2:多级菜单 (1)三级菜单 (2)可依次选择进入各子菜单 (3)所需新知识点:列表.字典 任务1思 ...

随机推荐

  1. resin容器更改JDK

    更改resin的jdk版本,找到resin的配置文件:Resin\contrib\init.resin文件,找到 JAVA_HOME=@JAVA_HOME@ RESIN_HOME=@resin_hom ...

  2. jQuery选择器大全整理

    一.选择网页元素 $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元 ...

  3. C++对二进制文件的操作实例

    有5个学生的数据,要求: (1)将它们存放到磁盘文件中: (2)将磁盘文件中的第1,3,5个学生数据读入程序,并显示出来: (3)将第三个学生的数据修改后存回磁盘文件中的原有位置: (4)从磁盘文件读 ...

  4. hibernate 对象OID

    它是hibernate用于区分两个对象是否是同一个对象的标识. 我们都知道,虚拟机内存区分两个对象看的是内存的地址是否一致.数据库区分两个对象,靠的是表的主键.hibernate负责把内存中的对象持久 ...

  5. spoj1716 Can you answer these queries III

    传送门 (分析见正睿2018.10.1笔记) 代码 #include<iostream> #include<cstdio> #include<cstring> #i ...

  6. CF 959E Mahmoud and Ehab and the xor-MST

    第一反应是打表找规律……(写了个prim)但是太菜了没找到 于是开始怀疑是不是我的表错了,又写了一个克鲁斯卡尔,然后结果是一样的……(捂脸) 后来从克鲁斯卡尔的算法上发现了一点东西,发现只有2的幂次长 ...

  7. 机器学习初探（手写数字识别）matlab读取数据集

    手写数字识别是机器学习里面的一个经典问题,今天就这一段时间学习的机器学习,花一个下午茶的时间,试试机器学习. 首先数据库是在MNIST(http://yann.lecun.com/exdb/mnist ...

  8. setTimeout()和setInterval() 何时被调用执行（非多线程）.RP

    定义 setTimeout()和setInterval()经常被用来处理延时和定时任务.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔 ...

  9. java全栈day02案例

    商场库存清单案例 A: 案例分析. * a:观察清单后,可将清单分解为三个部分(清单顶部.清单中部.清单底部) * b:清单顶部为固定的数据,直接打印即可 * c:清单中部为商品,为变化的数据,需要记 ...

  10. Linux中的Makefile

    在Linux中Makefile扮演一个非常重要的角色,我们可以以Linux为平台在上面编写我们需要的C程序代码, 对于C语言来说,Linux是一个非常好的平台来学习.使用.调试.验证C代码的平台,其强 ...