第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个HTML文件，通过Tab快捷键迅速创建一个HTML模板，并命名标题。

第二步，在Body标签里添加三个主DIV标签，分别表示头部，内容和底部。然后，在内容DIV内又添加三个子DIV,分别表示左边，中间，右边。并且给出对应的ID名。对应的代码如下：
<body>
  <div id="header">头部</div>
  <div id="main">
     <div id="main-left">内容-左边</div>
     <div id="main-center">内容-中间</div>
     <div id="main-right">内容-右边</div>
  </div>
  <div id="footer">底部</div>
</body>

第三步， 接下来是实现响应式布局的关键CSS代码内容了，写CSS来实现响应式布局。 通过在head头部添加<style>标签，在里面写CSS代码（当然，也可以将CSS代码写在单独的.CSS文件中，然后引用）。首先设置全局样式，当屏幕宽度大于900px的时候，即大型电脑PC端，对应的头部，尾部，内容的CSS代码，对应的代码如下：

*

{

padding:0px;

margin:0px;

font-family:"微软雅黑";

}

#header

{

height:100px;

border:solid 1px red;

margin:0px auto;

}

#main

{

margin:10px auto;

height:400px;

}

#footer

{

margin:0px auto;

height:100px;

border:solid 1px red;

}

第四步，当屏幕最小宽度为900px时，相当于笔记本PC端，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：
@media screen and (min-width:900px)
{
    #header,#footer
    {
        width:800px;
    }
    #main
    {
        width:800px;
        height:400px;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;  /*以下均要设置左浮动，保证在同一行*/
    }
    #main-center
    {
        width:394px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
}

第五步，当屏幕宽度在600~900px时，相当于平板电脑大小的设备，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：
@media screen and (min-width:600px) and (max-width:900px)
{
    #header,#footer
    {
        width:600px;
    }
    #main
    {
        width:600px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left; /*以下均要设置左浮动，保证在同一行*/
    }
    #main-center
    {
        width:396px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        display:none; /*隐藏内容右边*/
    }
}

第六步， 写当屏幕宽度在小于等于600px时，即在移动端（手机端），其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：
@media screen and (max-width:600px)
{
    #header,#footer
    {
        width:300px;
    }
    #main
    {
        width:300px;
        height:400px;
    }
    #main-left
    {
        display:none; /*隐藏内容左边*/
    }
    #main-center
    {
        width:300px;
        height:400px;
        border:solid 1px red;
    }
    #main-right
    {
        display:none;  /*隐藏内容右边*/
    }
}

最后说一下，其实也就相当于判断语句，判断屏幕宽度根据屏幕的宽度来设置相应的宽度，这里设置宽度个人写完后觉得用百分比来设置其实还要简单点，看情况吧。

=。=

html自己写响应式布局（说起来很高大上的样子，但是其实很简单）的更多相关文章

  1. 利用media query写响应式布局

    最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...

  2. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  3. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  4. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  5. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. 响应式布局（Responsive layout，RL）的简单Demo

          ★背景:       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决 ...

  7. SharePoint 2013 的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  8. Bootstrap页面布局5 - 响应式布局(格式)

    旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在&l ...

  9. css3media响应式布局

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...

随机推荐

  1. sscanf在字符串中的一些使用

    弟弟的作业 你的弟弟刚做完了"100以内数的加减法"这部分的作业,请你帮他检查一下.每道题目(包括弟弟的答案)的格式为a+b=c或者a-b=c,其中a和b是作业中给出的,均为不超过 ...

  2. 【CQOI2009】中位数图

    [题目链接] 点击打开链接 [算法] 将小于m的数看作-1,大于m的看作1 然后求前缀和,如果区间[l,r]的中位数是m,显然有 : sum(r) - sum(l-1) = 0 因此,只需m的位置之前 ...

  3. 使用Pycharm官方统计代码行插件统计代码总行数

    最近有需求,需要统计项目代码的总行数,首先想到了使用Pycharm官方的统计行数插件,发现效果还不错. 官方代码统计插件指导:https://plugins.jetbrains.com/plugin/ ...

  4. bzoj 1657 Mooo 奶牛的歌声 —— 单调栈

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1657 单调栈水题. 代码如下: #include<iostream> #incl ...

  5. View Programming Guide for iOS ---- iOS 视图编程指南(二)---View and Window Architecture

    View and Window Architecture 视图和窗口架构 Views and windows present your application’s user interface and ...

  6. Ubuntu安装eclipse以及创建快捷方式

    1. 安装jdk,我用的1.8,很简单这里不详细说了: 2.下载eclipse的安装包, https://www.eclipse.org/downloads/download.php?file=/te ...

  7. 任务22：课程介绍 & 任务23：Http请求的处理过程

    任务23:Http请求的处理过程 http的处理过程 用户输入一个地址

  8. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时26&&27

    课时26 图像分割与注意力模型(上) 语义分割:我们有输入图像和固定的几个图像分类,任务是我们想要输入一个图像,然后我们要标记每个像素所属的标签为固定数据类中的一个 使用卷积神经,网络为每个小区块进行 ...

  9. E20180403-hm

    accompany vt. 陪伴,陪同; 附加,补充; 与…共存; 为…伴奏 synchronous adj. 同时存在[发生]的,同步的 asynchronous adj. 异步的; particu ...

  10. Cg（C for Graphic）语言关键字（转）

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 第三章从 GPU 运行原理和数据流程的角 ...