python-玉米（小米）商城作业
2024-09-14 19:07:27
<!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的级别下，才能成功。
最新文章
- swift学习笔记2——函数、闭包
- IIS7如何部署asp.net网站
- VC++ chap13 文档与串行化
- An unknown error occurred & “”的 iPhone is busy: Processing symbol files
- RTL-SDR简单介绍
- SpringData系列四 @Query注解及@Modifying注解
- Winsock网络编程笔记（3）----基于UDP的server和client
- Android开源动画库nineoldandroids
- dfs模板（真心不会深搜）
- Python绘图教程
- 解决wordcloud导出图片不清楚
- protected internal 和internal 区别
- BZOJ 4029: [HEOI2015]定价 贪心
- B. Clique Problem(贪心)
- TCP 粘包及其解决方案(zz)
- chromium浏览器开发系列第二篇：如何编译最新chromium
- hdu 2222 Keywords Search——AC自动机
- Linux退出时出现there are stopped jobs如何解决？
- Kafaka入门篇
- [Luogu] P4198 楼房重建
热门文章
- （转）java基础-反射
- java设计模式-责任链
- Rabbitmq 安装&启动
- python基础介绍
- [UE4]删除动画：Remove from frame 5 to frame 18
- nginx 1.14.0 配置部署 thinkphp 5.1
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
- Delphi StringGrid控件的用法
- 新的开始 接触ASP.NET Core跨平台的框架
- 微信小程序开发warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance