html网页设计实训原理,第二单元上机实验 HTML与css简单页面实例

.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;