发布时间 : 星期一 文章网页制作代码及效果图更新完毕开始阅读
期末大作业: 应用本课程知识构建个人博客网站
姓名 学号: 程序要求:
? 总体上采用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;}