.head 部分
从结构图上我们可以看出,这个部分要实现的功能比较多,首先我们要定义一个 div 来承载这样一个标题(这个超简单), html:
Colorful Life
后面我们要做的就是加上导航,导航利用列表引入,我们知道列表默认的列表会垂直排布,这里我们需要将其设置成为水平排布,为了美观,我们还需要适当加上内边据和外边距
html:
li{
padding: 2px;
display: inline;
}
既然是导航,列表元素必定是链接,涉及到链接,我们就要设置,是否去掉下划线,鼠标移动到上面有什么变化,单击之前是什么颜色,点击之后是什么颜色(这里简单设置):
css:
a:link,a{
color: snow;
text-align: center;
padding: 2px;
text-decoration: none;
}
a:hover{
color: black;
}
在右边我们需要插入一个图片,让它浮动在最右边.
html:
css:
.headimage{
float: right;
margin-top: 30px;
margin-right: 5px;
}
.headimage img{
height: 60px;
width: 60px;