网页制作代码及效果图

期末大作业： 应用本课程知识构建个人博客网站

姓名 学号： 程序要求:

? 总体上采用CSS+DIV的布局、定位方式，并且实现一列定宽一列变宽的页面布局。

? 根据个人情况设计个人博客页面，可以展示并不局限于下列信息：

– 自我介绍 – 我的爱好 – 我的故乡 – 我的学校 – 等等。

? 至少实现5个独立页面，各页面的主题风格可以相同也可以不同；

? 尽可能多地运用CSS文字样式设计方法，并实现图文混合编排；

? 运用自己设计的网站菜单；

? 运用走马灯效果的滚动文字或者图片、链接；

? 根据个人能力选择运用多媒体、javascript等技术； ? 尽可能美观。

? 评分方式：技术占50%，内容、美观占50%。 ? 对于所用的技术要能解释相关的用法。

作业提交方式：

? 本作业必须在17周上课之前提交。 ? 代码提交网站根据目录的压缩文件。

? 写一份简要的技术实现说明，主要介绍网站所使用的技术及实现方法、特点。

? 代码压缩文件与技术说明文件一起上传到FTP服务器的对应目录中：

– 电商一班：ecom1 – 电商二班：ecom2

– 网络经济：ite 用户名：webclient 密码：webclient

FTP服务器IP：59.77.11.212

代码：

我的主页-首页

Create an Animated Flip Down Clock

margin:15px; font-family:Arial; font-size:12px;

background-image:url(150289.jpg); width:700px; height:200px; } .mother{

background-color:#333;

padding:10px; margin:10px;

border:10px inset #999; position:absolute; left:232px; top:131px; z-index:3;

}

.jj{background-color:#666; padding:5px; margin:10px; width:350px; height:200px; position:absolute; left:655px; top:225px; z-index:1; } .father{

background-color:#333; padding:5px;

border:outset #333; margin:10px; width:350px; height:399px; position:absolute; left:492px; top:247px;

z-index:2; }

.father div{

padding:10px; margin:15px; border:0px dashed #111111; background-color:#90baff; border-left:90px; }

.father p{

border:0px dashed #111111; background-color:#; clear:right;

font-size:18px;

font-family:\}

.menu_navcc{

position:absolute; top:11px; left:346px; }

ubody{font:12px Arial,Verdana,Tahoma,\宋体\*{padding:0px;margin:0px;} * li{list-style:none;}

a{text-decoration:none;color:#20537A;} a:hover{text-decoration:underline;}

.menu_navcc{width:960px; margin:0 auto;}

.menu_nav{width:480px;height:40px;background:url(img/nav_bg.gif) repeat-x;float:left;margin-top:18px;} .menu_nav .nav_content{padding-left:8px;background:url(img/nav_l_bg.gif) no-repeat;float:left;}

.menu_nav .nav_content li{width:116px;height:40px;background:url(img/nav_li_right.gif) no-repeat right center;float:left;line-height:40px;text-align:center;font-size:14px;}

.menu_nav .nav_content li a{color:#fff;width:116px;height:40px;display:block;} .menu_nav .nav_content li.current{line-height:40px;}

.menu_nav .nav_content li.home a{width:116px;height:40px;background:url(img/nav_home.gif) no-repeat top;color:#fff;} .menu_nav .nav_content li.end a{width:116px;height:40px;background:url(img/nav_end.gif) no-repeat top;color:#fff;} .menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:116px;height:40px;background:url(img/nav_li_current.gif) no-repeat;display:block;color:#fff;}

.menu_nav .nav_content li a:hover{background:url(img/nav_li_hover.gif) no-repeat;line-height:40px;text-decoration:none;}