李洪强和你一起学习前端之(10)滑动门案例讲解,新闻列表

 

1.滑动门案例讲解

现在要求实现以下效果:

点击文字的时候要求文字和背景变成蓝色:

以下是实现代码和讲解:

首先分析: 

<!--之前我们一直是切三部分,现在我们只需要切两部分就

可以了-->

<!--分析: 把图片的第一部分圆角给a标签,把第二部分给span

标签-->

2.1搭建基础架构: 

<ul>
            <li>
                <!--a标签默认是行内元素,行内元素的宽度就是文字
                撑开的宽度-->
                <a href="#">
                    <span id="">
                        百度
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span id="">
                        百度
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span id="">
                        百度
                    </span>
                </a>
            </li>
        </ul>

 

2.2 设置公共样式

<style type="text/css">
        /*1.设置公共样式*/
        li{
            list-style: none;
            float: left;
        }
        
        </style>

2.3给li下面的a标签设置圆角图片

　　注意: 给a设置样式的

时候最好不要单独写一个"a",最好用li下面的a或者说给li

起一个类名,然后根据这个类名拿到a

li a{
            /*2.1设置a的高度*/
            height: 35px;
            /*2.2设置a的背景图片,同时图片不能平铺*/
            background: url(img/bg_r1_c1.png) no-repeat;
            /*2.3直接给a设置高度不起作用,所以*/
            display: inline-block;
        }

 

此时得到的样式是:

因为a是span的父盒子,想让span的距离a标签左边有一定的距离,我们可以设置

　/*2.4设置a标签内部元素距离左边有一定的距离(就是
             * 背景图片的宽度.
             * 注意: padding影响的是盒子内部子元素距离父元
             * 素的距离);*/
            padding-left: 7px;

 

2.4给span设置背景图片

2.4.1-2.4.3

 

/*2.4设置span的背景图片*/
  li span{
   /*2.4.1设置span的高度*/
   height: 35px;
   /*2.4.2设置span的背景图片,同时图片不能平铺 
   注意: 背景图片默认是左边对齐,如果想右边对齐的话,
   要设置right*/
   background: url(img/bg_r1_c2.png) no-repeat right;
   /*2.4.3直接给span设置高度不起作用,所以设置*/
   display: inline-block;
  }

 

　　此时的效果是: 

 

2.4.4文字压着背景图片,需要设置

 

　/*2.4.4设置文字距离右边的距离*/
  padding-right: 24px;

 

2.4.5设置文字垂直居中

 

 /*2.4.5设置文字居中*/
 line-height: 35px;

2.5设置选中时候的文字颜色和背景颜色

　　　　/*2.5设置选中时的样式*/
        li a:hover{
            /*2.5.1设置背景图片*/
            background: url(img/blue_r1_c1.png);
            /*这时只改变了a标签的背景图片,还要设置span下的选中的背景*/
            /*图片*/
        }
        /*这时只改变了a标签的背景图片,还要设置span下的选中的背景*/
        /*图片,使用后代选择器选中span标签选中时候的样式*/*/
            li a:hover span{
                background: url(img/blue_r1_c2.png) right;
            }

 3.尚合案例:

实现以下效果: 

 

3.1案例头部开始 

分析: 首先头部可以放一个盒子居中显示,然后里面左右边各一个盒子,

设置浮动

3.1.1 css初始化

/*3.1.1css初始化*/
            body,h1,h2,h3,h4,h5,h6,ul,dl,dd,p{
                padding: 0;
                margin: 0;
            }
            body,div,p,h1,h2,h3,h4,h5,h6,a,span{
                /*设置字体大小*/
                font-size: 12px;
                /*设置字体样式,如果还想设置其他的字体,
                 使用逗号隔开*/
                font-family: "宋体";
            }
            a{
                text-decoration: none;
            }
            input{
                /*表单标签的时候将边框去掉*/
                border: 0,none;
                /*去掉轮廓线*/
                outline-style: none;
            }
　　　　　　ul{
　　　　　　　　list-style : none;
　　　　　　}

3.1.2头部整体盒子的设置

头部结构

<!--头部分开始-->
        <div class="header">
                </div>    
<!--头部分结束-->

头部样式的设置

/*3.1.2头部分开始*/
            .header{
                /*设置宽度*/
                width: 980px;
                /*设置高度*/
                height: 62px;
                /*设置居中显示*/
                margin: 0 auto;
                /*一开始为了调试可以设置一个背景颜色*/
                background-color: palegreen;
                /*注意: 当父盒子没有设置边框的时候,里面的子盒子
                 设置的时候也会把父盒子带下来,需要在父盒子里设置
                 voerflow: hidden*/
                /*此代码的意思是: 外边距塌陷,让超出的部分隐藏*/
                overflow: hidden;
                
            }

3.1.3logo的设置

<!--logo部分-->
            <div class="logo">
                <!--图片-->
                <img src="img/logo.jpg"/>
            </div>

logo的样式

/*logo部分开始*/
            .logo{
                height: 39px;
                width: 179px;
                /*默认图片靠上显示设置距离上面的距离
                 注意: 当父盒子没有设置边框的时候,里面的子盒子
                 设置的时候也会把父盒子带下来,此时需要在父盒子里设置
                 voerflow: hidden才有效果*/
                margin-top: 10px;
            }
            /*logo部分结束*/

3.1.4 搜索栏

 设置搜索栏的结构

<!--搜索部分-->
            <div class="search">
                <!--搜索里面的输入框-->
                <input type="text" name="" id="" 
                    value="请输入..." class="search-text"/>
                <!--搜索里面的搜索按钮-->
                <input type="button" name="" id="" 
                    value="" class="btn"/>
                <!--注意: 此时搜索部分不见了,因为头部logo的盒子和
                搜索的盒子都是块级元素,独占一行显示,又因为我们
                在头部和盒子设置了overflow: hidden 让超出的部分
                隐藏了,所以才看不见.需要在两个盒子的样式中设置浮动-->
            </div>

设置搜索栏的样式

/*search部分开始*/
            .search{
                /*设置浮动解决了都是块级元素,不显示的问题*/
                float: right;
                margin-top: 20px;
                /*设置边框*/
                border: 1px solid #E1E1E1;
                
            }
            .search-text{
                /*给search下面的文字输入框设置宽高*/
                width: 165px;
                height:28px;
                float: left;
            }
            .search .btn{
                /*给search下面的按钮设置宽高*/
                width: 31px;
                height:34px;
                float: left;
                /*在这里注意一点:*/ 
                /*position: absolute;是设置定位的,
                 跟background-position:不是一回事,
                 background-position:是设置图片的位置''*/
                
                /*设置背景图片*/
                background: url(img/search2.jpg);
            
            }
            /*search部分结束*/

3.1.5 导航栏

导航栏的结构

 

<!--导航部分开始-->
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">智能手机</a>
                </li>
                <li>
                    <a href="#">平板电脑</a>
                </li>
                <li>
                    <a href="#">配件</a>
                </li>
                <li>
                    <a href="#">服务支持</a>
                </li>
                <li>
                    <a href="#">关于尚合</a>
                </li>
            </ul>
        </div>
        <!--导航部分结束-->

 

导航栏的样式

/*导航部分开始*/
            .nav{
                /*宽度不用设置,因为是整个浏览器的宽度
                 只设置高度*/
                height: 55px;
                border-top: 1px solid #E1E1E1;
                /*设置背景图片 要平铺*/
                background: url(img/nav_bg.png)
            }
            /*首先设置文字左边的距离*/
            .nav ul{
                margin-left: 120px;
                
            }
            /*其次设置让文字一行显示*/
            .nav li{
                float: left;
                height: 55px;
                /*设置图片,不平铺,靠右,靠上*/
                background: url(img/nav_bg-line.png) no-repeat right top;
                /*设置文字垂直居中*/
                line-height: 55px;
            }
            .nav a{
                height: 55px;
                display:inline-block;
                padding: 0 46px;
                color: black;
                /*让文字粗体显示*/
                font-weight: 700;
            }
            .nav a:hover{
                color: #7CB609;
            }
            
            /*导航部分结束*/

此时的样子:

3.2新闻列表开始

 3.2.1banner

banner结构

<!--banner部分开始-->
        <div class="banner">
            <img src="img/banner.jpg"/>
        </div>

banner的样式

/*banner部分开始*/
            .banner{
                width: 980px;
                height: 597px;
                margin:  0 auto;
            }
            /*banner部分结束*/

 

3.3新闻列表完成

3.3.1最新公告部分 

<!--公告开始-->
        <div class="news">
            <!--放一个居中的盒子-->
            <div class="news-body">
                <!--居中的盒子里面放一个左盒子-->
                <div class="l-news">
                    最新公告: 尚合Aone尚合Aone尚合Aone尚合Aone
                    尚合Aone尚合Aone尚合Aone尚合
                </div>
                <!--居中的盒子里面再放一个右边的盒子-->
                <div class="r-imgs">
                    <img src="img/zone.png"/>
                    <img src="img/xinlang.png"/>
                    <img src="img/renren.png"/>
                    <img src="img/weibo.png"/>
                </div>
                
            </div>
        </div>
        <!--公告结束-->

最新公告的样式

/*公告部分开始*/
            .news{
                /*注意: 在量高度的时候不要量边框*/
                height: 29px;
                border-top: 1px solid #e1e1e1;
                border-bottom: 1px solid #e1e1e1;
                background-color: #FBFBFB;
                margin-bottom: 10px;
            }
            .news-body{
                width: 980px;
                height: 29px;
                margin: 0 auto;
                /*background-color: chartreuse;*/
            }
            .l-news{
                /*设置浮动*/
                float: left;
                line-height: 29px;

                
            }.r-imgs{
                float: right;
                margin-top: 6px;
            }
            /*公告部分结束*/

3.3.2 商品展示

 

左边

<!--商品展示开始-->
        <div class="product">
            <!--左边盒子-->
            <div class="l-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">新品发布</span>
                </div>
                <!--图片-->
                <div class="picture">
                    <img src="img/home_hot_01.png"/>
                </div>
                
                <!--按钮-->
                <div class="l-sj">
                    <img src="img/left.png"/>
                </div>
                
                <div class="r-sj">
                    <img src="img/right.png"/>
                    
                </div>
                
            </div>
            <!--中间盒子-->
            <div class="m-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">新闻中心</span>
                </div>
                <ul>
                    <li>
                        <a href="" class="fcolor">致歉公告</a>
                    </li>
                    <li>
                        <a href="">首批尚合Aonet已全部售馨!</a>
                    </li>
                    <li>
                        <a href="">【媒体报导】国产高性价比 
                            尚合Aonet四核手机评测</a>
                    </li>
                    <li>
                        <a href="">我司产品已经通过了国家强制性
                            产品3C认证</a>
                    </li>
                    <li>
                        <a href="">尚合Aone智能手机入网证已经获工
                            信部门
                            审批下发.</a>
                    </li>
                    <li>
                        <a href="">我司通过ISO9001:2008国际质
                            量管
                            理体系认证</a>
                    </li>
                </ul>
                
            </div>
            <!--右边盒子-->
            <div class="r-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">技术与支持</span>
                </div>
                <div class="div-public">
            售后服务
                </div>
                <div class="div-public">
            投诉与建议
                </div>
                <div class="div-public">
            联保网点
                </div>
                <div class="div-public">
            常见问题
                </div>
                <p>
                    深圳市汇聚中和科技发展有限公司 服务热线: 
                    400-633-7922
                </p>
                
                
            </div>
            
            
            
        </div>
        <!--商品展示结束-->

中间

<!--商品展示开始-->
        <div class="product">
            <!--左边盒子-->
            <div class="l-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">新品发布</span>
                </div>
                <!--图片-->
                <div class="picture">
                    <img src="img/home_hot_01.png"/>
                </div>
                
                <!--按钮-->
                <div class="l-sj">
                    <img src="img/left.png"/>
                </div>
                
                <div class="r-sj">
                    <img src="img/right.png"/>
                    
                </div>
                
            </div>
            <!--中间盒子-->
            <div class="m-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">新闻中心</span>
                </div>
                <ul>
                    <li>
                        <a href="" class="fcolor">致歉公告</a>
                    </li>
                    <li>
                        <a href="">首批尚合Aonet已全部售馨!</a>
                    </li>
                    <li>
                        <a href="">【媒体报导】国产高性价比 
                            尚合Aonet四核手机评测</a>
                    </li>
                    <li>
                        <a href="">我司产品已经通过了国家强制性
                            产品3C认证</a>
                    </li>
                    <li>
                        <a href="">尚合Aone智能手机入网证已经获工
                            信部门
                            审批下发.</a>
                    </li>
                    <li>
                        <a href="">我司通过ISO9001:2008国际质
                            量管
                            理体系认证</a>
                    </li>
                </ul>
                
            </div>
            <!--右边盒子-->
            <div class="r-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">技术与支持</span>
                </div>
                <div class="div-public">
            售后服务
                </div>
                <div class="div-public">
            投诉与建议
                </div>
                <div class="div-public">
            联保网点
                </div>
                <div class="div-public">
            常见问题
                </div>
                <p>
                    深圳市汇聚中和科技发展有限公司 服务热线: 
                    400-633-7922
                </p>
                
                
            </div>
            
            
            
        </div>

右边

<!--商品展示开始-->
        <div class="product">
            <!--左边盒子-->
            <div class="l-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">新品发布</span>
                </div>
                <!--图片-->
                <div class="picture">
                    <img src="img/home_hot_01.png"/>
                </div>
                
                <!--按钮-->
                <div class="l-sj">
                    <img src="img/left.png"/>
                </div>
                
                <div class="r-sj">
                    <img src="img/right.png"/>
                    
                </div>
                
            </div>
            <!--中间盒子-->
            <div class="m-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">新闻中心</span>
                </div>
                <ul>
                    <li>
                        <a href="" class="fcolor">致歉公告</a>
                    </li>
                    <li>
                        <a href="">首批尚合Aonet已全部售馨!</a>
                    </li>
                    <li>
                        <a href="">【媒体报导】国产高性价比 
                            尚合Aonet四核手机评测</a>
                    </li>
                    <li>
                        <a href="">我司产品已经通过了国家强制性
                            产品3C认证</a>
                    </li>
                    <li>
                        <a href="">尚合Aone智能手机入网证已经获工
                            信部门
                            审批下发.</a>
                    </li>
                    <li>
                        <a href="">我司通过ISO9001:2008国际质
                            量管
                            理体系认证</a>
                    </li>
                </ul>
                
            </div>
            <!--右边盒子-->
            <div class="r-prt">
                <div class="public">
                    <img src="img/o.jpg"/>
                    <span id="">技术与支持</span>
                </div>
                <div class="div-public">
            售后服务
                </div>
                <div class="div-public">
            投诉与建议
                </div>
                <div class="div-public">
            联保网点
                </div>
                <div class="div-public">
            常见问题
                </div>
                <p>
                    深圳市汇聚中和科技发展有限公司 服务热线: 
                    400-633-7922
                </p>
            
            </div>
            
        </div>
        <!--商品展示结束-->

商品展示左边中间和右边样式的设置

/*商品展示开始*/
            .product{
                width: 980px;
                /*高度不要*/
                /*height: 300px;*/
                /*background-color: darkgray;*/
                margin: 0 auto;
                
            }
            .l-prt{
                width: 310px;
                height: 224px;
                border: 1px solid #E4E4E4;
                float: left;
                position: relative;
            }
            .m-prt{
                height: 224px;
                width: 373px;
                border: 1px solid #E4E4E4;
                float: left;
                margin-left: 12px;
            }
            .m-prt li{
                height: 27px;
                line-height: 27px;
                border-bottom: 1px dashed #DCDCDC;
                
            }
            .m-prt a{
                color: #666;
            }
            .m-prt ul{
                margin-top: 10px;
                margin-left: 23px;
                margin-right: 18px;
                
            }
            .r-prt{
                height: 224px;
                width: 268px;
                border: 1px solid #E4E4E4;
                float: right;
            }
            .public{
                margin-top: 12px;
                margin-left: 6px;
                /*文字图片垂直显示*/
                color: #7AB800;
                
            }
            .public img{
                /*设置图片居中*/
                vertical-align: middle;
            }
            .picture{
                width: 205px;
                height: 149px;
                /*定位-给子盒子设置绝对定位*/
                position: absolute;
                left: 44px;
                top: 50px;
            }
            .l-sj{
                /*设置绝对定位*/
                position: absolute;
                left: 60px;
                top: 120px;
            }
            .r-sj{
                /*设置绝对定位*/
                position: absolute;
                right: 60px;
                top: 120px;
            }
            a.fcolor{
                font: 20px;
                color: red;
                /*加粗*/
                font-weight: 700;
            }
            /*设置颜色*/
            .m-prt a:hover{
                color: chartreuse;
            }
            /*右侧的盒子*/
            .div-public{
                height: 12px;
                line-height: 12px;
                /*离左侧有个距离*/
                /*上右下左*/
                margin: 10px 0 0 28px;
                /*设置边框*/
                border-left: 3px solid #7AB800;
                /*让文字距离边框有一定的距离*/
                padding-left: 6px;
            }
            .r-prt p{
                margin-top: 30px;
                margin-left: 28px;
            }
            
            /*商品展示结束*/

 

3.4案例完成

 底部-上

<!--结尾开始-->
        <div class="footer">
            <div class="min-footer">
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
            </div>
            <div class="bottom">
                <p>
                    深圳市深圳市深圳市深圳市深圳市深圳市深圳市
                    深圳市深圳市深圳市深圳市深圳市深圳市深圳市
                </p>
                <p>
                    深圳市深圳市深圳市深圳市深圳市深圳市深圳市
                </p>
                
            </div>
            
        </div>
        <!--结尾结束-->

底部下:

<!--结尾开始-->
        <div class="footer">
            <div class="min-footer">
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
                <dl>
                    <dt>尚合首页</dt>
                    <dd>返回首页</dd>
                </dl>
            </div>
            <div class="bottom">
                <p>
                    深圳市深圳市深圳市深圳市深圳市深圳市深圳市
                    深圳市深圳市深圳市深圳市深圳市深圳市深圳市
                </p>
                <p>
                    深圳市深圳市深圳市深圳市深圳市深圳市深圳市
                </p>
                
            </div>
            
        </div>
        <!--结尾结束-->

尾部样式

/*结尾开始*/
            .footer{
                height: 220px;
                background-color:#2D2D2D;
                /*border-bottom: 2px dashed #414141;*/
                margin-top: 20px;
            }
            .min-footer{
                width: 980px;
                height: 220px;
                margin: 0 auto;
                
            }
            .min-footer dl{
                float: left;
                margin-right: 30px;
                margin-top: 20px;
            }
            dt{
                color: whitesmoke;
            }
            dd{
                margin-top: 10px;
                color: whitesmoke;
            }
            .bottom{
                height: 82px;
                border-top: 2px dashed #414141;
                background-color: #2D2D2D;
                /*设置文字居中*/
                text-align: center;
                
            }
            .bottom p{
                margin-top: 10px;
            }
            
            
            /*结尾结束*/

完成

 

3.　css的复习

3.1　　CSS第一天

css的概念

　　 css层叠样式表

基础选择器

　　>标签选择器

　P{

　　　　属性: 值

　　　　}

　　>类选择器(相当于人的名字)

    注意:类选择器通过点来定义
　　　　.自定义类名{

　　　　}

　通过class调用

　　　类的定义样式:不推荐使用中文定义类名

　　

 

　　>id选择器(相当于人的身份证,一个标签不能调用多个id选择器)

　　　　

#自定义名{

 

　　　　}

　　>通配符选择器

 

　　　

　*{

　　

　　　　}

　　　通配符选择器:所有的元素都选中

复合选择器

　　>标签指定式选择器

标签名.(#)选择器{

 

　　　　}

　　>后代选择器(选择器之间有个空格,选择器是包含嵌套的关系)

选择器 选择器{

 

　　　　}

　　　　标签关系包含嵌套关系

　　>并集选择器　　　　

选择器,选择器{

　　　　//将涉及到的选择器全部选中
　　　　}

　　>属性选择器

　input[type] [id]{

　　　　color:red

　　　　}

　　>子代选择器　　　

只能选中直接的子代　
div > span{

　　　　color: red

　　　　}

注意: 子代选择器,直接选择父元素中的直接子元素

 

 1.2 CSS第二天

书写方式:

　　内嵌式写法

　　外联式写法

　　使用link标签中的 Href = ""属性将外部样式表引入到当前页面中

　　行内式写法

标签显示模式的分类: 

　　块级元素

　　行内元素

　　行内快元素

Display:block　　 以块级元素去展示
　　Display: inline-block　　行内快
　　Display:inline　　行内
浮动/绝对定位/固定定位也可以实现模式的转化

三大特性:

　　层叠性

　　　　指的是当给一个标签设置样式发生冲突的时候,　层叠性,与调用的顺序没有关系,跟样式定义

　　　　顺序有关

　　继承性

　　　　有关文字的属性,都可以实现继承

　　　　特殊情况:

　　　　　　>a标签不能直接继承父元素中的文字颜色(因为默认a标签有一个样式)

　　　　　　>标题标签不能直接继承父元素中的文字大小

　　优先级

　　　　默认-标签-类-id-行内-

　　　　特点:　

　　　　　　继承的权重为0.意思是说: 当给一个父元素设置完样式的时候,如果子元素没有设置样式,直接拿父元素的样式

　　　　　　权重会叠加.

　　伪类

//超链接的默认样式

　　　　a:link{

　　　　}

　　　　//访问过后的样式

　　　　a:visited{

　　　　}

　　　　//鼠标移动到元素上的样式

　　　　a:hover{

　　　　}

　　　　//超链接激活的样式

　　　　:active{

　　　　}

　　　　//表单元素获取焦点的样式

　　　　:focus{

　　　　}　　

　　背景

　　　　设置背景颜色:backgroud-color
　　　　设置背景图片: background-image
　　　　设置图片平铺方式: background-repeat
　　　　设置图片的对齐方式:background-Position
　　　　设置背景图片是否固定:background-attachment :fixed;

1.3 CSS第三天

行高

　　1.行高可以继承

　　2.行高单位  px em %  不带单位

　　3.单独给一个标签设置行高:

　　Font-size: 20px

　　Px 　　 20px

　　2em  　40px

　　%　　

　　不带单位

　　4.给父盒子设置行高

　　给父元素行高: 20px

　　子元素:先计算后继承

 

盒模型:

　　border:边框(宽度,颜色,样式.宽度和颜色可以不写)

　　padding:

　　　　将盒子内容距离盒子边框的距离

　　　　边框和内边距可以影响盒子大小

　　　　继承的盒子padding值在父元素宽度范围内,不影响盒子大小

　　margin: 

　　　　垂直外边距合并:当两个盒子垂直显示的时候,外边距以最大的外边距为准

　　　　解决外边距盒子塌陷问题:

　　　　　　1.给父盒子设置border值

　　　　　　2.给父盒子设置overflow:hidden

　　

1.4 CSS第四天

浮动

　　浮动的特点:　　

　　>浮动的元素不占位置(脱标)

　　>设置浮动可以实现,元素模式的转换

　　>块级元素在一行上显示

　　>图片文字环绕

　　>网页布局

 

定位(Position)

　　

　　　　>静态定位

　　　　>绝对定位(看脸型)　

　　　　　　*脱标了

　　　　　　*绝对定位可以实现模式转换

　　　　>相对定位(是相对自己原来的位置进行定位)

　　　　　　*相对定位没有脱标

　　　　　　*相对定位:子绝父相

　　　　>固定定位

　　　　　　*固定定位脱标了

　　　　　　*能实现模式的转换