老男孩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思 ...
随机推荐
- DAY11-MYSQL索引原理与慢查询优化
一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句 ...
- C#如何生成JSON字符串?（序列化对象）
第一章:C#如何拿到从http上返回JSON数据? 第二章:C#如何解析JSON数据?(反序列化对象) 第三章:C#如何生成JSON字符串?(序列化对象) 第四章:C#如何生成JSON字符串提交给接口 ...
- .net 4 安装未成功，无意中的解决办法！
公司 电脑是chost的系统,由于使用时间过长,重装纯净版系统的话,代价太大,故网上寻求各种解决办法! 安装.net 4 总是失败,查看百度,各种: WIN7系统哈哈跟我的问题一样,我的刚才解决了:1 ...
- 配gzip的过滤器进行压缩解决表单加载慢问题
一个客户的表单上字段超过五百,经浏览器的调试器发现主要问题是从服务器取数据花费了大量时间,下载内容大小约1.2M,下载时间在10s左右,导致样式加载完大约在17s左右(不清除浏览器缓存).最终考虑利用 ...
- 第4章 ZK基本特性与基于Linux的ZK客户端命令行学习 4-1 zookeeper常用命令行操作
ls path [watch] watch是一个监督者.quota是zookeeper的子目录.目录就是节点的意思,对于zookeeper来说它是以一个节点来说的,所以说/就是根节点,zookeepe ...
- Struts第三天
OgnlValueStack贯穿整个 Action 的生命周期. 它是ContextMap中的一部分,里面的结构是一个List,是我们可以快速访问数据一个容器.它的封装是由struts2框架完成的. ...
- loj10098 分离的路径
传送门 分析 此题要先用tarjan求点双联通分量,注意在求解是要注意一条无向边只能走一次.求完之后我们发现原来的图会变成一棵树,对于 这棵树我们发现答案是(叶子节点数量+1)/2,实际便是每两个节点 ...
- raspberry pi 3 openjdk 性能低下解决方法
在使用nutch 是时候发现generate的性能很低,应该是openjdk的问题. orcale 实际已经提供了armhf的jdk,替换下性能就上去了 jdk下载链接:Download 配置方法和普 ...
- 完整读写txt 并提取{}里的内容
using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Lin ...
- oracle 逻辑体系结构详解
以前对数据库的了解大多数是集中在mysql,最近工作里面一直使用的是oracle,虽然说在互联网行业mysql大行其道,但是一些传统行业或者是金融领域还是更加倾向于使用oracle,sqlserver ...