HTML布局思路
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布局思路的更多相关文章
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- 主导SEO成败的关键是细节的布局，细数SEO三大布局思路
有的人认为SEO操作就类似车间工作,有一个完整的流程,整套流程下来网站就会有一个好的排名.这样是不对的,优化的着重点是要有一个好的思维,技巧和策略,把这些着重点相结合的运用到SEO优化中,很大的机率会 ...
- UICollectionLayout布局 —— UIKit之学习UICollectionView记录二《流水布局》
重点知识 一. 加载collectionView注意事项 1.创建collectionView,有两种方式 :一种是xib和一种是纯代码:设置代理和数据源,注册cell,配置流水布局的属性,如上.下. ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- HTML布局篇之双飞翼（圣杯）布局
最近在写页面的时候,总是为布局头疼,倒不是不能布出来,就是感觉不系统,没有成一个体系的感觉.所以决定自己写博文,梳理一下思路. 常用的布局方式大致可以分为三种: 浮动布局 Float 负边距(双飞翼) ...
- html css布局
这几天有点急于求成了,原来每一门技术都像大海,只有深入其中才发现它比看到的更要深广的多. 虽然忙里偷闲的看了HTML5,NODE.JS,JAVASCRIPT核心等许多东西,但是真正掌握的不足十分之一, ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
随机推荐
- Java之List使用场景
1.List使用场景 特点: ①在 List集合中允许出现 重复元素 <通过元素的equals方法,来比较是否为重复的元素.> ②所有元素是以一种 线性方式进行存储 ③List集合还有一个 ...
- 题解 P1030 【求先序排列】
题解 P1030 [求先序排列] 旧题新解~ 今天做这个题,发现还是没有AC,于是滚回来用了一大堆数据结构A了这个题目,好像复杂度还挺高...... #include <iostream> ...
- 关于链表的总结（C++循环实现）
0.目录 1.链表的基本操作 1.1 结点定义 1.2 创建链表 1.3 销毁链表 1.4 打印链表 1.5 获取链表长度 2.结点的基本操作 2.1 删除结点 2.2 查找结点 3.面试题 3.1 ...
- 51Nod 1287 加农炮 （线段树）
1287 加农炮 题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 一个长度为M的正整数数组A,表示从左向右的地形高度 ...
- MT【90】图论基础知识及相关例题
此讲适合参加全国联赛二试的同学 介绍图论和我们学习的一般的知识点比如函数一样,首先要介绍一些定义,只是图论里的定义相对较多,这里给出部分在竞赛中常用到的: 就像学函数的时候,学了定义和相关概念后我们要 ...
- PostgreSQL（一）教程 -----SQL语言
一.概念 PostgreSQL是一种关系型数据库管理系统 (RDBMS).这意味着它是一种用于管理存储在关系中的数据的系统.关系实际上是表的数学术语. 今天,把数据存储在表里的概念已经快成了固有的常识 ...
- POJ 2387 Til the Cows Come Home （图论，最短路径）
POJ 2387 Til the Cows Come Home (图论,最短路径) Description Bessie is out in the field and wants to get ba ...
- Linux上软件安装
手动安装 以安装SublimeText3为例: 首先下载安装包 [keysystem@localhost ~]$ wget https://download.sublimetext.com/subli ...
- zabbix监控的基础概念、工作原理及架构（一）
zabbix监控的基础概念.工作原理及架构 转载于网络 一.什么是zabbix及优缺点 Zabbix能监视各种网络参数,保证服务器系统的安全运营,并提供灵活的通知机制以让系统管理员快速定位/解决存在的 ...
- service注入到action中
service注入到action中 之前本人每次要获得service都是在action自己通过WebApplicationContext的getBean获得的,一直在spring中只配置到了servi ...