html+css购物网的实现

html文件 

   

       

         

                收藏慕课
         

         

                欢迎来到慕课网！[登陆][免费注册]
         

         

   

   

         

             

               
             

             

                 
                 
             

             

                  购物车
                  0
             

         

         
   

   

         

             

                     

全部产品分类

                     

                         

                             

手机  数码 合约机

                             

荣耀3x 单反 智能设备

                         

                                   
                         

                             

手机  数码 合约机

                             

荣耀3x 单反 智能设备

                         

                                      
                         

                             

手机  数码 合约机

                             

荣耀3x 单反 智能设备

                         

                           

                             

手机  数码 合约机

                             

荣耀3x 单反 智能设备

                         

                           

                             

手机  数码 合约机

                             

荣耀3x 单反 智能设备

                         

                     

                     
                 

                 

                   
• 数码城

                   
• 天黑黑

                   
• 团购

                   
• 发现

                   
• 二手特卖

                   
• 名品会

                 

                              
         

   

     

           

             
• 

               
• 

           

           

               
           

     

   
 

家用电脑

 
  更多>>

   

       

           

             
• 

               
• 

           

           

               
           

     

   

   

       

           

             

                 
             

             

小米M3

             

1100元

           

           

             

                 
             

             

小米M4

             

1350元

           

           

             

                 
             

             

小米M4

             

1580元

           

           

             

                 
             

             

小米M3

             

1100元

           

       

       

           

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

             

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

             

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

             

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

       

   

   
 

家用电脑

 
  更多>>

   

       

           

             
• 

               
• 

           

           

               
           

     

   

   

       

           

             

                 
             

             

小米M3

             

1100元

           

           

             

                 
             

             

小米M4

             

1350元

           

           

             

                 
             

             

小米M4

             

1580元

           

           

             

                 
             

             

小米M3

             

1100元

           

       

       

           

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

             

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

             

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

             

               

                      
                 

                 

                     

NFC技术一碰轻松配对！接触屏幕

                     

售价：1100

                 

           

       

   

   
   

小米手机简介|手机广告|诚信卖机|联系我们|客服热线：400-675-1234

   

fCopyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2

   
   

   
 
 
  
   

main.css文件

@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;}

reset.css文件

@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{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
a{text-decoration:none;color:#656565;}/*这个color是将所以的超链接的字体都变成该颜色*/


/*清除浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}/*直接在表签class名空格一个后加他，可以进行左右浮动，更加省事，不用一个个的写进行左右浮动*/