京东网站项目

• 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>