短视频平台搭建，移动端商品下单、购买过程的实现

代码部分

@charset "utf-8";<br>/* CSS Document */<br>/*公用的*/<br>.comWidth{margin-left:auto;margin-right:auto;width:1000px;}/*左右外边距都居中，处于水平位置*/<br>.leftArea{float:left;}<br>.rightArea{float:right;}<br>/*topBar*/<br>.topBar{height:31px;   line-height:31px;}/*line-height表示行高，这样设置可以让字体处于中间位置*/<br>.collection{background:url(../images/icon/collection.png) left center<br>no-repeat;  padding-left:23px;  font-weight:bold;}/*left 表示背景图片的x坐标靠最左，center表示y坐标居中，bold表示字体加粗*/<br>.topBar a:hover{color:blue;}/*让所有超链接的字体，只要鼠标放上去颜色就会产生变化*/<br>/*logoBar*/<br>.logoBar{height:85px;   background-color:#1D7AD9;}<br>.logo{padding-left:41px;   padding-top:13px; }/*设定内边距*/<br>/*search*/<br>.search_box{width:430px;   padding-top:23px;   padding-left:185px;}<br>/*.search_text{width:350px;height:14px;line-height:14px;padding:11px 5px 10px; background-color:#FFF;}这是第一种解决IE6中的问题*/<br>.search_text{width:350px;   height:35px;  line-height:35px/9;  padding:0 5px;   background-color:#FFF;}/*这是第二种，/9是指在所有IE阅览器中适用*/<br>.search_btn{width:70px;   height:35px;  font-size:14px;  font-family:"MicrosoftYaHei", "微软雅黑";   background-color:#FF8C00;   color:#FFF;}<br>/*购物车*/<br>.shopCar{width:145px; height:35px;  background-color:#FF8C00;  margin-top:23px;   font-size:14px;   font-family:"MicrosoftYaHei", "微软雅黑";   color:#FFF;  display:inline; }<br>.shopText{  height:100%;  width:87px;  line-height:35px;      border-right:#E27A00 solid 1px;  background:url(../images/icon/shopCar.png) 5px center  no-repeat; text-indent:40px; }<br>.shopNum{width:27px;  height:35px;   border-left:#E27A00 solid 1px;  line-height:35px;  background:url(../images/icon/sanjiao.jpg) 33px center no-repeat;  text-align:right;  padding-right:29px;}<br>/*导航*/<br>.navBox{height:35px;  background-color:#1369C0;  color:#FFF;}<br>.shopClass{width:190px;  position:relative;}/*overflow:hidden可以将超出该区域的内容隐藏掉*/<br>.shopClass h3{ text-align:center;    line-height:35px; }<br>.shopClass i{width:22px;  height:7px;  overflow:hidden;  background:url(../images/icon/fenlei.png) left center no-repeat; <br> display:inline-block; margin-left:5px;}<br>.nav,.shopClass{font-family:"MicrosoftYaHei", "微软雅黑"; }<br>.nav{line-height:35px;}<br>.nav li{float:left;}<br>.nav a{padding:0 35px;  height:35px;  display:inline-block;  color:#FFF;}/*让a超链接有一个区域块，而不是仅仅是文字*/<br>.nav .active{background-color:#4593FD;}<br>/*商品弹出列表*/<br>.shopClass_show{background-color:#4593FD;  position:absolute;  left:0; top:35px; width:100%;}<br>.shopClass_item{padding:14px 10px;  border-bottom:#3487F2 solid 1px; border-top:#5AA1FE solid 1px;}<br>.shopClass_item dt{height:24px; background:url(../images/icon/fenlei1.png) right center no-repeat;}<br>.shopClass_item .b{/*font-family:"MicrosoftYaHei", "微软雅黑";  font-size::14px;  其中1表示行高line-height：1px*/font:14px/1 "MicrosoftYaHei", "微软雅黑";    font-weight:bold; }<br>.shopClass_item a{color:#FFF;}<br>.shopClass_item .aLink{width:48;  height:20px; background-color:#06C; display:inline-block;  line-height:20px;  text-align:center;  text-decoration:underline;}<br>/*banner部分*/<br>.banner{margin-bottom:15px;}<br>.banner_bar{ float:right; position:relative;  overflow:hidden; }<br>.imgBox{  position:absolute; left:0; top:0;}<br>.imgBox li{float:left;}<br>.imgBox img{   display:block;}<br>.imgNum{position:absolute;  left:0;  bottom:20px; width:100%; text-align:center;}<br>.imgNum a{width:20px; height:5px; display:inline-block ;overflow:hidden;  background:#FFF; margin:0 3px;}<br>.imgNum .active{background-color:#FC0;}<br>.banner_big,<br>.banner_big img{width:810px;  height:355px;}<br>.banner_big  .imgBox{width:1620px;  height:355px;}<br>.banner_small,/*注意后面那个逗号不能掉*/<br>.banner_small img{width:190px;  height:400px;}<br>.banner_small .imgBox{width:380px;  height:400px;}<br>/*商品标题*/<br>.shopTit{height:44px;  font-family:"MicrosoftYaHei", "微软雅黑";    line-height:44px;  margin-bottom:15px;}<br>.shopTit h3{font-size:24px; float:left;  font-weight:normal;/*把加粗干掉*/}<br>.icon{height:44px;  width:44px; background:url(../images/icon/shopTit.jpg) left top no-repeat;  float:left;  padding-left:15px;}<br>/*浮动了以后内嵌元素就支持宽高了，就没必要用display：inline-block；*/<br>.more{float:right; font-family:"宋体";}<br>.more:hover{color:blue;  text-decoration:underline;}/*这个元素是对超链接，当鼠标移动到超链接时会发生的变化*/<br>/*商品列表*/<br>.shopList{margin-bottom:30px;}<br>.shopList .leftArea{width:190px;}<br>.shopList .rightArea{width:808px;  border:#999 solid 1px;  border-bottom:#F90 solid 3px;  height:396px;   overflow:hidden;}<br>/*商品列表右侧*/<br>.shopList_top{margin-right:-4px;}<br>.shop_item{width:202px;  height:279px;   border-right:#999 solid 1px;  border-bottom:#999 solid 1px;  text-align:center;  font-family:"MicrosoftYaHei", "微软雅黑";  float:left; }<br>.shop_img{ height:218px;}<br>.shop_img img{height:218px;  width:100%;  display:block;}<br>.shop_item h3{font-size:16px;  font-weight:bold; }<br>.shop_item  p{font-size:14px;  color:#F00; line-height:21px; }<br>/*商品列表右侧小*/<br>.shopList_sm{margin-right:-4px;}<br>.shopItem_sm{width:202px;  height:116px;   border-right:#999 solid 1px;  border-bottom:#999 solid 1px;  text-align:center;  font-family:"MicrosoftYaHei", "微软雅黑";  float:left;}<br>.shopItem_smImg{width:95px;  height:95px;  text-align:center;  float:left;  padding-top:10px;}<br>.shopItem_smImg img{width:95px;  height:95px; display:inline-block;}<br>.shopItem_text{padding-top:28px;  float:left;  width:100px;}<br>.shopItem_text h3{font-family:"MicrosoftYaHei", "微软雅黑";  font-size:16px;  font-weight:normal; color:#181818;  line-height:30px;}<br>.shopItem_text p{color:#FF7300;}<br>/*网页脚部*/<br>.footer{ background-color:#D4D4D4;  text-align:center;  line-height:24px;  padding:50px 0;  font-family:"宋体";}/*text-align:center父类的div样式不能作用到子类的div样式中*/<br>.footer i{font-style:normal;  margin:0 5px;}<br>.footer a{color:#000;}<br>.footer a:hover{color:blue; }<br>.web img{ width:50px;  height:50px; margin:10px 10px;}

代码部分

@charset utf-8;<br> CSS Document <br>body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin0;padding0;}<br>body{font-size12px;}<br>img{bordernone;}<br>li{list-stylenone;}<br>input,select,textarea{outlinenone;bordernone;backgroundnone;}<br>textarea{resizenone;}<br>a{text-decorationnone;color#656565;}这个color是将所以的超链接的字体都变成该颜色<br>清除浮动<br>.clearfixafter{content;displayblock;clearboth;}<br>.clearfix{zoom1;}<br>.fl{floatleft;}<br>.fr{floatright;}直接在表签class名空格一个后加他，可以进行左右浮动，更加省事，不用一个个的写进行左右浮动

以上就是短视频平台搭建，移动端商品下单、购买过程的实现，更多内容欢迎关注之后的文章