【CSS】Intermediate8:Page Layout
1.Layout with CSS is easy. You just take a chunk of your page and shove it wherever you choose
2.position property
3.static value
renders a box in the normal order of things
4.relative
much like static but the box can be offset from its original position
top/right/bottom/left properties
5.absolute
pulls a box out of normal flow of HTML & delivers it to a world all of its own
t/r/b/l
6.fixed
like absolute but reference to the browser window as opposed to the web page
Fixed boxes should stay exactly where they are on the screen even when the page is scrolled
How stupidly easy!
7.float
Shift the box to the right or left of a line,with surrounding content flowing around it
l/r value
8.clear
do not want the next box to wrap around the floating objects
l/r/both value
Footer!Hoorah!
【CSS】Intermediate8:Page Layout的更多相关文章
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- 【BZOJ1731】[Usaco2005 dec]Layout 排队布局 差分约束
[BZOJ1731][Usaco2005 dec]Layout 排队布局 Description Like everyone else, cows like to stand close to the ...
- 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏
在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...
- 【css】用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- 【CSS】css动画及过渡和变换属性
1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...
- 【CSS】元素样式
1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个C ...
- 【CSS】iconfont的使用
说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有 ...
- 【CSS】318- CSS实现宽高等比自适应容器
点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...
随机推荐
- 读书计划——javascript dom 编程艺术(一)
用脑图把基础体系再捋清楚一边.
- PHP引用传值规范问题
在我上一篇: shopnc 商城源码阅读笔记--开篇概述 中,遇到了一个PHP引用传值导致的错误,情况大致如下: 在我查阅PHP官方文档 的中文版的时候 http://php.net/ma ...
- PHP初学留神(二)
1.===比较运算符 记得上上篇中说过===与==的问题.当时说,===还要类型相同.但到底是怎样呢?因为我们知道比较运算符是可以把两个值类型转换的.举个栗子,如果一个数字和字符串比较,则字符串会转化 ...
- 百度地图API应用实践(一) —— 栅格图(草稿)
概述 运用百度地图JS API,实现了在百度地图上绘制栅格并按统计值渲染栅格颜色.实现的过程是不断补习的过程,其中用到一些技术,是个人首次尝试.包括:(1)简单的jQuery语法,并实现Ajax:(2 ...
- Chrome 浏览器各版本下载大全
随着最近64位版本的 Chrome 浏览器正式版的推出,Chrome 浏览器再次受到广大浏览迷的重点关注,今天我们就整理一下各版本的 Chrome 浏览器 32位及64位的下载地址,方便各位浏览迷选择 ...
- VC++2010添加菜单
1 资源视图下面右键添加资源 选择menu 2 创建你想要的menu 3 找到CDialog::OnInitDialog();在后面添加代码. CMenu menu; menu.LoadMenu ...
- RedHat和CentOS使用本地yum源配置
2013-04-01 11:38:30 标签:本地yum源 版权声明:原创作品,谢绝转载!否则将追究法律责任. 使用yum命令安装所需的软件,如果设备网络状况很好,当然也没必要去配置本地yum源,直接 ...
- 【Catalina】
Tomcat's servlet container was redesigned as Catalina in Tomcat version 4.x. The architect for Catal ...
- firefox浏览器删除插件
打开注册表编辑器([开始菜单]→[运行]或 Win+R快捷键打开运行,输入regedit). 2 点击菜单栏[编辑]→[搜索],或者按 Ctrl + F 快捷键,搜索 MozillaPlugins . ...
- mysql中实现行号,oracle中的rowid
mysql中实现行号需要用到MYSQL的变量,因为MySql木有rownumber. MYSQL中变量定义可以用 set @var=0 或 set @var:=0 可以用=或:=都可以,但是如果变量用 ...