对齐 水平对其

margin属性

可通过将左和右外边距设置为 "auto",来对齐块元素。

注释:除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

对齐元素的方法之一是使用绝对定位:.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }绝对定位元素会被从正常流中删除,并且能够交叠元素。

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

对齐元素的另一种方法是使用 float 属性:

CSS 尺寸属性

CSS 尺寸属性允许你控制元素的高度和宽度。同样,还允许你增加行间距。

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

 

CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

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

导航栏

拥有易用的导航条对于任何网站都很重要。

通过 CSS,您能够把乏味的 HTML 菜单转换为漂亮的导航栏。

导航栏 = 链接列表

导航栏需要标准的 HTML 作为基础。

在我们的例子中,将用标准的 HTML 列表来构建导航栏。

导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的:

  • list-style-type:none - 删除圆点。导航栏不需要列表项标记。
  • 把外边距和内边距设置为 0 可以去除浏览器的默认设定。

display:inline; - 默认地,<li> 元素是块元素。在这里,我们去除了每个列表项前后的换行,以便让它们在一行中显示。

定义透明效果的 CSS3 属性是 opacity

opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */