手机购买页面的展示

Posted 2022-11-30 木头科技㉿

手机购买页面的展示

在现在生活中，处处都离不开手机的身影，同时，在我们的生活中也是必不可少的一员。网络的发达造就了时代的进步，那么随之而开的便是手机的选择，如何选择适合自己的手机也是一个艰难的问题。

购买手机页面展示图

代码部分

@charset "utf-8";
/* CSS Document */


/*公用的*/
.comWidthmargin-left:auto;margin-right:auto;width:1000px;/*左右外边距都居中，处于水平位置*/
.leftAreafloat:left;
.rightAreafloat:right;




/*topBar*/
.topBarheight:31px;  background-color:#F7F7F7; line-height:31px;/*line-height表示行高，这样设置可以让字体处于中间位置*/
.collectionbackground:url(../images/icon/collection.png) left center
no-repeat;  padding-left:23px;  font-weight:bold;/*left 表示背景图片的x坐标靠最左，center表示y坐标居中，bold表示字体加粗*/
.topBar a:hovercolor:blue;/*让所有超链接的字体，只要鼠标放上去颜色就会产生变化*/




/*logoBar*/
.logoBarheight:85px;   background-color:#1D7AD9;
.logopadding-left:41px;   padding-top:13px; /*设定内边距*/




/*search*/
.search_boxwidth:430px;   padding-top:23px;   padding-left:185px;
/*.search_textwidth:350px;height:14px;line-height:14px;padding:11px 5px 10px; background-color:#FFF;这是第一种解决IE6中的问题*/
.search_textwidth:350px;   height:35px;  line-height:35px/9;  padding:0 5px;   background-color:#FFF;/*这是第二种，/9是指在所有IE阅览器中适用*/
.search_btnwidth:70px;   height:35px;  font-size:14px;  font-family:"MicrosoftYaHei", "微软雅黑";   background-color:#FF8C00;   color:#FFF;




/*购物车*/
.shopCarwidth: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; 
.shopNumwidth: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;




/*导航*/
.navBoxheight:35px;  background-color:#1369C0;  color:#FFF;
.shopClasswidth:190px;  position:relative;/*overflow:hidden可以将超出该区域的内容隐藏掉*/
.shopClass h3 text-align:center;    line-height:35px; 
.shopClass iwidth:22px;  height:7px;  overflow:hidden;  background:url(../images/icon/fenlei.png) left center no-repeat; 
 display:inline-block; margin-left:5px;
.nav,.shopClassfont-family:"MicrosoftYaHei", "微软雅黑"; 
.navline-height:35px;
.nav lifloat:left;
.nav apadding:0 35px;  height:35px;  display:inline-block;  color:#FFF;/*让a超链接有一个区域块，而不是仅仅是文字*/
.nav .activebackground-color:#4593FD;




/*商品弹出列表*/
.shopClass_showbackground-color:#4593FD;  position:absolute;  left:0; top:35px; width:100%;
.shopClass_itempadding:14px 10px;  border-bottom:#3487F2 solid 1px; border-top:#5AA1FE solid 1px;
.shopClass_item dtheight: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 acolor:#FFF;
.shopClass_item .aLinkwidth:48;  height:20px; background-color:#06C; display:inline-block;  line-height:20px;  text-align:center;  text-decoration:underline;




/*banner部分*/
.bannermargin-bottom:15px;
.banner_bar float:right; position:relative;  overflow:hidden; 
.imgBox  position:absolute; left:0; top:0;
.imgBox lifloat:left;
.imgBox img   display:block;
.imgNumposition:absolute;  left:0;  bottom:20px; width:100%; text-align:center;
.imgNum awidth:20px; height:5px; display:inline-block ;overflow:hidden;  background:#FFF; margin:0 3px;
.imgNum .activebackground-color:#FC0;
.banner_big,
.banner_big imgwidth:810px;  height:355px;
.banner_big  .imgBoxwidth:1620px;  height:355px;
.banner_small,/*注意后面那个逗号不能掉*/
.banner_small imgwidth:190px;  height:400px;
.banner_small .imgBoxwidth:380px;  height:400px;




/*商品标题*/
.shopTitheight:44px;  font-family:"MicrosoftYaHei", "微软雅黑";    line-height:44px;  margin-bottom:15px;
.shopTit h3font-size:24px; float:left;  font-weight:normal;/*把加粗干掉*/
.iconheight:44px;  width:44px; background:url(../images/icon/shopTit.jpg) left top no-repeat;  float:left;  padding-left:15px;
/*浮动了以后内嵌元素就支持宽高了，就没必要用display：inline-block；*/
.morefloat:right; font-family:"宋体";
.more:hovercolor:blue;  text-decoration:underline;/*这个元素是对超链接，当鼠标移动到超链接时会发生的变化*/






/*商品列表*/
.shopListmargin-bottom:30px;
.shopList .leftAreawidth:190px;
.shopList .rightAreawidth:808px;  border:#999 solid 1px;  border-bottom:#F90 solid 3px;  height:396px;   overflow:hidden;




/*商品列表右侧*/
.shopList_topmargin-right:-4px;
.shop_itemwidth: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 imgheight:218px;  width:100%;  display:block;
.shop_item h3font-size:16px;  font-weight:bold; 
.shop_item  pfont-size:14px;  color:#F00; line-height:21px; 
/*商品列表右侧小*/
.shopList_smmargin-right:-4px;
.shopItem_smwidth:202px;  height:116px;   border-right:#999 solid 1px;  border-bottom:#999 solid 1px;  text-align:center;  font-family:"MicrosoftYaHei", "微软雅黑";  float:left;
.shopItem_smImgwidth:95px;  height:95px;  text-align:center;  float:left;  padding-top:10px;
.shopItem_smImg imgwidth:95px;  height:95px; display:inline-block;
.shopItem_textpadding-top:28px;  float:left;  width:100px;
.shopItem_text h3font-family:"MicrosoftYaHei", "微软雅黑";  font-size:16px;  font-weight:normal; color:#181818;  line-height:30px;
.shopItem_text pcolor:#FF7300;






/*网页脚部*/
.footer background-color:#D4D4D4;  text-align:center;  line-height:24px;  padding:50px 0;  font-family:"宋体";/*text-align:center父类的div样式不能作用到子类的div样式中*/
.footer ifont-style:normal;  margin:0 5px;
.footer acolor:#000;
.footer a:hovercolor:blue; 
.web img width:50px;  height:50px; margin:10px 10px;
————————————————
版权声明：本文为CSDN博主「疯狂的懒懒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xdkprosperous/article/details/53907942

代码部分

@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,inputmargin0;padding0;
bodyfont-size12px;
imgbordernone;
lilist-stylenone;
input,select,textareaoutlinenone;bordernone;backgroundnone;
textarearesizenone;
atext-decorationnone;color#656565;这个color是将所以的超链接的字体都变成该颜色


清除浮动
.clearfixaftercontent;displayblock;clearboth;
.clearfixzoom1;
.flfloatleft;
.frfloatright;直接在表签class名空格一个后加他，可以进行左右浮动，更加省事，不用一个个的写进行左右浮动

结尾

大家可以一起动手尝试一下，把学到的只是运用起来才是真的变成了自己的哦！
希望以上能对大家有所帮助。