python-玉米（小米）商城作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="stylesheet" href="小米.css">
</head> <body>
<!--最上边--> <div class="up">
<div class="top">
<!--最上左边-->
<ul class="top-left">
<li>玉米商城 </li>
<li><a href="">链接A </a></li>
<li><a href="">链接B </a></li>
<li><a href="">链接C </a></li>
<li><a href="">链接D </a></li>
</ul>
<!--最上右边-->
<ul class="top-right">
<li><a href="">登录 </a></li>
<li><a href="">注册 </a></li>
<li><a href="">消息 </a></li>
<li><a href="">购物车 </a></li> </ul>
</div>
<!--top2-->
<div class="top2">
<ul class="top2-left">
<li class="lmi"></li>
<li><span class="sp">55*55</span></li>
<li><a href="">玉米手机</a></li>
<li><a href="">苞米</a></li>
<li><a href="">红米</a></li>
<li><a href="">黑米</a></li>
<li><a href="">大米</a></li>
<li><a href="">小米</a></li>
<li><a href="">米米电脑</a></li>
<li><a href="">米米汽车</a></li>
</ul>
<div class="top2-right">
<!--<input class="text2" name = 'ss'type= 'submit' value="搜索">-->
<input class="text1" name ='cat' type="text" value="">
<input class="text2" name = 'ss'type= 'submit' value="搜索">
</div> </div> <!--top3-->
<div>
<!--top3-left-->
<div class="top3-left">
<ul>
<li>手机 电话卡</li>
<li>电视 盒子</li>
<li>笔记本</li>
<li>智能 家电</li>
<li>健康 家具</li>
<li>出行 儿童</li>
<li>路由器 手机配件</li>
<li>移动电源 插线板</li>
<li>耳机 音箱</li>
<li>生活 米兔</li>
</ul>
</div> <div class="top3-right"> <!--<img src="https://dummyimage.com/992x460/33FFFF" alt="">-->
</div> <div class="top4"> <div class="top4-1" id="top4-11"></div>
<div class="top4-2"></div>
<div class="top4-3"></div>
<div class="top4-4"></div>
</div> <!--top5--> <div class="top5">
<p>限时闪购</p> </div>
</div>
<!--top6-->
<ul class="top6">
<li class="top6-1"></li>
<li class="top6-2"></li>
<li class="top6-3"></li>
<li class="top6-4"></li>
<li class="top6-5"></li> </ul> </div> <!--below-->
<div class="below">
<div class="top7">
<p>家电</p>
</div> <div class="top8-left"> </div>
<ul class="top8-right-top1">
<!--<li class="top8-right-top1">-->
<div class="top8-11"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>--> </ul>
<ul class="top8-right-top2">
<!--<li class="top8-right-top1">-->
<div class="top8-12"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>--> </ul>
<ul class="top8-right-top3">
<!--<li class="top8-right-top1">-->
<div class="top8-13"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>-->
</ul>
<ul class="top8-right-top4">
<!--<li class="top8-right-top1">-->
<div class="top8-14"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>-->
</ul> <ul class="top8-right-top5">
<!--<li class="top8-right-top1">-->
<div class="top8-15"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>-->
</ul> <ul class="top8-right-top6">
<!--<li class="top8-right-top1">-->
<div class="top8-16"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>-->
</ul> <ul class="top8-right-top7">
<!--<li class="top8-right-top1">-->
<div class="top8-17"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>-->
</ul> <ul class="top8-right-top8">
<!--<li class="top8-right-top1">-->
<div class="top8-18"></div>
<p>商品名称</p>
<p>1999元</p>
<!--</li>-->
</ul> <!--top9-->
<div class="top9">
热评商品
</div> <!--top10-->
<!--<div class="top10-0">-->
<div class="top10">
<ul class="top10-1">
<div class="top10-1-1"></div>
<p class="top10-text1">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
<a href="">来源于喷子大大的评价 </a>
<span > <strong>玉米插线板 | </strong></span>
<span id="s2-1"> 49</span> </ul> <ul class="top10-2">
<div class="top10-2-1"></div>
<p class="top10-text2">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
<a href="">来源于喷子大大的评价</a>
<span > <strong>玉米插线板 | </strong></span>
<span id="s2-2"> 49</span>
</ul> <ul class="top10-3">
<div class="top10-3-1"></div>
<p class="top10-text3">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
<a href="">来源于喷子大大的评价</a>
<span > <strong>玉米插线板 | </strong></span>
<span id="s2-3"> 49</span>
</ul> <ul class="top10-4">
<div class="top10-4-1"></div>
<p class="top10-text4">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
<a href="">来源于喷子大大的评价</a>
<span > <strong>玉米插线板 | </strong></span>
<span id="s2-4"> 49</span> </ul>
</div> <div class="top11">
<div class="yuyue">预约维修</div>
<div>|</div>
<div>7天无理由退货</div>
<div>|</div>
<div>15天免费换货</div>
<div>|</div>
<div>满150包邮</div>
<div>|</div>
<div>520余家售后网点</div> </div> <!--top12-->
<div class="top12">
<hr>
©为发烧而生</div> </div> </body> </html>
html
* {
margin: 0;
padding: 0;
}
.up {
width: 100%;
height:50%;
background: white;
/*float: left;*/
/*margin-bottom: 10px;*/
/*overflow: hidden;*/
padding-bottom: 330px;
/*margin-left: 80px;*/
}
.top {
width: 100%;
background-color: black;
/*float: left;*/
/*height: 25px;*/
list-style: none;
display: inline-block;
color: white;
}
.top-left{
margin-left: 80px;
/*width: 100%;*/
/*background-color: black;*/
float: left;
}
.top li{
display: inline-block;
color: white;
}
.top a{
color: white;
text-decoration-line: none;
}
.top a:hover{
color: red;
}
/*最上右边*/
.top-right{
margin-right: 80px;
/*width: 100%;*/
/*background-color: black;*/
float: right;}
/*top2*/
.top2-left li{
float: left;
display: inline-block;
/*margin-left: 40px;*/
list-style: none;
font-size: small;
/*margin: 5px;*/
/*height: 55px;*/
/*margin: 0 auto;*/
}
/*.sp{*/
/*margin: 10px;*/
/*height: 55px;*/
/*display: inline-block;*/
/*}*/
/*图片*/
/*.mi {*/
/*width: 142px;*/
/*height: 55px;*/
/*position: relative;*/
/*top: 0;*/
/*left: 40px;*/
/*}*/
.top2-left a ,.sp{
/*margin: 5px;*/
/*margin-top: 10px;*/
/*margin-bottom: 5px;*/
/*height: 55px;*/
display: inline-block;
/*margin: 0 auto;*/
text-decoration-line: none;
text-align: center;
line-height: 55px;
margin-right: 5px;
}
.top2-left a:hover{
color: green;
}
.sp{
margin-left: 30px;
margin-right: 30px;
}
.lmi{
width: 55px;
height: 55px;
background-image: url("mi.jpg");
background-position: left -111px top 250px ;
margin-left: 80px;
/*clear: left;*/
}
/*top2-right*/
.top-right input{
/*font-size: large;*/
/*float: right;*/
}
.text1,.text2{
margin-top: 10px;
/*border: 1px indianred solid;*/
}
.text2 {
/*display: inline-block;*/
float: right;
height: 29px;
margin-right: -173px;
/*height: 25px;*/
/*margin-right: 60px;*/
/*margin-right: 50px;*/
/*float: right;*/
/*margin-left: 0px;*/
/*margin-left: -10px;*/
}
.text1{
height: 25px;
float:right ;
margin-right: 80px;
/*margin-right: -10px;*/
}
.top3-left {
/*clear: both;*/
font-size: small;
}
/*top3*/
/*top3-left*/
.top3-left{
/*margin: 0 auto;*/
width: 197px;
background: darkslateblue;
height: 460px;
margin-left: -476px;
margin-top:55px;
display: inline-block;
/*clear: both;*/
}
.top3-left li{
/*text-align: center;*/
float: left; /*此处有问题*/
display: inline-block;
clear: both; /*!!!!!!!!此处有问题*/
/*margin-left: 40px;*/
/*margin-top: 25px;*/
margin: 14px auto;
margin-left: 20px;
/*overflow: hidden;*/
/*background: blue;*/
}
.top3-right{
/*content: url("https://dummyimage.com/992x460/33FFFF");*/
/*margin-right: 0px;*/
width: 992px;
height: 460px;
float: right;
display: inline-block;
/*margin-top: 55px;*/
background: url("https://dummyimage.com/992x460/33FFFF") 0px 0px; /*css中可以使用backgroupd 来设置背景图片 */
margin-top: -464px;
/*margin-left: 278px;*/
margin-right: 80px;
}
/*.top3-right img{*/
/*width: 992px;*/
/*height: 460px;*/
/*float: left;*/
/*!*display: inline-block;*!*/
/*!*margin-top: 55px;*!*/
/*clear: left;*/
/*background: url("https://dummyimage.com/992x460/33FFFF") 0px 0px; !*css中可以使用backgroupd 来设置背景图片 *!*/
/*width: 80%;*/
/*}*/
/*top4*/
/*top4-1*/
.top4 {
width:100%;
height: 170px;
/*display: inline-block;*/
display: inline-block;
}
.top4 div{
height: 170px;
margin-top: 10px;
margin-right: 3px;
}
.top4-1{
display: inline-block;
width:234px;
float: left;
background: no-repeat url("https://dummyimage.com/234x170/888888");
margin-left: 80px;
}
#top4-11{
margin-left: 80px;
}
.top4-2 {
width: 316px;
float: left;
background: no-repeat url("https://dummyimage.com/316x170/00008B");
}
.top4-3 {
width: 316px;
float: left;
background: no-repeat url("https://dummyimage.com/316x170/F08080");
}.top4-4 {
width: 316px;
float: left;
background: no-repeat url("https://dummyimage.com/316x170/008866");
}
/*top5*/
/*.top5 {*/
/*margin-top: 10px;*/
/*}*/
.top5{
height: 100px;
}
.top5 p {
/*float: left;*/
/*clear: both;*/ /*!!!!clear和float到底什么时候有差别*/
/*width:100%;*/
height: 100px;
float: left;
margin-left: 80px;
margin-top: 20px;
/*clear: both;*/
}
/*top6*/
.top6{
float: left;
width:100%;
height:340px;
margin-top: -85px;
}
.top6 li{
/*width:;*/
display: inline-block;
margin-top: 20px;
}
.top6-1 {
width: 234px;
background: no-repeat url("https://dummyimage.com/234x340/77FFEE");
height: 340px;
display: inline-block;
margin-left: 80px;
}
.top6-2 {
background: no-repeat url("https://dummyimage.com/234x340/FF3333");
height: 340px;
display: inline-block;
width: 234px;
}
.top6-3 {
background: no-repeat url("https://dummyimage.com/234x340/66DD00");
height: 340px;
display: inline-block;
width: 234px;
}
.top6-4 {
background: no-repeat url("https://dummyimage.com/234x340/FF3333");
height: 340px;
display: inline-block;
width: 234px;
}
.top6-5 {
background: no-repeat url("https://dummyimage.com/234x340/66DD00");
height: 340px;
display: inline-block;
width: 234px;
}
/*below*/
.below{
height: 1300px;
width: 100%;
background: gainsboro;
padding-top: 1px;
/*display: inline-block;*/
/*float: left;*/
/*margin-left: 80px;*/
}
/*top7*/
.top7 {
/*float: left;*/
/*margin-left: 80px;*/
/*display: inline-block;*/
/*width: 100%;*/
/*margin-top: 19px;*/
height: 100px;
/*margin-left: 80px;*/
/*margin-top:20px;*/
}
.top7 p {
margin-left: 80px;
margin-top: 20px;
height: 100px;
/*float: left;*/
}
/*top8*/
/*top8-left*/
.top8-left {
background: no-repeat url("https://dummyimage.com/234x614/FFA488");
width: 234px;
height: 614px;
margin-left: 80px;
margin-top: -66px;
display: inline-block;
}
/*top8-right*/
.below>ul{
width:227.5px;
height: 300px;
background: white;
float: right;
display: inline-block;
/*margin-left: 5px;*/
list-style: none;
}
.top8-right-top1{
margin-right: 791px;
margin-top: -66px;
}
.top8-right-top2{
margin-right: 554px;
margin-top: -618px;
}
.top8-right-top3{
margin-right: 317px;
margin-top: -618px;
}
.top8-right-top4{
margin-right: 80px;
margin-top: -618px;
}
.top8-right-top5{
margin-right: 80px;
margin-top: -305px;
}
.top8-right-top6{
margin-right: 317px;
margin-top: -305px;
}
.top8-right-top7{
margin-right: 554px;
margin-top: -305px;
}
.top8-right-top8{
margin-right: 791px;
margin-top: -305px;
}
.top8-right-top1 div{
background: no-repeat url("https://dummyimage.com/150x150/FFA488");
/*width: 150px;*/
/*height: 150px;*/
/*margin: 0 auto;*/
/*如果想用margin居中属性的话，那么元素必须在块级别的标签中，而且顺序不能改，必须是0,auto*/
}
.top8-right-top3 div{
background: no-repeat url("https://dummyimage.com/150x150/FFBB00");}
.top8-right-top4 div{
background: no-repeat url("https://dummyimage.com/150x150/0000AA");}
.top8-right-top5 div{
background: no-repeat url("https://dummyimage.com/150x150/FFA488");}
.top8-right-top6 div{
background: no-repeat url("https://dummyimage.com/150x150/00DDDD");}
.top8-right-top7 div{
background: no-repeat url("https://dummyimage.com/150x150/FFBB00");}
.top8-right-top8 div{
background: no-repeat url("https://dummyimage.com/150x150/0000AA");}
ul>div {
width: 150px;
height: 150px;
margin: 0 auto;
}
.top8-right-top2 div{
background: no-repeat url("https://dummyimage.com/150x150/00DDDD");
/*width: 150px;*/
/*height: 150px;*/
/*margin: 0 auto;*/
/*如果想用margin居中属性的话，那么元素必须在块级别的标签中，而且顺序不能改，必须是0,auto*/
}
ul>p {
text-align: center;
margin-top: 10px;
}
/*top9*/
.top9 {
margin-left: 80px;
margin-top: 20px;
}
/*.top10-0 {*/
/*width: 100%;*/
/*height:440px;*/
/*background: yellow;*/
/*}*/
.top10>ul{
display: inline-block;
height:440px ;
width: 289px;
background: snow;
/*margin-left: 80px;*/
margin-right: 9px;
}
.top10-1{
/*height:440px ;*/
/*width: 289px;*/
/*background: white;*/
margin-left: 80px;
float: left;
display: inline-block;
/*margin-right: 10px;*/
/*margin-right: 7px;*/
}
.top10-2{
display: inline-block;
/*margin-right: 7px;*/
float: left;
}
.top10-3{
/*margin-right: 10px;*/
float: left;
/*margin-right: 7px;*/
}
.top10-4{
float: left;
}
.top10-1-1 {
width: 289px;
height: 220px;
background: url("https://dummyimage.com/289x220/00DDAA");
/*margin-left: 80px;*/
}
.top10-2-1{
background: url("https://dummyimage.com/289x220/00DDAA");
width: 289px;
height: 220px;
}
.top10-3-1{
background: url("https://dummyimage.com/289x220/00DDAA");
width: 289px;
height: 220px;
}
.top10-4-1{
background: url("https://dummyimage.com/289x220/00DDAA");
width: 289px;
height: 220px;
}
.top10 >div{
width: 289px;
height: 220px;
/*background: url("https://dummyimage.com/289x220/00DDAA");*/
margin-top: 10px;
}
.top10 p{
text-align: justify;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
}
.top10 a:hover{
/*margin-left: 30px;*/
/*font-size: small;*/
color: brown;
/*text-decoration-line: none;*/
}
.top10 a {
margin-left: 30px;
font-size: small;
text-decoration-line: none; /*新大陆！！！！！！！！！！！！！两种状态，将上一个全打开，这个全关闭*/
display: block;
margin-top: 10px;
}
.top10 span{
/*display: inline-block;*/
/*float: left;*/
/*margin-bottom: 10px;*/
/*margin-left: 30px;*/
}
.top10 span{
margin-left: 30px;
margin-top: 10px;
display: inline-block;
font-size: large;
/*text-align: left;*/
}
#s2-1,
#s2-2,
#s2-3,
#s2-4{
margin-left: 5px;
color: red;
}
/*top11*/
.top11{
/*width:1182px;*/
width: 100%;
display: inline-block;
float: left;
background: white;
/*margin-left: 80px;*/
/*margin-right: 80px;*/
/*padding-left: 80px;*/
margin-top: 18px;
height: 100px;
line-height: 100px;
padding-left: 0px;
padding-right:0px;
}
.top11 div{
/*margin-top: 30px;*/
float: left;
margin-left:68px ;
text-align: center;
/*line-height: 100px;*/
}
.yuyue {
text-indent: 80px;
}
/*top12*/
.top12{
clear: both;
text-align: center;
}
.top12:before{
}
/**/
css
图片生成器：https://dummyimage.com/
点开其中的图片，在浏览器栏，进行图片大小的修改，图片大小后面是颜色，然后右键下面的图片，点击复制图像地址，即可生成指定大小颜色的文件图片。
marign 0 auto；(居中)只有在block的级别下，才能成功。
python-玉米（小米）商城作业的更多相关文章
- python day19 : 购物商城作业，进程与多线程
目录 python day 19 1. 购物商城作业要求 2. 多进程 2.1 简述多进程 2.2 multiprocessing模块,创建多进程程序 2.3 if name=='main'的说明 2 ...
- 2003031121-浦娟-python数据分析五一假期作业
项目 内容 课程班级博客链接 20级数据班(本) 这个作业要求链接 Python作业 博客名称 2003031121-浦娟-python数据分析五一假期作业 要求 每道题要有题目,代码(使用插入代码, ...
- 2003031121-浦娟-python数据分析第四周作业-第二次作业
项目 内容 课程班级博客链接 20级数据班(本) 作业链接 Python第四周作业第二次作业 博客名称 2003031121-浦娟-python数据分析第四周作业-matolotlib的应用 要求 每 ...
- Python课程第二天作业
一.统计字符串格式 要求: # 1.统计元组中所有数据属于字符串的个数,提示: isinstance() # 数据: t1 = (1, 2, '3', '4', 5, '6') # 结果: 3 代码 ...
- python第七天-作业[购物车]
作业要示: 购物车程序:启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表允许用户根据商品编号购买商品用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 可随时退出 ...
- 初学者的python学习笔记2——作业篇
这次的作业是商城展示,最开始的确是一脸懵逼,后来研究了一下网上的例子,总算是搞出来了一个(其实算是网上列子的简化版?). 最开始是想要使用字典去做,发现显示列表的时候怎么也无法实现序号和名称对应,原因 ...
- 初学者的python学习笔记1——作业篇
既然是学习,作业必不可少,其实在看后面讲思路之前还是感觉自己写的不错,但是和后面一对比,感觉实在是想的太片面太肤浅了,还需要太多太多改进的地方. 首先放一下作业要求. 最开始做的时候真的是完全按照字面 ...
- 老男孩python自动化运维作业2
拿到要求真不知道怎么写,不能还要写个商城页面吧: 最后还是用了input()模拟用户操作吧- -!不就操作个字典吗(字典模拟商品数据). python版本: >>>import sy ...
- python入门第一天作业。讲师写的代码。
#!/uer/bin/env python # _*_ coding: utf-8 _*_ import sys retry_limit = 3 retry_count = 0 account_fil ...
随机推荐
- Hive深入学习--应用场景及架构原理
Hive背景介绍 Hive最初是Facebook为了满足对海量社交网络数据的管理和机器学习的需求而产生和发展的.互联网现在进入了大数据时代,大数据是现在互联网的趋势,而hadoop就是大数据时代里的核 ...
- C语言强化——数组
打印九九乘法表 #include<stdio.h> int main() { int num = 1; for (int i = 1;i <= 9;++i) { for (int j ...
- [UE4]关于分支Sequence和条件分支的组合用法
当需要不管条件语句是否成立的后面都需要执行的语句,可以使用“Sequence”来分支,达到简化蓝图连线的目的.如下图所示:
- Redis 在线管理工具（phpRedisAdmin）介绍 两次git
phpRedisAdmin is a simple web interface to manage Redis databases. phpRedisAdmin 在 Redis clients 的列表 ...
- 0000 - Spring MVC 原理以及helloworld
1.概述 Spring MVC是目前最好的实现MVC设计模式的框架,是Spring框架的一个分支产品.以Spring IOC容器为基础,并利用容易的特性来简化它的配置.Spring MVC相当于Spr ...
- [TFS]TFS强制删除离职人员签出锁定项的方法
步骤: 1.连接到TFS数据库服务器的tfsversioncontrol库: 2.查tbl_workspace表,找出那哥们的工作目录, 如select * from tbl_workspace wh ...
- 通过C#/.NET API使用CNTK
(原文)CNTK v2.2.0提供C#API来建立.训练和评估CNTK模型. 本节概要介绍了CNTK C#API. 在CNTK github respository中可以找到C#训练示例. 使用C#/ ...
- php namespace use 研究
1.file1.php: <?php namespace foos; class demo{ function testfn(){ echo "sdlkfjskdjf"; } ...
- Motherboard Chipsets and the Memory Map.主板芯片组与内存映射
原文标题:Motherboard Chipsets and the Memory Map 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外 ...
- 洛谷 ： P3374 【模板】树状数组 1 P3368 【模板】树状数组 2
******************************************************************************** 属于模板题了,一个单点修改区间询问,一 ...