老男孩python作业9-简单的商城页面布局
利用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-简单的商城页面布局的更多相关文章
- python之urllib2简单解析HTML页面之篇一
一.urllib2简单获取html页面 #!/usr/bin/env python # -*- coding:utf-8 -*- import urllib2 response = urllib2.u ...
- （数据科学学习手札103）Python+Dash快速web应用开发——页面布局篇
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- 老男孩python作业5-开发一个简单的python计算器
开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...
- 老男孩Day5作业：电子银行购物商城
1.作业需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录支持账户间转账 记录每月日常消 ...
- 老男孩python作业8-学员管理系统
学员管理系统开发: 需求: 用户角色,讲师＼学员, 用户登陆后根据角色不同,能做的事情不同,分别如下 讲师视图 管理班级,可创建班级,根据学员qq号把学员加入班级 可创建指定班级的上课纪录,注意一节上 ...
- 老男孩python作业7-开发一个支持多用户在线的FTP程序
作业6:开发一个支持多用户在线的FTP程序 要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp s ...
- 老男孩python作业6-选课系统开发
角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. 课程包含,周期,价格 ...
- 老男孩python作业4-ATM程序开发
实现一个ATM + 购物商城程序: 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款 ...
- 老男孩python作业1
作业1:编写登陆接口 (1)输入用户名密码 (2)认证成功后显示欢迎信息 (3)输错三次后锁定 作业2:多级菜单 (1)三级菜单 (2)可依次选择进入各子菜单 (3)所需新知识点:列表.字典 任务1思 ...
随机推荐
- 监控和安全运维 1.4 nagios安装
1. Nagios 简介是一个开源软件,可以监控网络设备网络流量.Linux/windows主机状态,甚至可以监控打印机它可以运行在Linux上或windows上基于浏览器的web界面方便运维人员查看 ...
- canvas,绘制七巧板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- java获取多个汉字的拼音首字母
本文属于http://java.chinaitlab.com/base/803353.html原创!!! public class PinYin2Abbreviation { // 简体中文的编码范围 ...
- python爬虫实战（2）--爬取百度贴吧
本篇目标 1.对百度贴吧的任意帖子进行抓取 2.指定是否只抓取楼主发帖内容 3.将抓取到的内容分析并保存到文件 1.URL格式的确定 先观察百度贴吧url格式,以中南财经政法大学迎新帖为例,URL我们 ...
- day70 12-存储过程和存储函数
什么是相关子查询? 这是一个子查询,子查询本身又是一个多表查询.where不能用组函数,但是可以用字符函数instr().除了order by排序没有考,查询语句的所有内容都考了.这个题有点难度. 今 ...
- python NLTK 环境搭建
这里是我之前亲自操作过安装nltk,安装成功了.当时记得是参考这篇博文:http://www.tuicool.com/articles/VFf6Bza 其中,nltk安装时,遇到模块未找到,依次根据提 ...
- linq组合查询时属性扩展问题
学习linq的过程中,做一个表格的条件查询并且分页显示.显示的出的数据需要经过属性拓展来实现将需要给用户看的值显示出来. 后台绑定数据时用的是上下文---- if(!ispostback){ usin ...
- DOM 操作属性
DOM操作就是针对对象的操作 先写一个按钮,<input tupe="button" value="" id="id"> 这 ...
- SQL server2008无法收缩日志
SQL server2008无法收缩日志,错误信息为: 1:由于最小日志空间要求,无法收缩日志文件 2:无法收缩日志文件 2 (XXX_log),因为该文件结尾的逻辑日志文件正在使用 描述: 用的是网 ...
- SPOJ GSS7 - Can you answer these queries VII
板的不能再板,链剖+线段树或者是LCT随便维护. 感觉唯一要注意的是跳链的时候要对$x$向上跳和$y$向上跳的情况分开讨论,而不能直接$swap$,因为只有两段接触的端点才能相互合并,而且每一次向上跳 ...