27
2017
09

web-前端开发之栅格系统的简单应用

这个是用一个例子来描述了栅格系统的简单应用,因为山歌系统站位为12,所以我们可以利用这个区制作一些简单方便的表格
这是简单的栅格系统的应用

//其中下方的图片排列使用了栅格系统的模板
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery.min.js" ></script>

    <style> /*顶部图片信息*/ .myTop{ position: absolute; top: 0; width: 100%; height: 40%; overflow: hidden; } .myTop-img img{ width: 100%; } .myTop-img-back{ position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, #0055B2 , #ffffff); opacity: 0.8; } .myTop-font{ position: absolute; bottom: 0; height: 50%; width: 100%; color: #FFFFFF; z-index: 1000; font-family: "微软雅黑"; font-size: 18px; text-indent: 20px; } .liu{ font-size: 30px; } /*底部导航*/ .myFoot{ border-top: 1px solid #E0E0E0; position: fixed; bottom: 0; width: 100%; height: 50px; background-color: #ffffff; } /*内容部分*/ .myCont{ margin-top: 72%; margin-bottom: 13%; } .gxp img{ width: 40px; border-radius: 50%; border: 2px solid #FFFFFF; margin: auto 5px; } .row img{ margin: 5px auto; } .myFoot a{ color: #7F7F7F; text-align: center; line-height: 50px; } </style>

    <script type="text/javascript"> $(document).ready(function(){ $(".myFoot a").click(function(){ //改变当前被点击的元素样式 $(this).css({ "color":"#0062FA" }); //还原同胞元素 $(this).siblings().css({ "color":"#7F7F7F" }); }); }); </script>
</head>
<body>

    <!--顶部图片信息-->
    <div class="myTop">

        <div class="myTop-font">

            <p class="liu">刘德华</p>
            <p style="float: left;" >Andy Lau </p>
            <p style="float: right;margin-right: 20px;">
                <i class="fa fa-map-marker"></i>&nbsp;&nbsp;中国&nbsp;·&nbsp;香港
            </p>

            <hr style="clear: both;width: 95%;margin:60px auto 20px;" />


            <p style="float: left;">关系谱</p>
            <div class="gxp" style="float: right;margin-right: 20px;">
                <img src="img/a1.jpg" />
                <img src="img/a2.jpg" />
                <img src="img/a3.jpg" />
                <img src="img/a4.jpg" />
                <i class="fa fa-chevron-right"></i>
            </div>
        </div>

        <!--蒙版-->
        <div class="myTop-img-back"></div>

        <!--背景图片-->
        <div class="myTop-img">
            <img src="img/timg.jpg"/>
        </div>

    </div>

    <!--内容部分-->
    <div class="myCont container">


        <p style="font-size: 20px;font-family: '微软雅黑';text-align: center;">作品展示</p>

        <div class="row">
            <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
            <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
            <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
            <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
            <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
            <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
            <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />

        </div>

    </div>


    <!--底部导航-->
    <div class="myFoot container-fluid">

        <div class="row">
            <a class="col-xs-4" href="javascript:;">
                <i class="fa fa-book"></i>
                最新作品
            </a>
            <a class="col-xs-4" href="javascript:;">
                <i class="fa fa-book"></i>
                绯闻八卦
            </a>
            <a class="col-xs-4" href="javascript:;">
                <i class="fa fa-book"></i>
                关系谱
            </a>
        </div>


    </div>

</body>
</html>
上一篇:策略模式 下一篇:如何给屏幕添加pop全屏手势