老男孩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思 ...
随机推荐
- leetcode643
double findMaxAverage(vector<int>& nums, int k) { double max = INT_MIN; int len = nums.siz ...
- DAY10-python并发之IO模型
一 IO模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问 ...
- SQL基础E-R图画法
例一.假设有以下表:T1(a1,a2, a3, a5)T2(a3,a4)T3(a5, a6)T4(a3, a5, a7)其中带下划线的属性标识为所在关系模式的主码T1中的a3是参照T2的外码T1中的a ...
- [patl2-018]多项式A除以B
解题关键:多项式除法的模拟. #include<cstdio> #include<cstring> #include<algorithm> #include< ...
- PHP算法
一,实现快速排序 <?php function quickSort($arr) { $len=count($arr) ; if($len<=1) { return $arr; } $key ...
- 阿里云、宝塔、wordpress建站
1 阿里云 购买一个学生机就行啦 2 宝塔 2.1 更改阿里云的镜像 技巧01:先关掉阿里云之前的镜像 技巧02:到镜像市场中寻找宝塔的镜像资源 2.2 配置安全组 宝塔的控制面板需要开通端口 888 ...
- Struts2框架05 result标签的类型、拦截器
1 result标签是干什么的 就是结果,服务器处理完返回给浏览器的结果:是一个输出结果数据的组件 2 什么时候需要指定result标签的类型 把要输出的结果数据按照我们指定的数据类型进行处理 3 常 ...
- 【转】nginx禁止访问某个文件和目录(文件夹)
nginx禁止访问所有.开头的隐藏文件设置 location ~* /.* {deny all;} nginx禁止访问目录, 例如:禁止访问path目录 location ^~ /path {deny ...
- 项目一:第十四天 1.在realm中动态授权 2.Shiro整合ehcache 缓存realm中授权信息 3.动态展示菜单数据 4.Quartz定时任务调度框架—Spring整合javamail发送邮件 5.基于poi实现分区导出
1 Shiro整合ehCache缓存授权信息 当需要进行权限校验时候:四种方式url拦截.注解.页面标签.代码级别,当需要验证权限会调用realm中的授权方法 Shiro框架内部整合好缓存管理器, ...
- URLTester2.3.2
文件: URLTester2.3.2.zip 大小: 1170KB 下载: 下载 URLTester是一个URL测试工具,最主要的一个特色是:当一个域名对应多个IP地址时,不用修改hosts文件,即可 ...