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 ...
随机推荐
- kubeadm安装部署kubernetes 1.11.3(单主节点)
由于此处docker代理无法使用,因此,请各位设置有效代理进行部署,勿使用文档中的docker代理.整体部署步骤不用改动.谢谢各位支持. 1.部署背景 操作系统版本:CentOS Linux rele ...
- pgm7
和 Koller 的 video 最大的不同莫过于书上讲 LBP 的角度不是 procedural 的,而是原理性的.我们先看个 procedural 的,在一般的 cluster graph 上的 ...
- Good Bye 2018 没打记
场外选手赛时只口胡出了CD感觉非常惨.只看了E并且还没看到题面里的wiki我能咋办 C:f只与gcd(n,k)有关. D:考虑每种起始位置,对于跨越的两个排列,只有前一个排列的后缀单减时不产生贡献.答 ...
- BZOJ2547 CTSC2002玩具兵（最短路径+二分答案+最大流）
先不考虑只有一个显得有些特殊的天兵. 可以发现超能力的作用实质上是使兵更换职业.每一个兵到达某个位置最少需要更换职业的次数是彼此独立的,因为如果需要某两人互换职业可以使他们各自以当前职业到达需要到的地 ...
- 新版POI如何获取日期类型的cell的值
使用POI读取Excel值的同学,一定为日期类型抓狂过! POI对单元格日期处理很弱,没有针对的类型,日期类型取出来的也是一个double值,所以同样作为数值类型.即使使用cell.setCellTy ...
- 【刷题】BZOJ 3512 DZY Loves Math IV
Description 给定n,m,求 模10^9+7的值. Input 仅一行,两个整数n,m. Output 仅一行答案. Sample Input 100000 1000000000 Sampl ...
- 【题解】 bzoj1088: [SCOI2005]扫雷Mine （神奇的做法）
bzoj1088,懒得复制,戳我戳我 Solution: 其实这个有个结论,答案只会有\(0\),\(1\),\(2\)三种(我真的是个弱鸡,这个都想不到) 然后我们假设第一个就可以推出所有的状态(显 ...
- （转）每天一个linux命令（9）：touch 命令
linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. 1 基本使用 1．命令格式: touch [选项]... 文件... 2．命令参数 ...
- SSM搭建Spring单元测试环境
原文链接:https://jingyan.baidu.com/article/93f9803f5a97a4e0e46f55c8.html SSM搭建Spring单元测试环境
- web开发中的跨域整理
1.springboot通过CROS实现跨域: https://www.cnblogs.com/520playboy/p/7306008.html springboot下各种跨域方式: http:// ...