利用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. Repmat:Replicate and tile an array

    Repmat:Replicate and tile an array Syntax B = repmat(A,m,n) B = repmat(A,[m n]) B = repmat(A,[m n p. ...

  2. leetcode479

    public class Solution { public int LargestPalindrome(int n) { ) ; , n) - ; ; v > max / ; v--) { S ...

  3. 记一次完整的android源码截屏事件的捕获<标记砖>

    http://blog.csdn.net/buptgshengod/article/details/19911909?utm_source=tuicool&utm_medium=referra ...

  4. HDU 6397(2018多校第8场1001) Character Encoding 容斥

    听了杜教的直播后知道了怎么做,有两种方法,一种构造函数(现在太菜了,听不懂,以后再补),一种容斥原理. 知识补充1:若x1,x2,.....xn均大于等于0,则x1+x2+...+xn=k的方案数是C ...

  5. IDEA java 代码格式化统一

    Intellij idea 安装格式化插件 ECLIPSE CODE FORMATTER:1,安装插件:网络安装:选择Setting =>Plugins=>Browse repositor ...

  6. 下拉刷新和上拉加载更多（第三方框架MJRefresh）

    #import "RootViewController.h" #import "MJRefresh.h" @interface RootViewControll ...

  7. JavaWeb 没用

    Servlet的生命周期 初始化:Web容器加载servlet,调用innit(),只执行一次 处理业务: 请求到达时,运行service方法 并调用相应的doget或者dopost方法.  可执行多 ...

  8. R: 绘图 pie & hist

    问题: 绘制 pie .hist 图 解决方案: 饼图函数 pie( ) pie(x, labels = names(x), edges = 200, radius = 0.8, clockwise ...

  9. Python程序设计2——列表和元组

    数据结构:更好的说法是从数据角度来说,结构化数据,就是说数据并不是随便摆放的,而是有一定结构的,这种特别的结构会带来某些算法上的性能优势,比如排序.查找等. 在Python中,最基本的数据结构是序列( ...

  10. HtmlAgilityPack HTML操作类库的使用

    HtmlAgilityPack是.NET下的一个开源的HTML解析类库.支持用XPath来解析HTML.命名空间:HtmlAgilityPack. 1.读取网络中html网页内容,获取网页中元素bod ...