CSS元素对齐

可以使用margin属性类进行元素的水平对齐

水平对齐块元素时，可以将块元素的margin属性定义为"auto"，这里需要注意的是，应该要声明!DOCTYPE，否则在IE8以及以下版本的浏览器中是无效的。

div{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#F90;

}

这里是将div元素的左右边距都定义成了auto，平均分配可用外边距，结果就是将div元素居中显示。

我们也可以为左右外边距定义不同的值(长度值、百分比等)，可以在水平方向调整元素的位置。

使用position属性来进行左和右的对齐

这里使用绝对定位来对齐元素

div{

position:absolute;

right:0px;

width:300px;

background-color:#F90;

}

我们也可以使用float属性进行左和右的对齐

.right

{

float:right;

width:300px;

background-color:#F90;

}

注：当进行元素对齐时，可能会因为浏览器的关系导致显示的BUG，在IE8以及以下版本的浏览器中使用元素对齐时，应该要声明!DOCTYPE

CSS元素尺寸

我们可以通过定义CSS的尺寸属性来控制元素的高宽。同时也可以控制元素之间的距离

CSS 尺寸属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

img.normal

{

height: auto

}

img.big

{

height: 160px

}

img.small

{

height: 30px

}

这里我们也可以用长度值/百分比来定义尺寸属性。

同时也可以用尺寸属性空值行间距

p.small {line-height: 80%}

p.big {line-height: 200%}

CSS元素分类

我们可以通过CSS分类属性控制元素的显示方式以及显示位置。

CSS 分类属性 (Classification)

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

利用CSS的分类属性，我们可以定义很多元素的类型，显示方式，显示位置等。

我们可以指定光标的类型

在这里我们可以改变光标的状态！！

例如，实现一个简单的页面布局

 <html>

 <head>

 <meta charset="utf-8" />

 <style type="text/css">

 div.container {

     width:100%;

     margin:0px;

     border:1px solid;

     line-height:150%;

 }

 div.top, div.bottom {

     padding:0.5em;

     color:white;

     background-color:gray;

     clear:left;

 }

 h1.top {

     padding:0;

     margin:0;

 }

 div.left {

     float:left;

     width:160px;

     margin:0;

     padding:1em;

 }

 div.content {

     margin-left:190px;

     border-left:1px solid gray;

     padding:1em;

 }

 </style>

 </head>

 <body>

 <div class="container">

     <div class="top">

         <h1 class="top">页眉部分</h1>

     </div>

     <div class="left">

         <p>正文左侧部分，可以定义菜单</p>

     </div>

     <div class="content">

         <h2>正文部分</h2>

         <p>正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分</p>

         <p>正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分</p>

     </div>

     <div class="bottom">页脚部分</div>

 </div>

 </body>

 </html>

CSS 导航条

一个网站额导航栏是非常重要的，一个简单易用的导航栏那就更重要了。通过CSS，可以将你的导航栏设计的更漂亮。

网站的导航栏就是能跳转到其它地方的列表，所以它是以html为基础的列表，可以通过<ul>和<li>元素来实现多样化的导航栏。

ul {

	list-style-type:none;

	margin:0;

	padding:0;

}

a:link, a:visited {

	display:block;

	font-weight:bold;

	color:#FFFFFF;

	background-color:#085;

	width:120px;

	text-align:center;

	padding:4px;

	text-decoration:none;

	text-transform:uppercase;

}

a:hover, a:active {

	background-color:#DDD;

}

定义以上的CSS属性，可以实现一个很简单的垂直的导航栏(其实就是带有超链接的列表)。

同样也可以实现一个水平方向的导航栏

CSS自学笔记（8）:CSS拓展（一）的更多相关文章

HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
CSS学习笔记02 CSS选择器
1.通配符选择器通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
DIV+CSS学习笔记（CSS）
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面外部样式-link调用内联样式-标签 ...
CSS自学笔记（9）:CSS拓展（二）
CSS图片当一个网页上有一张或多张图片,而且这些图片的尺寸比较大时,为了是网页布局更紧凑合理,我们可以将这些图片放到一个图片库里,可以有效的防止图片过大可能会对网页布局造成的不良影响. 通过CSS我 ...
CSS自学笔记（16）:CSS3 用户界面
CSS3中,也新增了一些关于用户界面的属性,这些属性可以重设元素或者盒子的尺寸.轮廓等等. 新增的部分属性的浏览器支持情况属性浏览器支持 resize IE Firefox Chrome Safa ...
CSS自学笔记（15）:CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性浏览器支持 column ...
CSS自学笔记（14）:CSS3动画效果
在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...

随机推荐

js 去掉字符串最后一个字符
var str = str.substring(0,str.length-1); alert(str); 注:length 需小写.
[汇编语言]-第五章[bx]和loop指令
1- [bx]和内存单元的描述 [0]表示内存单元, 他的偏移地址为0 mov ax,[0] 将一个内存单元的内容送入到ax.这个内存单元的长度为2字节(字单元),存放一个字,偏移地址为0,段地址在d ...
使用jquery处理ajax返回XML
JS代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 ...
Nginx 配置指令的执行顺序（三）
如前文所述,除非像 ngx_set_misc 模块那样使用特殊技术,其他模块的配置指令即使是在 rewrite 阶段运行,也不能和 ngx_rewrite 模块的指令混合使用.不妨来看几个这样的例子. ...
android TextView EditTextView一些技巧使用（视图代码布局）
android TextView 是最常用的控件可以用作普通的显示,还可以用作有显示文字的按钮,用作有显示图片的图文组合 1. 图文组合 xml 中: <TextView android:id ...
ViewPager+Fragment取消预加载（延迟加载）
在项目中,都或多或少地使用的Tab布局,所以大都会用到ViewPager+Fragment,但是Fragment有个不好或者太好的地方.例如你在ViewPager中添加了三个Fragment,当加载V ...
mysqlbinlog 读取多个文件
[root@zjzc01 binlog]# mysqlbinlog --start-datetime='2016-02-25 00:00:00' --stop-datetime='2016-03-15 ...
【FSFA 读书笔记】Ch 2 Computer Foundatinons（1）
Data Organization 1. 进制转换. 按照正常的书写顺序写一个数字(无论多少进制),其中最左边的列称为“最高有效符号”,最右边的列称为“最低有效符号”. (The right-most ...
iOS断言
来自:http://my.oschina.net/panyong/blog/205573 在看到xmpp项目中的一些代码时,看到如下,不懂该代码是啥意思, 如下: NSAssert(_xmppStre ...
hdu 4686 Arc of Dream（矩阵快速幂乘法）
Problem Description An Arc of Dream is a curve defined by following function: where a0 = A0 ai = ai- ...

CSS自学笔记（8）:CSS拓展（一）