短視訊平臺搭建，移動端商品下單、購買過程的實現

短視訊平臺搭建，移動端商品下單、購買過程的實現

程式碼部分

@charset "utf-8";
/* CSS Document */
/*公用的*/
.comWidth{margin-left:auto;margin-right:auto;width:1000px;}/*左右外邊距都居中，處於水平位置*/
.leftArea{float:left;}
.rightArea{float:right;}
/*topBar*/
.topBar{height:31px;  background-color:#F7F7F7; line-height:31px;}/*line-height表示行高，這樣設定可以讓字型處於中間位置*/
.collection{background:url(../images/icon/collection.png) left center
no-repeat;  padding-left:23px;  font-weight:bold;}/*left 表示背景圖片的x座標靠最左，center表示y座標居中，bold表示字型加粗*/
.topBar a:hover{color:blue;}/*讓所有超連結的字型，只要滑鼠放上去顏色就會產生變化*/
/*logoBar*/
.logoBar{height:85px;   background-color:#1D7AD9;}
.logo{padding-left:41px;   padding-top:13px; }/*設定內邊距*/
/*search*/
.search_box{width:430px;   padding-top:23px;   padding-left:185px;}
/*.search_text{width:350px;height:14px;line-height:14px;padding:11px 5px 10px; background-color:#FFF;}這是第一種解決IE6中的問題*/
.search_text{width:350px;   height:35px;  line-height:35px/9;  padding:0 5px;   background-color:#FFF;}/*這是第二種，/9是指在所有IE閱覽器中適用*/
.search_btn{width:70px;   height:35px;  font-size:14px;  font-family:"MicrosoftYaHei", "微軟雅黑";   background-color:#FF8C00;   color:#FFF;}
/*購物車*/
.shopCar{width:145px; height:35px;  background-color:#FF8C00;  margin-top:23px;   font-size:14px;   font-family:"MicrosoftYaHei", "微軟雅黑";   color:#FFF;  display:inline; }
.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; }
.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;}
/*導航*/
.navBox{height:35px;  background-color:#1369C0;  color:#FFF;}
.shopClass{width:190px;  position:relative;}/*overflow:hidden可以將超出該區域的內容隱藏掉*/
.shopClass h3{ text-align:center;    line-height:35px; }
.shopClass i{width:22px;  height:7px;  overflow:hidden;  background:url(../images/icon/fenlei.png) left center no-repeat; 
 display:inline-block; margin-left:5px;}
.nav,.shopClass{font-family:"MicrosoftYaHei", "微軟雅黑"; }
.nav{line-height:35px;}
.nav li{float:left;}
.nav a{padding:0 35px;  height:35px;  display:inline-block;  color:#FFF;}/*讓a超連結有一個區域塊，而不是僅僅是文字*/
.nav .active{background-color:#4593FD;}
/*商品彈出列表*/
.shopClass_show{background-color:#4593FD;  position:absolute;  left:0; top:35px; width:100%;}
.shopClass_item{padding:14px 10px;  border-bottom:#3487F2 solid 1px; border-top:#5AA1FE solid 1px;}
.shopClass_item dt{height:24px; background:url(../images/icon/fenlei1.png) right center no-repeat;}
.shopClass_item .b{/*font-family:"MicrosoftYaHei", "微軟雅黑";  font-size::14px;  其中1表示行高line-height：1px*/font:14px/1 "MicrosoftYaHei", "微軟雅黑";    font-weight:bold; }
.shopClass_item a{color:#FFF;}
.shopClass_item .aLink{width:48;  height:20px; background-color:#06C; display:inline-block;  line-height:20px;  text-align:center;  text-decoration:underline;}
/*banner部分*/
.banner{margin-bottom:15px;}
.banner_bar{ float:right; position:relative;  overflow:hidden; }
.imgBox{  position:absolute; left:0; top:0;}
.imgBox li{float:left;}
.imgBox img{   display:block;}
.imgNum{position:absolute;  left:0;  bottom:20px; width:100%; text-align:center;}
.imgNum a{width:20px; height:5px; display:inline-block ;overflow:hidden;  background:#FFF; margin:0 3px;}
.imgNum .active{background-color:#FC0;}
.banner_big,
.banner_big img{width:810px;  height:355px;}
.banner_big  .imgBox{width:1620px;  height:355px;}
.banner_small,/*注意後面那個逗號不能掉*/
.banner_small img{width:190px;  height:400px;}
.banner_small .imgBox{width:380px;  height:400px;}
/*商品標題*/
.shopTit{height:44px;  font-family:"MicrosoftYaHei", "微軟雅黑";    line-height:44px;  margin-bottom:15px;}
.shopTit h3{font-size:24px; float:left;  font-weight:normal;/*把加粗幹掉*/}
.icon{height:44px;  width:44px; background:url(../images/icon/shopTit.jpg) left top no-repeat;  float:left;  padding-left:15px;}
/*浮動了以後內嵌元素就支援寬高了，就沒必要用display：inline-block；*/
.more{float:right; font-family:"宋體";}
.more:hover{color:blue;  text-decoration:underline;}/*這個元素是對超連結，當滑鼠移動到超連結時會發生的變化*/
/*商品列表*/
.shopList{margin-bottom:30px;}
.shopList .leftArea{width:190px;}
.shopList .rightArea{width:808px;  border:#999 solid 1px;  border-bottom:#F90 solid 3px;  height:396px;   overflow:hidden;}
/*商品列表右側*/
.shopList_top{margin-right:-4px;}
.shop_item{width:202px;  height:279px;   border-right:#999 solid 1px;  border-bottom:#999 solid 1px;  text-align:center;  font-family:"MicrosoftYaHei", "微軟雅黑";  float:left; }
.shop_img{ height:218px;}
.shop_img img{height:218px;  width:100%;  display:block;}
.shop_item h3{font-size:16px;  font-weight:bold; }
.shop_item  p{font-size:14px;  color:#F00; line-height:21px; }
/*商品列表右側小*/
.shopList_sm{margin-right:-4px;}
.shopItem_sm{width:202px;  height:116px;   border-right:#999 solid 1px;  border-bottom:#999 solid 1px;  text-align:center;  font-family:"MicrosoftYaHei", "微軟雅黑";  float:left;}
.shopItem_smImg{width:95px;  height:95px;  text-align:center;  float:left;  padding-top:10px;}
.shopItem_smImg img{width:95px;  height:95px; display:inline-block;}
.shopItem_text{padding-top:28px;  float:left;  width:100px;}
.shopItem_text h3{font-family:"MicrosoftYaHei", "微軟雅黑";  font-size:16px;  font-weight:normal; color:#181818;  line-height:30px;}
.shopItem_text p{color:#FF7300;}
/*網頁尾部*/
.footer{ background-color:#D4D4D4;  text-align:center;  line-height:24px;  padding:50px 0;  font-family:"宋體";}/*text-align:center父類的div樣式不能作用到子類的div樣式中*/
.footer i{font-style:normal;  margin:0 5px;}
.footer a{color:#000;}
.footer a:hover{color:blue; }
.web img{ width:50px;  height:50px; margin:10px 10px;}

程式碼部分

@charset utf-8;
 CSS Document 
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin0;padding0;}
body{font-size12px;}
img{bordernone;}
li{list-stylenone;}
input,select,textarea{outlinenone;bordernone;backgroundnone;}
textarea{resizenone;}
a{text-decorationnone;color#656565;}這個color是將所以的超連結的字型都變成該顏色
清除浮動
.clearfixafter{content;displayblock;clearboth;}
.clearfix{zoom1;}
.fl{floatleft;}
.fr{floatright;}直接在表籤class名空格一個後加他，可以進行左右浮動，更加省事，不用一個個的寫進行左右浮動

以上就是 短視訊平臺搭建，移動端商品下單、購買過程的實現，更多內容歡迎關注之後的文章