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>玉米商城&nbsp;</li><li><a href="">链接A&nbsp;</a></li><li><a href="">链接B&nbsp;</a></li><li><a href="">链接C&nbsp;</a></li><li><a href="">链接D&nbsp;</a></li></ul><!--最上右边--><ul class="top-right"><li><a href="">登录&nbsp;</a></li><li><a href="">注册&nbsp;</a></li><li><a href="">消息&nbsp;</a></li><li><a href="">购物车&nbsp;</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="1"><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>&copy;为发烧而生</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的级别下，才能成功。

转载于:https://www.cnblogs.com/taozizainali/p/8578736.html

python-玉米（小米）商城作业相关推荐

寒假Python第三天作业
寒假Python第三天作业作业 1:计算器: 请输入两个数和一个符号,完成两个数的+ - * / % // ** a=float (input ("请输入第一个数 : ")) b= ...
Python第四天作业
Python第四天作业作业1:有一堆硬币,每次只能拿一个或者两个,求最少多少次可以拿完硬币 [10, 8, 5, 3, 27, 99] num = 0 ls = [10,8,5,3,27,99]fo ...
计算机编程导论python程序设计答案-学堂在线_计算机科学与Python编程导论_作业课后答案...
学堂在线_计算机科学与Python编程导论_作业课后答案答案: 更多相关问题近代中国完全沦为半殖民地半封建社会的标志是:A．<马关条约>B．<辛丑条约>C．<凡尔赛和 ...
python好学吗mooc中文网-2020年大学mooc用Python玩转数据作业答案
2020年大学mooc用Python玩转数据作业答案更多相关问题一台电脑先涨价着一%,后降价2一%,这台电脑一现价同原价相比是()A．一样的B．降低了C．提高了直接写出9数 3÷地下%=6×3下% ...
Python代写CSSE1001/7030 python程序作业、代做python CSSE1001/7030程序作业、代写CSSE1001/7030 python 作业...
Python代写CSSE1001/7030 python程序作业.代做python CSSE1001/7030程序作业. 代写CSSE1001/7030 python 作业 Uno++ Assignm ...
python鲜花水果商城毕业设计开题报告
本文给出的python毕业设计开题报告,仅供参考!(具体模板和要求按照自己学校给的要求修改) 选题目的和意义目的:伴随着互联网技术的不断发展和完善,在人们的生活和工作的各个方面,互联网都有着非常重大 ...
用python玩转数据作业答案_大学mooc2020年用Python玩转数据作业答案
大学mooc2020年用Python玩转数据作业答案更多相关问题 [单选题]下列谁是越王勾践的著名谋士?() A. 晏子 B. 子路 C. 范蠡 D. 百里奚下列不属于组合逻辑电路的逻辑功能描述方 ...
Python第六周作业
Python第六周作业 1. 正则表达式的点星匹配 2. 计算函数曲线与x轴包围的面积 3. 哥德巴赫猜想 4. 鸡兔同笼B 5. 与7无关的数 6. 完美立方数 7. 高次方程求根 8. 在终端输出 ...
Python第五周作业
Python第五周作业 1. 一元二次方程求根 2. 百钱买百鸡 3. 鸡兔同笼 4. 最大公约数和最小公倍数 5. 判断三角形并计算面积 6. 判断IP地址合法性 7. 回文素数 8. 反素数 9. ...
python实现查收电子文件作业上交情况（完更）
python实现查收电子文件作业上交情况(完更) 本文涉及正则匹配.生成表格代码段已更新,新增匹配未交名单功能每周都要收班里的C语言作业,上一个收C语言作业的人已经查文件查疯了,我不能重蹈覆辙,所 ...

python-玉米（小米）商城作业

python-玉米（小米）商城作业相关推荐

最新文章

热门文章