老男孩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思 ...
随机推荐
- sqlplus 连接数据库执行SP
.bashrc export HOME= export LANG="C" .bash_profile #明码 #export LOG_USER=lhcx #export LOG_P ...
- socket多线程方式案例
记下来,方便以后查看 User类 package com.xujingyang.ThreadSocket; import java.io.Serializable; public class User ...
- cd命令无效
原因是没有切换盘符步骤一:C:\Documents and Settings\Administrator>d:步骤二:cd D:\Program Files\Python35-32\Script ...
- SQL查询语句 [1]
一.使用字符串作为条件查询 在 Home/controller/UserController.class.php 下插入 <?php namespace Home\Controller; use ...
- SimpleFactoryPattern(23种设计模式之一)
设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...
- c++ 类中模版成员函数
C++函数模版与类模版. template <class T> void SwapFunction(T &first, T &second){ }//函数模版 templa ...
- Luogu 2824 [HEOI2016/TJOI2016]排序
BZOJ 4552 挺妙的解法. 听说这题直接用一个桶能拿到$80 \ pts$ 发现如果是一个排列的话,要对这个序列排序并不好做,但是假如是$01$序列的话,要对一个区间排序还是很简单的. 发现最后 ...
- 机器学习初探(手写数字识别)HOG图片
这里我们讲一下使用HOG的方法进行手写数字识别: 首先把 代码分享出来: hog1.m function B = hog1(A) %A是28*28的 B=[]; [x,y] = size(A); %外 ...
- HttpGet和HttpPost处理重定向的区别
get方法默认会处理302的重定向,response获取到的页面其实是重定向以后的页面,通过response.getStatusLine(),取到的值是200. 通过设置可以用post方法去请求或者把 ...
- const与define的区别
const与#define最大的差别,Const在堆栈分配了空间,而#define只是把具体数值 直接传递到目标变量罢了.或者说,const的常量是一个Run-Time的概念,他在程 序中确确实实的存 ...