2、首页最新

1、整体和头尾

    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <span class="fa fa-map-marker">&nbsp;&nbsp;东大软件园(B园)</span>
            <i class="fa fa-caret-down"></i>
            
        </div>
        <div class="search" id="search">
            <div class="content">
                <i class="fa fa-search">
                </i>
                搜索饿了么商家商品名字、商品名称
            </div>
        </div>

        <!--底部 -->
        <div class="footer">
            <ul>
                <li>
                    <i class="fa fa-home"></i>
                    <a href="#">首页</a>
                </li>
                <li>
                    <i class="fa fa-compass"></i>
                    <a href="#">发现</a>
                    
                </li>
                <li>
                    <i class="fa fa-list-alt"></i>
                    <a href="#">订单</a>
                </li>
                <li>
                    <i class="fa fa-user"></i>
                    <a href="#">我的</a>
                </li>
            </ul>
        </div>
    </div>

css

    <style type="text/css">
        .container{
            width:100vw;
            height:100vh;
        }
        .header{
            width:100vw;
            height:12vw;
            line-height: 12vw;
            background-color: #008CFF;
             /* padding-left:3.5vw; */
             z-index: 2;
        }
        .search{
            width:100vw;
            height:13vw;
            line-height: 13vw;
            background-color: #008CFF;
            /* 上下左右都居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .header span{
            padding-left: 3.5vw;
            font-size: 5vw;
            color:white;
            font-weight: bold;
        }
        .header i{
            font-size: 2.5vw;
            color:white;
        }
        .search .content{
            width:95vw;
            font-size: 4vw;
            font-family: "宋体";
            color:#ccc;
            background-color: #fff;
            height: 10vw;
            line-height: 10vw;
            margin:0 auto;
            text-align:center;
        }
        .footer{
            width:100vw;
            height: 13.3vw;
            border-top:1px solid #ccc;
            position: fixed;
            bottom: 0;
            right:0;
            z-index: 10;
        }
        .footer ul{
            height: 13.3vw;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
        }
        .footer ul li{
            display:flex;
            flex-direction: column; 
            align-items: center;
            font-weight: bold;
            color:#818181;
            font-size: 5vw;
        }
            
        .footer ul li:hover,.footer ul a:hover{
            color:#0097ff;
        }
        .footer ul a{
            color:#818181;
            font-size:2.5vw;
        }
    </style>

js

    <script type="text/javascript">
        window.onload=function(){
            document.onscroll=function(){
                //获取已经滚屏的高度
                var s1=document.documentElement.scrollTop;//html
                var s2=document.body.scrollTop;//body
                var scroll_height=s1==0?s2:s1;
                console.log(scroll_height);
                //如果这个高度超过了12vw
                var view=document.documentElement.clientWidth;
                var search=document.getElementById("search");
                if(scroll_height>=0.12*view){//header的高度
                    //把search变为固定定位
                    search.style.position="fixed";
                    search.style.left="0";
                    search.style.top="0";
                }else{//否则就正常定位static
                    search.style.position="static";
                }
            }
        }
    </script>