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 ...
随机推荐
- 《Effective Java》笔记-服务提供者框架
静态工厂方法返回的对象所属的类,在编写包含该静态工厂方法的类时可以不必存在.这种灵活的静态工厂方法构成了服务提供者框架(Service Provider Framework)的基础,例如JDBC AP ...
- URL优化的几个处理方法
原文链接:http://www.51chinashop.com/shopinfo/dsjs/2014-11-23/100.html 在一个网站中,一个页面对应了多个URL,必然会分散这个页面的权重.因 ...
- laraval一键安装包的下载地址
http://laravelacademy.org/resources-download
- rnn实现三位数加法的训练
#!/usr/bin/env python # coding=utf-8 from keras.models import Sequential from keras.layers import Ac ...
- [UE4]移动小地图
让玩家角色永远处于小地图的中心位置. 一.将RoundMiniMap的StaticMiniMap使用Canvas Panel包裹,StaticMiniMap的锚点Anchors设置为中心对齐 二.新建 ...
- 常用docker镜像
oracle12c: mkdir -p /path/to/oradata docker run --name oracle12c \ -p 1521:1521 -p 5500:5500 \ -v /p ...
- SSH框架总结(环境搭建+框架分析+实例源码下载)
一.SSH框架简介 SSH是struts+spring+hibernate集成的web应用程序开源框架. Struts:用来控制的,核心控制器是Controller. Spring:对Struts和H ...
- BCGcontrolBar(四) ListCtrl 操作输出显示
Ribbon 的效果主要为在可停靠面板上放置各种组件 具体操作为新建一个watchbar 然后在watchbar上加入 ListCtrl组件 效果如下 因为是在可停靠面板上生成的 因此可以随意拖动 具 ...
- layui之select的option叠加问题解决
小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑 ...
- C# 自己动手实现Spy++（二）
昨天已经实现了获取窗口的标题.句柄等信息,但是高亮部分还有问题,而且红色绘制框擦除也有问题,今天就又研究了下上述两个问题. 高亮部分红色框只显示左上的边框,而右下的显示不出来,如图: 代码如下: pu ...