[HeadFirst-HTMLCSS入门][第十一章布局排版]
来源:互联网 发布:黄一琳网络直播的看法 编辑:程序博客网 时间:2024/05/23 18:55
- 流
- 浮动布局
- 冻结布局
- 凝胶布局
- 绝对布局
- 表格显示布局
- postion 绝对 静态 固定 相对
浮动元素
- 必须指明宽度
解决重合
中缝
- 设置外边距留中缝,好看一点
clear
标签
不准左右有浮动元素,如果有,直接下移
clear=right
标签放右边的缺点
不支持float的设备中,会先出现标签,而不是主内容
如果主内容放前面 使用left的话,标签又会扩展很难看
优点除了缩放会使得内容顺序有问题 就没其他问题了
流体与冻结设计
冻结:不随浏览器变化而变化,我看了百度等大网页,貌似都是这种设计
把所有div用一个div捆绑起来,并限制div的宽度。这样不随浏览器的变化而变化。
但是如果宽度设计太小,会使得右边有太多的空白,可以让左右外边距auto,稍微缓解
宽度或许可以获取到屏幕大小,这样似乎很不错。不过要用到js。
优点 再HTML之下 缺点 有留白
绝对定位
positon
必须制定左或右,上或下position=absolute;top:100px;right:200px;width:280px
元素
- static 默认
- absolute 绝对地,元素不会流入
- Fixed 固定 相对于浏览器窗口,而不是相对于页面
- Relative 正常流的偏移量
Zindex
优点 标签在内容之下 缺点:无法用clear了。
固定定位 Fixed
使用CSS创建表格
div #tableContainer{ display: table; //table属性告诉div要像表格一样拜访 border-spacing: 10px; //边框间距}div #tableRow{ display: table-row; //表格的第一行,也是唯一的一行}#main { display: table-cell; //第一行第一列,因为再html考前 background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; vertical-align: top; //相对于单元格上对齐}#sidebar { display: table-cell; background: #efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; vertical-align: top;}
0 0
- [HeadFirst-HTMLCSS入门][第十一章布局排版]
- [HeadFirst-HTMLCSS入门][第九章盒模式]
- [HeadFirst-HTMLCSS入门][第十章div,span]
- [HeadFirst-HTMLCSS学习笔记][第十三章表格]
- [HeadFirst-HTMLCSS学习笔记][第三章创建网页]
- [HeadFirst-HTMLCSS学习笔记][第六章严格的HTML]
- [HeadFirst-HTMLCSS学习笔记][第八章扩大你的词汇量]
- [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]
- [HeadFirst-HTMLCSS学习笔记][第十四章交互活动]
- 第十一章 表布局
- C#入门经典第十一章
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]
- Servlet&JSP 第十一章 JavaMail入门
- 第十一课 布局修改
- 排版/布局,好麻烦!
- Android布局排版
- org-reveal 排版布局
- css布局和排版
- [HeadFirst-HTMLCSS入门][第九章盒模式]
- 行列递增矩阵的查找(面试题)
- [HeadFirst-HTMLCSS入门][第十章div,span]
- 电脑优化及精品软件分享
- 数据结构 - ★知识点
- [HeadFirst-HTMLCSS入门][第十一章布局排版]
- ViewPager使用
- 进度条和调色板
- [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]
- HDU 1328 IBM Minus One
- 第五周Android实习笔记
- Eclipse工具栏创建新建类、接口等快捷方式
- 无法获得数据库'model'上的排他锁 解决方法
- 打印具有下面规律的图形