zoukankan      html  css  js  c++  java
  • bootstrap实现pc屏幕五等分

     

     

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>屏幕五等分</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
    @media (min- 1200px) {
    .col-zdlg-2-5{
    float: left;
    20%;

    }
    }
    h2{
    font-family: "Microsoft Yahei";
    font-weight: 500;
    line-height: 1.1;
    color:#000;
    }

    .col-red-border{
    border:1px solid red;
    }
    </style> 
    </head>
    <body>
    <div class="container-fluid">
    <div class="rows">
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    Spring.NET学习笔记
    开源项目地址
    委托的实现匿名函数和朗姆达表达式
    c#事件与委托
    c# 时间戳转换
    List 排序
    DDD的好文章
    【转】理解JMeter聚合报告(Aggregate Report)
    【转】JMeter 通过 JDBC 访问 Oracle 和 MySQL
    【转】使用JMeter测试你的EJB
  • 原文地址:https://www.cnblogs.com/lsongyang/p/7570183.html
Copyright © 2011-2022 走看看