html+css书店


html文件




购书网站





   
   
 
           

               图片
           

             

               图片
           
           
             
                                             
           
            
               
                                        
           
                       
   
 
   
   

       

           

书籍种类:

    
                      
       

         

           

书籍种类:

    
                      
       

         

           

书籍种类:

    
             
                    
       
   
   
 
   
tupian
   


   
 
     

       

图片


           
       

       
       

       

图片


       

图片


           

                   
  • 1.军事类
  •             
                   
  • 2.文学类

  •                  
  • 3.经济管理类

  •                    
  • 4.生活

  •                      
  • 5.艺术类

  •                        
  • 6.儿童

  •                          
  • 7.计算机/软件

  •                            
  • 8.教育

  •                              
  • 9.特色类别

  •            

       

   
 
   

     

       

           

图片


             

                图片
             

             

               

我是麦莉

              
               

出版社:上海远东出版社


               

价格:  20.00元(7.1折)


                购买|放大预览
             

       

       
       

             

图片


             

                图片
             

             

               

罂粟花

              
               

出版社: 江西南昌出版社


               

价格:  65.80元(7.1折)


                购买|放大预览
             

          
          
       

        
     

     

图片


     

           

             

                图片
             

             

               

30岁小美女幸福说

              
               

出版社:上海远东出版社


               

价格:  30.00元(8.0折)


                购买|放大预览
             

       

       
       

             

                图片
             

             

               

花卉圣经

              
               

出版社: 江西南昌出版社


               

价格:  65.80元(7.1折)


                购买|放大预览
             
                 
       
       
     

       

           

               

热门作者


               
               
                鲁迅|
                 巴金|
                  老舍|
                   冰心|
                    贾平凹|
                     曹雪芹|
                      余秋雨|
                      更多>>
                     

             

             

                 

网友推荐书


                 

                   
                 

                 

           
                   

时尚界的美丽之说


                   

说明书......


                   |more
                   
                 

             

             

                 

网友推荐书


                 

                   
                 

                 

           
                   

时尚界的美丽之说


                   

说明书......


                   |more
                   
                 

             

       

           
       

       
食色男女: 当红主持人戴军爱情小品文章

       

           

                图片
           

             


               《食色男女:当红主持人戴军爱情小品文》是当红主持人戴军的一本小品文文集。内中涉及友情、亲情与爱情其关于两性话题的故事                ,为圈内外读者所深爱。关于自我,他赤裸裸地剖白,又有对身边明星的描摹,揭示了众生百态、恋恋红尘中的男欢女爱的本质,                 让男人看了害怕,让女人看了感动和深思。点击查看《食色男女:当红主持人戴军爱情小品文》更多内容>>
               


               

               

仓央嘉措诗传¥21.40


               

爱的一百个提醒¥18.80


               

人在胡同第几槐¥14.00


                  
       

       
史记笺证(全套10册)(全新修改版)

       

           

                图片
           

             


              《史记笺证》内容为:《史记》共一百三十篇,五十二万字,记事上起轩辕黄帝,中经唐、虞、夏、商、周、秦,下迄汉武帝太初年               间(前104—前101),共写了两千多年的历史。 点击查看《史记笺证》更多内容>>
               


               

               

仓央嘉措诗传¥21.40


               

爱的一百个提醒¥18.80


               

人在胡同第几槐¥14.00


                  
       
    
     

      
   




css文件bookmain.css

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


/*公用的*/
.comWidth{margin-left:auto;   margin-right:auto;  width:900px;}






/*网页头部的上部分*/
.header i{height:10px;  display:block;  background-color:#CCC; width:100%;}
.header_top{ height:74px; }
.logo_b{margin-top:20px;  margin-left:20px;}
.logo_c{margin-top:10px;  margin-left:10px;}
.nav{font-family:"宋体";  line-height:74px;  margin-left:100px; padding:0 25px; background:url(../img/che1.png) right center no-repeat;}
.nav li{float:left; margin:0 5px;}
.text{margin-right:100px; margin-top:28px;}
.text_text{height:18px;  width:152px; line-height:18px/9;  background-color:#FFF;  border:#CCC solid 1px; padding:0 5px; }
.text_btn{height:18px;  width:40px;  border:#CCC solid 1px;  background-color:#999; margin-left:5px;  font-size:9px;  font-family:"MicrosoftYaHei", "微软雅黑" ;}
.nav a:hover{color:#F00; text-decoration:underline;}






/*网页头部的下部分的搜索区域*/
.header_select{background-color:#A60000;  width:100%; overflow:hidden; margin-top:5px;}
.header_selectb{width:299px; height:68px;  font-family:"宋体"; }
.header_img{background:url(../img/xuxian3.png) right center no-repeat;}
.header_selectb p{font-size:14px;  margin-left:30px;  margin-top:10px; color:#FFF;}
.header_selectb select{  display:block; width:166px;  height:20px;  background-color:#FFF; border:#CCC solid 1px; margin-left:30px;  position:relative;}
.select_btn{width:40px; height:18px; position:absolute; margin-left:225px; margin-top:-20px;  background:url(../img/buttom.png) center center no-repeat;}
.header_last img{width:901px; height:10px;}




/*商品列表展示*/
.body_nav{width:183px;  margin-left:30px;  margin-top:10px; overflow:hidden;}
.body_shopkind{background-color:#F1EFE3;  height:280px;  border:#CCC solid 1px;}
.body_shopkind img{height:29px;  width:186px;}
.body_shopkind i{background:url(../img/sanjiao.png) left center no-repeat; display:inline-block; float:left; height:12px;  width:8px; margin-top:5px; margin-right:8px; }
.body_shopkindul li{height:22px;  width:140px;  line-height:22px;  border-bottom:#ccc dotted 2px;  font-family:"宋体" ;    font-size:14px;}


.body_nav a{color:#000;}
.body_nav a:hover{color:blue;  text-decoration:underline;}






/*商品列表下部分*/
.body_ranking{height:545px;  margin-top:10px;  background-color:#F1EFE3;  border:#CCC solid 1px; }
.body_ranking li{width:150px;}
.body_ranking i{font-size:12px;  font-family:"MicrosoftYaHei", "微软雅黑";  margin-top:5px; margin-right:10px;  margin-left:12px;}
.book{text-align:center;  margin:20px 0; }






/*商品展示部分*/
.body_shopshow{margin-top:10px;  margin-left:11px;  width:600px;}
.goodbook{width:250px;}
.goodbook_display{margin:5px 5px;}
.name{margin-top:8px;  margin-bottom:5px; color:#ABA05F; font-weight:bold;}
.where{color:#F00; border-bottom:#ccc dotted 2px;}
.cost{ border-bottom:#ccc dotted 2px;   padding:20px 0 10px 0;}
.goodbook_display2 i{margin-top:10px; font-family:"宋体";font-style:normal;  color:#ABA05F;}
.buy{background:url(../img/che1.png)left center no-repeat;  text-indent:20px;  display:inline-block;}
.look{background:url(../img/da.png) left center no-repeat;  text-indent:25px;  display:inline-block; }


.middle{background:url(../img/xuxian.png) left center no-repeat;  display:inline-block; width:30px; height:135px; margin:0 10px;}


.henxian{margin:0 100px;}
.body_shopshow_last{margin:20px 0px;}




/*商品推荐部分*/
.body_propose{ width:600px; height:110px;  border-top:#CCC dotted 2px; }
.author p{color:#F00; margin:5px 5px;  font-weight:bold;}
.author_name{width:115px;  height:108px; margin:5px 5px;}
.author_name i{font-style:normal;  color:#ABA05F;}
.author_name a{color:#ABA05F;}
.author_name a:hover{color:blue;}


.propose_book{background-color:#EDEDED; width:200px;  height:108px;}
.propose_book p{color:#F00; margin-top:5px; margin-left:20px; font-weight:bold; font-size:14px;}
.propose_bookl{margin-top:5px;  margin-left:15px;  }
.propose_bookr{margin-right:20px;}
.propose_bookr p{color:#ABA05F;  font-size:10px;  font-weight:normal;}
.propose_bookr_shuo{border-bottom:#CCC dotted 2px; padding-bottom:10px;}
.propose_bookr i{background:url(../img/xin.png) left center no-repeat; display:inline-block; font-weight:bold;  font-size:16px; color:#ABA05F;  width:50px; height:20px;  text-indent:50px;  font-style:normal;  margin-left:20px ;  margin-top:10px;}
.propose_bookr a{color:#ABA05F; font-weight:bold;  margin-left:15px;}
.propose_bookr a:hover{color:blue;  text-decoration:underline;}




/*中间插入的图片 后窗*/
.body_tu img{width:600px; height:20x;}
/*食色男女*/
.eat{background-color:#EDEDED; width:600px;  height:25px; line-height:25px; color:#F00; font-weight:bold; text-indent:10px; margin-top:20px;}


.eat_content_tu{ margin-left:10px; margin-right:5px;}
.eat_contentc{margin-top:20px; text-indent:20px; color:#ABA05F;}
.eat_contentc a{color:#F00;}
.eat_contentc1 a{color:#F00;}
.eat_contentc a:hover{color:yellow;   text-decoration:underline;}
.eat_contentc1  a:hover{color:yellow;   text-decoration:underline;}






/*页面底部方格块区域*/
.footer_lump{width:100%;  height:131px;  border:#000 solid 1px;  margin-top:10px;}
.lump_one{margin:20px 40px;}
.lump_one_wo{font-size:14px; font-weight:bold; line-height:20px;  height:20px;  color:#000;}
.lump_one li{font-weight:bold; margin:5px 0; }
.lump_one i{font-style:normal; color:blue; font-weight:normal;  text-decoration:underline; }
.lump_one_ul i:hover{color:#0C0;   text-decoration:none;}




/*页面最底部*/
.footer_tuone{width:100%; margin-top:10px; height:10px; background-color:#999;}
.footer_tutwo{width:100%; margin-top:2px; height:10px;  background-color:#900;}
.footer_finsh{width:100%;  height:100px; text-align:center; padding-top:10px;}
.footer_finsh i{font-style:normal;  margin:0 5px;  color:#999;}
.footer_finsh p{color:#999;  margin:5px 0;}
.footer_finsh a:hover{color:red; text-decoration:underline;}
 
css文件bookreset.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名空格一个后加他,可以进行左右浮动,更加省事,不用一个个的写进行左右浮动*/





































你可能感兴趣的:(html+css,html+css编写书店页面)