导航条
<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;
}