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

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

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

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

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

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

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

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

给你看效果图啊

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

结构:

 <!-- main主体区域-->
  <div class="core">
    <div class="main">
      <!-- 焦点图部分 -->
      <!-- 焦点图的实质是ul中一系列的li进行切换：这里暂时不使用——因为是做静态页面的
        后期使用了再做补充 -->

      <div class="focus">
        <a href="#">
          <img src="uploads/banner1.jpg">
        </a>
        <a href="#" class="arrow_l arrow"><i></i></a>
        <a href="#" class="arrow_r arrow"><i></i></a>
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!--新闻栏目部分 -->
      <div class="newflash">
        <div class="news">
          <div class="news_hd">
            <h5 class="news_tit">品优购快报</h5>
            <a href="#" class="news_links">更多<i></i></a>
          </div>
          <ul class="news_bd">
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
          </ul>
        </div>
        <div class="life_service">
          <ul>
            <li class="life_sevice_list ">
              <a href="#">
                <i class="service_sprite sevice_huafei"></i>
                <p>话费</p>
              </a>
            </li>
            <li class="life_sevice_list ">
              <a href="#">
                <i class="service_sprite sevice_feiji"></i>
                <p>飞机</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_dianyingpiao"></i>
                <p>电影票</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_youxi"></i>
                <p>游戏</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_caipiao"></i>
                <p>**</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_jiayouka"></i>
                <p>加油卡</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_jiudian"></i>
                <p>酒店</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_huochepiao"></i>
                <p>火车票</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_zhongchou"></i>
                <p>众筹</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_licai"></i>
                <p>理财</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_lipingka"></i>
                <p>礼品卡</p>
              </a>
            </li>
            <li class="life_sevice_list">
              <a href="#">
                <i class="service_sprite sevice_baitiao"></i>
                <p>白条</p>
              </a>
            </li>
          </ul>
        </div>

        <div class="bargain">
          <a href="#"><img src="uploads/ad.jpg" alt=""></a>
        </div>
      </div>
    </div>
  </div>

  <!-- 推荐区域 recommend -->
  <div class="recommend core">

    <div class="recom_hd fl">
      <img src="./image/clock.png" alt="">
      <h3>今日推荐</h3>
    </div>
    <div class="recom_bd fl">
      <ul>
        <li><a href="#"><img src="uploads/today01.png" alt=""></a></li>
        <li><a href="#"><img src="uploads/today02.png" alt=""></a></li>
        <li><a href="#"><img src="uploads/today03.png" alt=""></a></li>
        <li><a href="#"><img src="uploads/today04.png" alt=""></a></li>
      </ul>
    </div>
  </div>

 

 

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