zoukankan      html  css  js  c++  java
  • html自己写响应式布局(说起来很高大上的样子,但是其实很简单)

    第一步,打开电脑中安装的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-900px)
    {
        #header,#footer
        {
            800px;
        }
        #main
        {
            800px;
            height:400px;
        }
        #main-left
        {
            200px;
            height:400px;
            border:solid 1px red;
            float:left;  /*以下均要设置左浮动,保证在同一行*/
        }
        #main-center
        {
            394px;
            height:400px;
            border:solid 1px red;
            float:left;
        }
        #main-right
        {
            200px;
            height:400px;
            border:solid 1px red;
            float:left;
        }
    }

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

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

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

    =。=

  • 相关阅读:
    Sum Root to Leaf Numbers
    Sum Root to Leaf Numbers
    Sort Colors
    Partition List
    Binary Tree Inorder Traversal
    Binary Tree Postorder Traversal
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Search a 2D Matrix
    leetcode221
  • 原文地址:https://www.cnblogs.com/LWWTT/p/11080509.html
Copyright © 2011-2022 走看看