将PC端固定布局页面改成移动端流体布局代码,Css代码库,德仔网

代码语言
代码分类
【Css】将PC端固定布局页面改成移动端流体布局
作者:coder / 发布于2017/4/14/ 1082
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>个人页面导航 移动端</title>
    <style>
        html{
            font-size:625%;
        }

        body,h1,h2,h3,ul,ol,p,figure {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
            font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft YaHei UI","Microsoft YaHei",SimHei,"宋体",SimSun,Sans-Serif;
            font-size: 0.16rem;
        }
        ul,ol {
            list-style: outside none none;
        }
        a {
            text-decoration: none;
            color: black;
        }
        img{
            display: block;
            max-width: 100%;
        }

        div,figure{
            box-sizing: border-box;
        }

        .none {
            display: none;
        }

        .clearfix:after{
            content: ".";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }

        #header {
            top:0;
            z-index: 9999;
            position: fixed;
            width: 100%;
            height: 0.45rem;
            background-color: #333;
            font-size: 0.16rem;
        }

        #header .link {
            height: 0.45rem;
            line-height: 0.45rem;
            color: #eee;
        }
        #header .link li {
            width: 33.3%;
            text-align: center;
            float: left;
        }
        #header .link a {
            color: #eee;
            display: block;
        }
        #header .link a:hover,
        #header .active a {
            background-color: #000;
        }

        #adver {
            max-width: 6.4rem;
            margin: 0 auto;
            padding: 0.45rem 0 0 0;
        }

        #search{
            max-width: 6.4rem;
            height: 0.33rem;
            margin: 0 auto;
            background-color: #ddd;
            padding: 0.03rem 0 0 0;
            position: relative;
        }

        #search .search{
            width: 95%;
            height: 0.27rem;
            border-radius:0.04rem;
            border: none;
            outline:none;
            background-color: #fff;
            display: block;
            margin: 0 auto;
            font-size: 0.14rem;
            padding: 0 0.05rem;
        }

        #search .button{
            display: block;
            outline: none;
            position: absolute;
            top: 0.03rem;
            right: 1%;
            cursor: pointer;
            width: 0.5rem;
            height: 0.27rem;
            color:#666;
            border: none;
            border-top-right-radius: 0.04rem;
            border-bottom-right-radius: 0.04rem;
            background-color: #eee;
            font-size: 0.14rem;
        }

        #menu{
            max-width: 6.4rem;
            margin: 0.1rem auto 0 auto;
        }

        #menu  a:hover{
            color: green;
        }

        #menu h2{
            text-align: center;
            color: #666;
            font-size: 0.26rem;
        }

        #menu h3{
            text-align: center;
            color: #666;
            font-weight: normal;
            font-size: 0.16rem;
            margin: 0.05rem 0 0.1rem 0;
        }

        #menu figure{
            width: 50%;
            float: left;
            background-color: #eee;
            font-size: 0.16rem;
            padding: 0 0 0.05rem 0;
            position: relative;
            margin: 0.001rem auto;
        }

        #menu figure img{
            padding: 0.02rem;
            vertical-align: middle;
            border-radius: 0.04rem;
        }

        #menu figcaption{
            color: #666;
            font-size: 0.16rem;
            padding: 0.02rem 0.05rem;
        }

        #menu h4{
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
            text-align: center;
        }

        #menu .score{
            color: #f60;
            font-size: 0.3rem;
            letter-spacing: 0.01rem;
            text-align: center;
            display: block;
        }


        #menu .type{ // 标签
            width: 0.9rem;
            height: 0.25rem;
            line-height: 0.25rem;
            font-size: 0.14rem;
            text-align: center;
            color: #fff;
            background-color:#333;
            position: absolute;
            top:0.04rem;
            left: 0.04rem;
        }

        /*不同大小媒体查询，大于480px小于640px*/
        @media (min-width: 480px) and (max-width: 640px){
            #menu h2{
                font-size: 0.26rem;
            }

            #menu h3, #menu h4,#footer,#menu figure,#menu .score{
                font-size: 0.16rem;
            }
        }

        /*不同大小媒体查询，小于480px*/
        @media (max-width: 480px){
            #menu h2 {
                font-size: 0.20rem;
            }
            #menu h3,#menu h4,#footer,#menu figure,#menu .score{
                font-size: 0.14rem;
            }
            #footer{
                font-size: 0.12rem;
            }
        }


        #footer {
            max-width: 6.4rem;
            background-color: #222;
            color: #777;
            margin: 0 auto;
            text-align: center;
            padding: 0.1rem 0;
        }

        #footer .top {
            padding: 0 0 0.05rem 0;
        }

    </style>
</head>

<body>

<header id="header">
        <nav class="link">
            <h2 class="none">导航</h2>
            <ul>
        <li><a href="tencent://message/?uin=">启动QQ</a></li>
        <li><a href="https://wx.qq.com/" target="_blank">打开微信</a></li>
        <li><a href="http://weibo.com/" target="_blank">新浪微博</a></li>
            </ul>
        </nav>
</header>
<div id="adver">
    <img src="img/海岛.jpg" alt="">
</div>
<div id="search">
    <form onsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
        <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w">
        <a href="https://www.baidu.com/" target="_blank"></a>

        <input type="text"  onfocus="checkHttps" placeholder="输入搜索相关内容" class="search" name="word"  size="30">

        <button type="submit" value="搜索" class="button">搜索</button>
    </form>
    <script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
    <script>
        function checkHttps () {
            BaiduHttps.useHttps();
        }
        function baiduWithHttps (formname) {
            var data = BaiduHttps.useHttps();
            if (data.s === 0) {
                return true;
            }
            else {
                formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
                return true;
            }
        }
    </script>
</div>

<div id="menu">
    <hgroup>
        <h2>常用板块</h2>
        <h3>资讯，娱乐，购物等</h3>
    </hgroup>
    <div class="container">
    <figure>
        <a href="http://www.qq.com/" target="_blank">
        <img src="img/腾讯.jpg" alt="">
        <h4>中国浏览量最大的中文门户网站</h4>
        <figcaption>
            <span class="score">腾讯网</span>
        </figcaption></a>
        <div class="type">腾讯</div>
    </figure>
    <figure>
        <a href="http://www.sina.com.cn/" target="_blank">
        <img src="img/sina.jpg" alt="">
        <h4>为全球用户24小时提供全面及时的中文资讯</h4>
        <figcaption>
            <span class="score">新浪网</span>
        </figcaption></a>
        <div class="type">新浪</div>
    </figure>
    <figure>
        <a href="http://www.163.com/" target="_blank">
        <img src="img/网易.jpg" alt="">
        <h4>最有态度的网站</h4>
        <figcaption>
            <span class="score">网易</span>
        </figcaption></a>
        <div class="type">网易</div>
    </figure>
    <figure>
        <a href="http://www.huxiu.com/" target="_blank">
        <img src="img/虎嗅.png" alt="">
        <h4>带给你最新的资讯</h4>
        <figcaption>
            <span class="score">虎嗅</span>
        </figcaption></a>
        <div class="type">虎嗅</div>
    </figure>
    <figure>
        <a href="https://www.zhihu.com/" target="_blank">
        <img src="img/知乎.png" alt="">
        <h4>知无不言</h4>
        <figcaption>
            <span class="score">知乎</span>
        </figcaption></a>
        <div class="type">知乎</div>
    </figure>
    <figure>
        <a href="http://36kr.com/" target="_blank">
        <img src="img/36kr.jpg" alt="">
        <h4>为创业者提供最好的产品和服务</h4>
        <figcaption>
            <span class="score">36氪</span>
        </figcaption></a>
        <div class="type">36kr</div>
    </figure>
    <figure>
        <a href="http://www.woshipm.com/" target="_blank">
        <img src="img/人人都是产品经理.jpg" alt="">
        <h4>产品经理、产品爱好者学习交流平台</h4>
        <figcaption>
            <span class="score">人人都是产品经理</span>
        </figcaption></a>
        <div class="type">人人都是产品经理</div>
    </figure>
    <figure>
        <a href="http://www.iqiyi.com/" target="_blank">
        <img src="img/爱奇艺.jpg" alt="">
        <h4>中国领先的视频门户</h4>
        <figcaption>
            <span class="score">爱奇艺</span>
        </figcaption></a>
        <div class="type">爱奇艺</div>
    </figure>
    <figure>
        <a href="http://www.youku.com/" target="_blank">
        <img src="img/youku.png" alt="">
        <h4>中国领先的视频网站</h4>
        <figcaption>
            <span class="score">优酷</span>
        </figcaption></a>
        <div class="type">优酷</div>
    </figure>
    <figure>
        <a href="https://www.douban.com/" target="_blank">
        <img src="img/豆瓣.png" alt="">
        <h4>提供图书、电影、音乐唱片的推荐</h4>
        <figcaption>
            <span class="score">豆瓣</span>
        </figcaption></a>
        <div class="type">豆瓣</div>
    </figure>
    <figure>
        <a href="http://bbs.hupu.com/" target="_blank">
        <img src="img/hupu.png" alt="">
        <h4>最专业的篮球网站</h4>
        <figcaption>
            <span class="score">虎扑</span>
        </figcaption></a>
        <div class="type">虎扑</div>
    </figure>
    <figure>
        <a href="http://www.jianshu.com/" target="_blank">
        <img src="img/简书.png" alt="">
        <h4>最简洁的博客</h4>
        <figcaption>
            <span class="score">简书</span>
        </figcaption></a>
        <div class="type">简书</div>
    </figure>
    <figure>
        <a href="https://www.taobao.com/" target="_blank">
            <img src="img/淘宝.jpg" alt="">
            <h4>只有想不到，没有买不到</h4>
            <figcaption>
                <span class="score">淘宝</span>
            </figcaption></a>
            <div class="type">淘宝</div>
    </figure>
    <figure>
        <a href="http://www.qunar.com/" target="_blank">
            <img src="img/去哪儿.png" alt="">
            <h4>特价机票,超值酒店,省心省钱,聪明你的旅行!</h4>
            <figcaption>
                <span class="score">去哪儿</span>
            </figcaption></a>
            <div class="type">去哪儿</div>
    </figure>
</div>
    </div>
<div class="clearfix"></div>
<footer id="footer">
    <div class="top">
        客户端 | 触屏版 | 电脑版
    </div>
    <div class="bottom">Copyright ? 于山阿金| 虎扑JR| 翻唱哥</div>
</footer>
</body>
</html>
试试其它关键字
同语言下
可能有用的
coder贡献的其它代码(20)