HTML+CSS实战---------一个电商类的小型项目：品优购（三）

昨天完成到了main主体区域板块。

公共样式写好了，就该新建一个CSS文件单独为首页index设置样式。

进度有点慢，因为昨天出现了问题，debug都用了半个小时，最后找到出问题的地方。

就是有一个盒子的高度没有控制好，导致底部分布局坏掉了，最后通过控制台进行调试的。

所以，当遇到问题的时候，先不要去找代码，先去控制台调试，慢慢慢来，不能着急，一定要细心，仔细。

切图也是一样的，一定要细心把握好尺寸！！！

完成一部分就会上传一部分的代码，到最好都写好了我再统一发出来。

给你看效果图啊

里面绝大部分就是可点击进行跳转的链接

结构:

 
  

    

      
      

      

        
          
        
        
        
        

          

          

          

          

          

          

        
      
      
      

        

          

            
品优购快报
            更多
          
          

            
【特惠】爆款耳机5折秒！
            
【特惠】母亲节，健康好礼低至5折！
            
【特惠】爆款耳机5折秒！
            
【特惠】9.9元洗100张照片！
            
【特惠】长虹智能空调立省1000
          
        
        

          

            

              
                
                
话费
              
            
            

              
                
                
飞机
              
            
            

              
                
                
电影票
              
            
            

              
                
                
游戏
              
            
            

              
                
                
彩票
              
            
            

              
                
                
加油卡
              
            
            

              
                
                
酒店
              
            
            

              
                
                
火车票
              
            
            

              
                
                
众筹
              
            
            

              
                
                
理财
              
            
            

              
                
                
礼品卡
              
            
            

              
                
                
白条
              
            
          
        

        

          
        
      
    
  

  
  


    

      
      
今日推荐
    
    

      

        

        

        

        

      
    
  

 

 

index.css

.main {

    width: 980px;
    height: 455px;
    margin-top: 10px;
    margin-left: 219px;
}

.focus {
    position: relative;
    float: left;
    width: 721px;
    height: 456px;
    background: url(../uploads/banner1.jpg) no-repeat;
}

.focus img {
    display: block;
    width: 721px;
    height: 456px;
}

.arrow {
    width: 30px;
    height: 40px;
    background-color: rgba(0, 0, 0, .4);
    text-align: center;
    line-height: 40px;
    font-family: 'icomoon';
    font-size: 16px;
    color: #fff;
}



.arrow_l {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -20px;
}

.arrow_r {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -20px;
}

.focus ul {
    position: absolute;
    left: 35px;
    bottom: 35px;
}

.focus ul li {
    float: left;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 116, 139, .3);
    border-radius: 50%;
    margin-left: 5px;
}

.focus ul li:hover {
    background-color: rgba(255, 116, 139, .3);
    border: 2px solid rgba(255, 116, 139, .3);
    cursor: pointer;
}

.focus ul li:first-child {
    background-color: rgba(255, 116, 139, .3);
}

/* 新闻栏 */
.newflash {
    float: right;
    width: 250px;
    height: 456px;
    /* background-color: rgb(255, 116, 139); */
}

.news {
    /* 不要给宽，宽的默认值是auto ，继承父元素的宽度 */
    /* width: 248px; */
    height: 163px;
    border: 1px solid #ccc;
}

.news_hd {
    height: 32px;
    border-bottom: 1px dotted #ccc;
    line-height: 32px;
}

.news_hd .news_tit {
    float: left;
    font-size: 14px;
    color: #333333;
    margin-left: 10px;
}

.news_hd .news_links {
    float: right;
    font-family: 'icomoon';
    font-size: 12px;
    padding-right: 10px;
}

.news_bd {
    margin: 10px 0 0 15px;
}

.news_bd li {
    height: 23px;
}

.bargain img {
    display: block;
    width: 250px;
    height: 75px;
}

.life_service {
    height: 208px;
    border: 1px solid #ccc;
    border-top: none;
    /* 解决溢出问题 */
    overflow: hidden;
    margin-bottom: 5px;
}

.life_service ul {
    width: 252px;
}

.life_service .life_sevice_list {
    float: left;
    /* 解决外边距重合问题 */
    overflow: hidden;
    width: 62px;
    height: 70px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

.life_service .service_sprite {
    display: block;
    width: 25px;
    height: 25px;
    /* 会有外边距合并问题 */
    margin: 13px 18px 6px 18px;
    background: url(../image/icons.png) no-repeat;
}

.life_service .sevice_huafei {
    background-position: -17px -16px;
}

.life_service .sevice_feiji {
    background-position: -78px -17px;
}

.life_service .sevice_dianyingpiao {
    background-position: -141px -16px;
}

.life_service .sevice_youxi {
    background-position: -206px -15px;
}

.life_service .sevice_caipiao {
    background-position: -17px -88px;
}

.life_service .sevice_jiayouka {
    background-position: -77px -88px;
}

.life_service .sevice_jiudian {
    background-position: -141px -88px;
}

.life_service .sevice_huochepiao {
    background-position: -206px -88px;
}

.life_service .sevice_zhongchou {
    background-position: -17px -159px;
}

.life_service .sevice_licai {
    background-position: -77px -158px;
}

.life_service .sevice_lipingka {
    background-position: -141px -159px;
}

.life_service .sevice_baitiao {
    background-position: -206px -159px;
}

/* 推荐区域 */
.recommend {
    height: 163px;
    margin-top: 10px;
    background-color: #ebebeb;
}

/* 推荐区的头部 */
.recom_hd {
    width: 206px;
    height: 163px;
    background-color: #5c5251;
    text-align: center;
}

.recom_hd img {
    display: block;
    margin-top: 31px;
    margin-left: 70px;
    margin-bottom: 10px;
}

.recom_hd h3 {
    font-size: 18px;
    font-weight: normal;
    color: white;
}

/* 推荐区的内容部分 */
.recom_bd ul {
    margin-top: 10px;
}

.recom_bd li {
    float: left;
    width: 248px;
    height: 143px;
    border-right: 1px solid rgba(c, c, c, .7);
}

.recom_bd li:last-child {
    border: none;
}

.recom_bd img,
.recom_bd a {
    display: block;
    width: 100%;
    height: 100%;
}