文档介绍：应用div/css技术制作网页并结合层、行为与时间轴制作特效
网页主题、设计风格、配色方案的定位
网页以奶茶为主题,意在显示显示生活中人们对物质生活以及美的事物的追求。整个网页以温馨,可爱的粉色为基调,和奶茶的作用以及含义相同。网页中运用啦图片和文字,以展现奶茶的特征,达到一目了然的效果。
Div/css技术的设计与实现
布局结构图
#top标签
#zdaohang标签
#Xiushi标签
.kuang1
标签
#daohang1标签
#kuangl标签
#kuangr标签
.kuang2标签
#kuangb标签
#kuangt标签
Ap div标签
Css的设计与实现
此网页利用top标签引出网页的主题
#top {
font-size: large;
font-style: oblique;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
text-decoration: blink;
background-color: c4172a;
height: 20px;
width: 275px;
margin-top: 40px;
margin-left: 480px;
float: left;
}
利用zdaohang标签制作导航条利用
#zdaohang {
font-size: large;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #000000;
text-decoration: blink;
height: 20px;
width: 550px;
margin-top: 20px;
margin-left: 200px;
float: left;
}
xiushi标签使整个网页更加美观
#xiushi {
font-size: large;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #994042;
text-decoration: blink;
height: 20px;
width: 500px;
margin-top: 40px;
margin-left:300px;
float: left;
}
利用kuang的标签实现网页的内容呈现
.kuang1 {
height: 220px;
width: 530px;
margin-top: 120px;
margin-left: 400px;
float: left;
}
.kuang2 {
height: 190px;
width: 410px;
margin-top: 50px;
margin-left: 570px;
float: left;
}
最后利用Ap div实现页脚区
在kuang标签中嵌套其他标签,以达到预期的效果。
<body onload="MM_preloadIm