html+css购物网的实现
html文件
小米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名空格一个后加他，可以进行左右浮动，更加省事，不用一个个的写进行左右浮动*/