1.DIV+CSS布局

（1）按照由上到下，由里到外的方式

（2）样式由CSS去改变

代码：

    <style type="text/css">

        * {

            margin:0px;/*去除页面的边距*/

            padding:0px;

        }

        body {

            width:100%;

            height:100%;

        }

        #one {

            position:relative;

            background-color:black;

            width:100%;

            height:600px;/*必须设置宽高，不然div不显示。*/

        }

        #top {

            position:relative;

            background-color:red;

            width:80%;

            height:80px;

        }

        #main1 {

            background-color:purple;

            position:relative;

            margin-left:10%;/*距离左边多远*/

            top:20%;/*距离顶端多远*/

            width:500px;

            height:100px;

            float:left;

        }

        #main2 {

            background-color:blue;

            position:relative;

            margin-left:10%;/*距离左边多远*/

            top:20%;/*距离顶端多远*/

            width:500px;

            height:100px;

            float:left;

        }

        #bottom {

            background-color:aqua;

            position:relative;

            margin-left:30%;/*距离左边多远*/

            top:50%;/*距离顶端多远*/

            width:800px;

            height:100px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div id="one"><%--里--%>

        <%--三个并列在外层--%>

        <div id="top">

        </div>

        <div id="main1">

        </div>

        <div id="main2">

        </div>

        <div id="bottom">

        </div>

    </form>

页面形式：

HTML布局思路的更多相关文章

  1. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  2. 主导SEO成败的关键是细节的布局，细数SEO三大布局思路

    有的人认为SEO操作就类似车间工作,有一个完整的流程,整套流程下来网站就会有一个好的排名.这样是不对的,优化的着重点是要有一个好的思维,技巧和策略,把这些着重点相结合的运用到SEO优化中,很大的机率会 ...

  3. UICollectionLayout布局 —— UIKit之学习UICollectionView记录二《流水布局》

    重点知识 一. 加载collectionView注意事项 1.创建collectionView,有两种方式 :一种是xib和一种是纯代码:设置代理和数据源,注册cell,配置流水布局的属性,如上.下. ...

  4. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  5. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  6. JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  7. HTML布局篇之双飞翼（圣杯）布局

    最近在写页面的时候,总是为布局头疼,倒不是不能布出来,就是感觉不系统,没有成一个体系的感觉.所以决定自己写博文,梳理一下思路. 常用的布局方式大致可以分为三种: 浮动布局 Float 负边距(双飞翼) ...

  8. html css布局

    这几天有点急于求成了,原来每一门技术都像大海,只有深入其中才发现它比看到的更要深广的多. 虽然忙里偷闲的看了HTML5,NODE.JS,JAVASCRIPT核心等许多东西,但是真正掌握的不足十分之一, ...

  9. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

随机推荐

  1. ANSI C 常见宏的使用

    1. __VA_ARGS__: ...  表示可变参数列表,__VA_ARGS__在预处理中会被可变参数列表替代 2. __FILE__:正在编译文件的文件路径 3. __LINE__:正在编译文件的 ...

  2. P2622 关灯问题II

    题目描述 现有n盏灯,以及m个按钮.每个按钮可以同时控制这n盏灯——按下了第i个按钮,对于所有的灯都有一个效果.按下i按钮对于第j盏灯,是下面3中效果之一:如果a[i][j]为1,那么当这盏灯开了的时 ...

  3. POJ 2516 Minimum Cost （网络流，最小费用流）

    POJ 2516 Minimum Cost (网络流,最小费用流) Description Dearboy, a goods victualer, now comes to a big problem ...

  4. isspace 对含有中文 的字符串进行检查的时候表现不正常！？

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...

  5. VMware Workstation 12序列号：

    VMware Workstation 12序列号: 5A02H-AU243-TZJ49-GTC7K-3C61N

  6. json字符串转java对象

    今天遇到一个问题,前端ajax获取到一个javaBean对象,好多方法发ajax请求需要把这个对象再传到后端,后端再根据这个对象进行操作(之前计划传递id,但发现传递id的话,后端多个方法都需要根据i ...

  7. Linux问题集锦

    一些会遇到的问题,我会不断更新问题集锦~  1.vi / vim保存文件时遇到的问题:E212: Can't open file for writing 在vi / vim下输入w或wq!保存编辑的文 ...

  8. bzoj千题计划178：bzoj2425: [HAOI2010]计数

    http://www.lydsy.com/JudgeOnline/problem.php?id=2425 题意转化: 给定一个集合S,求S的全排列<给定排列 的排列个数 从最高位开始逐位枚举确定 ...

  9. html5 canvas贝塞尔曲线篇(上)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. the error about “no such file or directory”

    CHENYILONG Blog the error about "no such file or directory" when you get the question like ...