css常用样式

导航条

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

 

在css里设置样式

ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

 加入图片

html代码

<img src="07f5.png" alt="郁金香" >

 当图片加载不出来时，显示alt对图片的描述。

css对齐

水平对齐

1.使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto"，来对齐块元素

 

.center
{
margin-left:auto;
margin-right:auto;
}
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距

2.使用 position 属性进行左和右对齐

.right
{
position:absolute;
right:0px;
width:300px;
}

 3.使用float 属性

.right
{
float:right;
width:300px;
}

 垂直对齐

style{
Vertical-align:middle;
}