利用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. Tiny4412 Linux 内核启动流程

    Linux内核的启动分为压缩内核和非压缩内核两种,这里我们以压缩内核为例.压缩内核运行时,将运行一段解压缩程序,得到真正的内核镜像,然后跳转到内核镜像运行.此时,Linux进入非压缩内核入口,在非压缩 ...

  2. Java Swing 如何让窗体居中显示

    如题,其他不多说,直接上代码! package com.himarking.tool; import java.awt.Toolkit; import javax.swing.JFrame; @Sup ...

  3. [Python Study Notes]水平柱状图绘制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  4. 给Activity切换过程添加动画效果

    首先,在资源文件中定义一些动画效果 例如: <scale android:duration="@android:integer/config_mediumAnimTime" ...

  5. Linux 使用静态库注意事项

    1. 静态库一定要放在生成文件后面 gcc main.c -o main libhello.a 2. 使用静态库时一定要连接所有用到的静态库 gcc main.c -o main liba.a lib ...

  6. 说说excel

    今天遇到一个实际问题. 我有一组数据: 0.0.0.1 activate.adobe.com 0.0.0.1 practivate.adobe.com 0.0.0.1 ereg.adobe.com 0 ...

  7. 100741A Queries

    传送门 题目 Mathematicians are interesting (sometimes, I would say, even crazy) people. For example, my f ...

  8. 3.4PCL中异常处理机制

    1.开发者如何增加一个新的异常类 2.如何使用自定义的异常 3.异常的处理

  9. Notepad++一键编译运行（Python、Java、C++）

    Python 需要事先安装Python配置好环境变量.建议使用Anaconda,方便. 在Notepad按F5,输入如下 cmd /k chdir /d $(CURRENT_DIRECTORY) &a ...

  10. 树莓派(Raspberry Pi 3) - 系统烧录及xshell连接

    树莓派(Raspberry pi)是一块集成度极高的ARM开发板,不仅包含了HDMI,RCA,CSI,HDMI,GPIO等端口,还支持蓝牙以及无线通信.由于 Raspberry Pi 几乎是为 Lin ...