利用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. Struts旅程（六）Struts页面转发控制ActionForward和ActionMapping

    转自:https://blog.csdn.net/lovesummerforever/article/details/19125933

  2. python爬虫实战（1）--爬取糗事百科

    这里利用正则表达式进行匹配,糗事百科是不需要登录的,所以也没必要用到Cookie,另外糗事百科有的段子是附图的,我们把图抓下来图片不便于显示,那么我们就尝试过滤掉有图的段子. 本篇目标 1.抓取糗事百 ...

  3. maven手动安装oracle驱动到仓库

    1. 2.打开http://maven.jahia.org/maven2/一步步打开找到 我需要的版本 https://devtools.jahia.com/nexus/content/groups/ ...

  4. poj1753-Flip Game 【状态压缩+bfs】

    http://poj.org/problem?id=1753 Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions ...

  5. ZF 语法

    Zend Framework Command Line Console Tool v1.11.11 Details for action "" and provider " ...

  6. 使用php输出时间格式

    <? date_default_timezone_set("ETC/GMT-8"); $tm=time(); echo date("Y-m-d h:i a" ...

  7. C++实现数组的排序/插入重新排序/以及逆置操作

    插入新的数字重新排序 分析:将新的数字与已经排序好的数组中的数字一一比较,直到找到插入点,然后将插入点以后的数字都向后移动一个单位(a[i+1]=a[i]),然后将数据插入即可. 代码: #inclu ...

  8. JavaPersistenceWithHibernate第二版笔记-第七章-003Mapping an identifier bag(@OrderColumn、@ElementCollection、@CollectionTable、、)

    一.结构 二.代码 1. package org.jpwh.model.collections.listofstrings; import org.jpwh.model.Constants; impo ...

  9. python3-列表中存储字典

    # Auther: Aaron Fan #示例1:#定义几个字典alien_0 = {"color":"green", "points":5 ...

  10. WordCount-软件测试初体验

    github:https://github.com/skz12345/WordCount PSP2.1 PSP阶段 预估耗时(分钟) 实际耗时(分钟) Planning 计划 40 60 · Esti ...