HTML - 布局div
http://blog.csdn.net/pipisorry/article/details/78929615
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
Note: table标签是不建议作为布局工具使用的 - 表格不是布局工具。table布局参考[使用 <table> 元素的网页布局]。
div元素布局
div 元素是用于分组 HTML 元素的块级元素。具体关于div标签参考[HTML - 元素/标签详解 HTML区块<div>和<span>]
div默认就是垂直平铺（垂直排列）；水平的需要加style="float:left;"。其实其它元素，如img，也可以直接水平并排而不需要在外面加上div，只是img不会自动换行。
Note: 前一个div加上style="float:left;"就可以，最后一个不要添加，否则下一行的div就不会自动加上换行而是和上一行的水平并排了！
某小皮
div布局示例
示例1
下面的例子使用五个 div 元素来创建多列布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aaa(aaa.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © aaa.com</div>
</div>
</body>
</html>
示例2
<div>
<img style="float:left;" src="data:images/verticalbar.png">
<span style="float:left;font-family:arial;font-size:3;" οnmοuseοver="red(this)" οnmοuseοut="black(this)">联系我们</span>
<span style="float:left;color: #C0C0C0"><small> Contact Us</small></span>
<span><a style="float:right;color:#C0C0C0;" href="#">More>></a></span>
</div>
<br>
<div style="margin-top: 20px;">
<img style="float:left;" src="data:images/2.2.png" class="img-responsive">
<div style="float:left; margin-left: 20px; margin-top: 10px">
<img style="float:left;" src="data:images/phone.png" alt=" " class="img-responsive ">
<img style="margin-left: 50px;" src="data:images/qq.png " alt=" " class="img-responsive ">
<!-- class="img-responsive" add newline -->
<span style="font-size: small; ">全国服务热线：</span>
<br>
<span style="font-size: 3; font-weight: bold ">400-005-6621</span>
</div>
</div>
from: http://blog.csdn.net/pipisorry/article/details/78929615
ref:
HTML - 布局div相关推荐
- HTML经典布局------div使用(关于浮动)
HTML经典布局------div使用(关于浮动) <!DOCTYPE html> <html><head><title>div样式</title ...
- 靠左靠右实际布局DIV CSS实例模块
靠左靠右布局与只靠左布局DIV CSS实例模块 在实际css布局中常常会遇到,图标式超链接布局,以下为大家介绍一个使用float实现的图标布局. 采用css float布局效果截图 本模块使用floa ...
- 网页布局(div布局)
网上有太多介绍,个人觉得不错的有<Div+CSS布局大全>,有PDF版本,可下载离线观看,别人总结的一个文档,简洁易懂,学起来不费劲,花时间不多,快速阅读完,即可上手,呵呵. 这里就不介绍 ...
- div css 登录页面布局,DIV+CSS页面布局
页面布局设计 一.三行模式或三列模式 特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分 三列模式:将页面分成左.中.右三个部分 在CSS文件里: 1.三行模式代码 ...
- JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑 在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...
- 最窄770PX最宽1024PX经典布局[DIV+CSS]
最典型实用的上中下,并且中间分三列的布局,这个例子有2个特点: 1. 中间三列效果,可以任意实现单列背景色. 2. 整体最窄770px,最宽1024px,也就是说窗口小于770xp就出底部滚动条,如果 ...
- Iframe框架+table布局 +div布局实例
<tdcolspan="2"style="width: 80%"><iframesrc="http://www.baidu.com& ...
- html5 居中布局,div 布局水平居中篇
div 机关程度居中篇 有的阅读器默许下div 居中的,但有的阅读器div靠左的,如何让DIV 机关居中呢? 枢纽DIV居中CSS代码: margin:0 auto 记取不是margin:auto d ...
- HTML5布局—div布局和table布局
1.使用 <div> 元素的 HTML 布局 注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. 这个例子使用了四个 <div> 元素 ...
- html--div+css样式布局(div+span)
目录 简述 盒模型: 布局相关属性 简述 div是块级元素 (占用一整行) span是内联元素(占用内容的长度,也可以转换成块级元素) DIV和SPAN存在的意义就是为了应用css样式 <!DO ...
最新文章
- 学计算机一定要加班吗,老梁推荐：毕业后经常加班的几类专业，工作压力大，对能力要求很高...
- 实现一个简单的WebSocket聊天室
- python对字符串和集合的内存垃圾回收机制
- mysql导出bacpac_在 Azure 中备份应用
- C/C++ 不可不知道的编程技巧！第一部分
- 一场员工高管间的口水战，员工输了
- Profiles在Spring Boot中的使用--环境切换
- Zalo电脑版多开软件
- 怎样在LaTeX中方便输入带圆圈的数字
- 轻量级网络——ShuffleNetV2
- 中图杯获奖作品计算机组,中图杯大赛试卷
- 智能枕头里究竟藏有什么“智能”故事？
- 游戏化方式学习Git指令
- 神经网络论文研究-图像处理方向4-geoglenet
- adb wifi连接android设备
- GUI 界面的免费音乐下载 支持批量下载
- 量化的股票交易策略是什么意思？
- 虚拟机磁盘格式有哪些
- 使用nginx临时搭建rtmp服务器
- CSDN做的有关黑客的调查