第一步，打开电脑中安装的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. BZOJ_2683_简单题&&BZOJ_1176_[Balkan2007]Mokia_CDQ分治+树状数组

    BZOJ_2683_简单题&&BZOJ_1176_[Balkan2007]Mokia_CDQ分治+树状数组 Description 维护一个W*W的矩阵,初始值均为S.每次操作可以增加 ...

  2. Watir: 当出现错误提示AutoItX3.dll 没有注册的时候，该怎么处理？

    对于Ruby 1.8版本,以管理员身份运行命令行窗口,输入Regsvr32 AutoItX3.dll路径即可.对于1.9 版本,路径与1.8版本是不同的,我们可以进入Ruby安装目录下,搜索AutoI ...

  3. HTML <legend> 标签

    转自:https://www.w3cschool.cn/htmltags/tag-legend.html <!DOCTYPE HTML> <html> <body> ...

  4. Linear Regression_最小二乘(LMS)

    %% Machine Learining----Linear Regression close all clear %%data load Year = linspace(,,); Price = [ ...

  5. Ubuntu中字体的改变

    1.sudo dpkg-reconfigure console-setup 2.弹出 Configuring console-setup 界面,选择适当的编码格式,我们一般选择默认的UTF-8,选择O ...

  6. 图像分类与KNN

    1 图像分类问题 1.1 什么是图像分类 所谓图像分类问题,就是已有固定的分类标签集合,然后对于输入的图像,从分类标签集合中找出一个分类标签,最后把分类标签分配给该输入图像.虽然看起来挺简单的,但这可 ...

  7. 【WIP】iOS UIKit

    创建: 2018/04/10 更新: 2019/02/19 原来忘记分类,把此博文归入ios应用开发                            

  8. python __builtins__ str类 （65）

    65.'str', 字节转换成字符串.第一个传入参数是要转换的字节,第二个参数是按什么编码转换成字符串 class str(object) | str(object='') -> str | s ...

  9. 统计Apache或nginx日志里访问次数最多的前十个IP

    1.根据访问IP统计UV awk '{print $1}' access.log|sort | uniq -c |wc -l 2.统计访问URL统计PV awk '{print $7}' access ...

  10. hdu 2189 悼念512汶川大地震遇难同胞——来生一起走 基础母函数

    #include <iostream> #include <algorithm> #include <cstring> using namespace std; ] ...