zoukankan      html  css  js  c++  java
  • 8.9前端之响应设计模式

    8.9前端之响应设计模式

    什么是响应设计模式(Responsive Web Design)

    • 响应式 web 设计会让您的网页在所有设备上看起来都不错

    • 响应式 web 设计仅使用 HTML 和 CSS

    • 响应式 web 设计并不是程序或 JavaScript

    概括:

    使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容,以使其在任何屏幕上看起来都很好,则称为响应式 Web 设计

    • RWD 能够以可变尺寸传递网页

    • RWD 对于平板和移动设备是必需的


    自己创建的实例

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <style>
    .city{
    float: left;
    margin: 5px;
    padding: 15px;
    300px;
    height: 300px;
    border: 1px solid black;
    border: 0;
    }
    .bcity{
    float: left;
    margin: 5px;
    padding: 15px;
    300px;
    height: 300px;
    border: 1px solid black;
    border: 1;
    }
    </style>
    <title>ResponsiveDesignPracticeHtml</title>
    </head>
    <body>
    <h1>This is a PracticeDemo</h1>
    <h2>Resize this Response Page!</h2>
    <br />

    <div class="city">
    <h2>ShenZhen</h2>
    <p contenteditable="false">ShenZhen is a city and it is very prosperous</p>
    <p contenteditable="false">It is It is the most populous city in China</p>
    </div>

    <div class="bcity">
    <h2>LiuZhou</h2>
    <p contenteditable="false">LiuZhou is a city in GuangXi province</p>
    <p contenteditable="false">It is the second city in GuangXi province</p>
    </div>

    <div class="bcity">
    <h2>NanNing</h2>
    <p contenteditable="false">NanNing is a provincial capital of GuangXi province</p>
    </div>
    </body>
    </html>

    使用Bootstrap

    • 这是一个Css框架

    • 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

    • 帮助开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <title></title>
    </head>
    <body>
    <div class="container">
    <div class="jumbotron">
    <h1>This is a Demo</h1>
    <p contenteditable="false">It is a responsive page!</p>
    </div>
    </div>

    <div class="container">
    <div class="row">
    <div class="col-md-4">
    <h2>ShenZhen</h2>
    <p contenteditable="false">ShenZhen is a city and it is very prosperous</p>
    <p contenteditable="false">It is It is the most populous city in China</p>
    </div>
    <div class="col-md-4">
    <h2>LiuZhou</h2>Content
    <p contenteditable="false">LiuZhou is a city in GuangXi province</p>
    请输入内容:<p contenteditable="true">
    Content
    </p>
    </div>
    <div class="col-md-4">
    <h2>NanNing</h2>
    <p contenteditable="false">NanNing is a provincial capital of GuangXi province</p>
    </div>
    </div>
    </div>
    </body>
    </html>

     

    It's a lonely road!!!
  • 相关阅读:
    haproxy教程
    haproxy和keepalived的理解(转载)
    redis集群搭建_超详细
    磁盘IO过高时的参考
    tomcat优化
    MYSQL数据库的主从复制
    k8s学习笔记-etcd介绍和集群搭建
    python排序算法二---冒泡排序
    Python排序算法一—快速排序
    python:如何判断字典a在字典b
  • 原文地址:https://www.cnblogs.com/JunkingBoy/p/15129860.html
Copyright © 2011-2022 走看看