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>

  • 相关阅读:
    JavaScript跨域总结与解决办法
    css IFC 与 BFC分析
    JavaScript Note
    Knowledge Architecture
    BSP
    Olympiad
    Software Engineering
    Assembly Language
    Algorithm
    Data Structure
  • 原文地址:https://www.cnblogs.com/lsongyang/p/7570183.html
Copyright © 2011-2022 走看看