京东网站项目

1）做小箭头的html

  <div class="fl">

          <div class="dt">送至：北京        
                  <i><s>◇</s></i>    
          </div>
   </div>

2）css的表示
1，把i当做一个小的盒子当菱形超出盒子时隐藏超出部分（overflow）
2，设置top让s标签下移
3，做之前要初始化标签的属性，比如去掉一些自带的格式

       /*头部导航开始*/

       .shortcut{    
              height: 30px;    
              line-height: 30px;    
              background-color: #F1F1F1;    
              width: 100%;
        }
       .dt{    
              padding: 0 20px  0 10px;    
              background-color: pink;    
              position: relative;
        }
      .dt i{    
              font: 400 15px/15px "宋体";    
              position: absolute;      
              top: 13px;    
              right: 3px;    
              height: 7px;    
              width: 15px;    
              overflow: hidden;
      }
     .dt s{    position: absolute;    top: -8px;}

3）右侧的导航
1,小箭头用原来的dt样式

   html

    <div class="fr">
              <ul>
                  <li>
                      <a href="#">你好，请登录</a>  
                      <a href="#" class="col-red">免费注册</a>
                  </li>
                  <li class="line"></li>
                  <li>我的订单</li>
                  <li class="line"></li>
                  <li class="dt"> 我的京东
                      <i><s>◇</s></i>
                  </li>
              </ul>
             </div>
  css样式
      .shortcut .dt{     加上.shortcut是为了提高权重，.fr li会影响其布局
          padding: 0 20px  0 10px;
          position: relative;
        }
      .fr li{   
          float: left;
          padding: 0 10px;
      }
      .fr .line{   设置小竖线
          width: 1px;
          height: 12px;
          background-color: #ddd;
          margin-top: 9px;
          padding: 0;
      }

2，第二种方式

css
.dt,.shortcut .fore{
padding: 0 20px 0 10px;
position: relative;
}
.dt i,.fore i{
font: 400 15px/15px "宋体";
position: absolute;
top: 13px;
right: 3px;
height: 7px;
width: 15px;
overflow: hidden;
}
.dt s,.fore s{
position: absolute;
top: -8px;
}
html
<li class="fore">
手机京东
<i><s>◇</s></i>
</li>

4）最底下的背景图片

 1, css

  .banner604{    
      position: relative;            不设置宽高是为了不占位置
    }
    .banner604 a{    
      position: absolute;    
      top: 0;    
      left: 0;    
      width: 100%;    相对定位的宽为内容的宽，想要充满父容器就要设置这个
      height: 604px;   设置宽高但是不占位置，就不会影响其他的布局
    }
2, html
  <!--大背景banner-->
      <div class="banner604">
          <a href="#">123fsdfsdfsdfd</a>
      </div>

京东网站项目

推荐阅读更多精彩内容