利用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. 问题：C#控制台 停留；结果：c#控制台如何延时显示

    Thread.Sleep(毫秒数);//比如Thread.Sleep(2000)即为延时2秒需using System.Threading; 随笔5 - C#控制台窗口的显示与隐藏 1. 定义一个Co ...

  2. 将openfire部署到CentOS云服务器上

    http://ishere.cn/2014/07/25/centos-64bit-openfire.html      CentOS 64位安装openfire http://www.cnblogs. ...

  3. mui封装的ajax请求

    由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...

  4. python中注释的书写

    与c和c++的//不同的是,在python中我们使用#来进行注释 每个#所在的那一行都可以叫做注释:

  5. <!doctype html>这个是干什么的？？？

    html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明.表示网页采用html5

  6. 第2章 netty介绍与相关基础知识

    NIO有一个零拷贝的特性.Java的内存有分为堆和栈,以及还有字符串常量池等等.如果有一些数据需要从IO里面读取并且放到堆里面,中间其实会经过一些缓冲区.我们要去读,它会分成两个步骤,第一块它会把我们 ...

  7. 安装nodemon热启动

    1.安装: cnpm i nodemon -g 2.执行 nodemon .\launch.js .\config_preview\ .\launch.js 为我要启动的脚本文件 .\config_p ...

  8. resize函数有五种插值算法

    转自http://blog.csdn.net/fengbingchun/article/details/17335477 最新版OpenCV2.4.7中,cv::resize函数有五种插值算法:最近邻 ...

  9. BridgePattern（23种设计模式之一）

    生活中的一个例子 就拿汽车在路上行驶的来说.即有小汽车又有公共汽车,它们都不但能在市区中的公路上行驶,也能在高速公路上行驶.这你会发现,对于交通工具(汽车)有不同的类型,然而它们所行驶的环境(路)也在 ...

  10. javascript字符串 转 驼峰字符

    字符串  转  驼峰字符 <script type="text/javascript"> var str = 'peng-hui-datou'; function a( ...