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!!!
  • 相关阅读:
    Vi/Vim查找替换使用方法【转】
    ios开发--NSDate与NSDateFormatter的相关用法【转】
    IOS开发基础之—MD5加密算法【转】
    struts2多图片上传实例【转】
    IOS开发之----常用的基本GDB命令【转】
    WWDC笔记:2011 Session 125 UITableView Changes, Tips and Tricks
    Xcode8 NSLog打印json不完整的解决方案
    Swift 3.1 的一些新特性
    iOS中书写代码规范35条小建议
    女程序员做了个梦,众网友的神回复
  • 原文地址:https://www.cnblogs.com/JunkingBoy/p/15129860.html
Copyright © 2011-2022 走看看