《网页制作代码及效果图》由会员分享，可在线阅读，更多相关《网页制作代码及效果图（33页珍藏版）》请在金锄头文库上搜索。
1、期末大作业：期末大作业： 应用本课程知识构建个人博客网站应用本课程知识构建个人博客网站 姓名姓名学号：学号：程序要求程序要求: 总体上采用 CSS+DIV 的布局、定位方式，并且实现一列定 宽一列变宽的页面布局。 根据个人情况设计个人博客页面，可以展示并不局限于下列 信息： 自我介绍 我的爱好 我的故乡 我的学校 等等。 至少实现 5 个独立页面，各页面的主题风格可以相同也可以 不同； 尽可能多地运用 CSS 文字样式设计方法，并实现图文混合编 排； 运用自己设计的网站菜单； 运用走马灯效果的滚动文字或者图片、链接； 根据个人能力选择运用多媒体、javascript 等技术； 尽可能美观。 评
2、分方式：技术占 50%，内容、美观占 50%。 对于所用的技术要能解释相关的用法。作业提交方式：作业提交方式： 本作业必须在 17 周上课之前提交。 代码提交网站根据目录的压缩文件。 写一份简要的技术实现说明，主要介绍网站所使用的技术及 实现方法、特点。 代码压缩文件与技术说明文件一起上传到 FTP 服务器的对应 目录中： 电商一班：ecom1 电商二班：ecom2 网络经济：ite 用户名：webclient 密码：webclient FTP 服务器 IP：59.77.11.212代码： 我的主页-首页个人主页-首页Create an Animated Flip Down Clockbody
3、 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; .jjbackground-color:#666; padding:5px; margin:10px; width:35
4、0px; 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 divpadding:10px; margin:15px; border:0px dashed #111111; backgr
5、ound-color:#90baff; border-left:90px; .father p border:0px dashed #111111; background-color:#; clear:right; font-size:18px; font-family:“Comic Sans MS“, cursive; .menu_navcc position:absolute; top:11px; left:346px; ubodyfont:12px Arial,Verdana,Tahoma,“宋体“; *padding:0px;margin:0px; * lilist-style:non
6、e; atext-decoration:none;color:#20537A; a:hovertext-decoration:underline;.menu_navccwidth:960px; margin:0 auto; .menu_navwidth:480px;height:40px;background:url(img/nav_bg.gif) repeat- x;float:left;margin-top:18px; .menu_nav .nav_contentpadding-left:8px;background:url(img/nav_l_bg.gif) no- repeat;flo
7、at:left; .menu_nav .nav_content liwidth: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 acolor:#fff;width:116px;height:40px;display:block;.menu_nav .nav_content li.currentline-height
8、:40px;.menu_nav .nav_content li.home awidth:116px;height:40px;background:url(img/nav_home.gif) no-repeat top;color:#fff; .menu_nav .nav_content li.end awidth: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:ho
9、verwidth:116px;height:40px;background:url(img/nav_li_current.gif) no- repeat;display:block;color:#fff; .menu_nav .nav_content li a:hoverbackground:url(img/nav_li_hover.gif) no- repeat;line-height:40px;text-decoration:none;.menu_nav_rightpadding-right:8px;background:url(img/nav_r_bg.gif) no-repeat ri
10、ght top;float:right;height:40px;.dd border:5px #333 outset; position:absolute; left:612px; top:344px; height: 189px; pfont-size:16px;color:#CCC; font-family:“Lucida Sans Unicode“, “Lucida Grande“, sans-serif; #wrapper position:absolute; left:593px; top:191px; z-index:2; .w position:fixed; left:40px;
11、 bottom:20px;z-index:2; .x position:absolute; left:248px; top:405px; z-index:1; function mouseover(M) M.style.width=“300“;M.style.height=“400“ function mouseout(M) M.style.width=“150“;M.style.height=“200“姓名(name):金沈阳 Suyar星座（Constellation）:狮子座（The lion）生日 (birth):7 月初一信条（motto）：吃货好养活。个人主页 个人资料我的日记照片
12、墙我的资料个人资料body margin:15px; font-family:Arial;font-size:12px;background-image:url(木头.jpg);width:700px; height:200px; .mother background-color:#;padding:10px; margin:10px;border:10px outset #933;position:absolute; left:140px; top:85px; z-index:2; .father background-color:#3ffffff; border:10px outset #
13、C6F; padding:5px; margin:10px; width:800px; height:240px; float:right; position:absolute; left:350px; top:90px; z-index:1; .father p border:0px dashed #111111; background-color:#;clear:right; font-size:18px; font-family:“Comic Sans MS“, cursive; .A text-align:center; background-color:#;border:10px o
14、utset #C6F ; padding:5px; margin:10px; width:800px; height:200px; position:absolute;left:350px; top:390px;.B text-align:center; background-color:#;border:10px outset #C6F ; padding:5px; margin:10px; width:800px; height:265px; position:absolute; left:350px; top:640px; .C background-color:#;border:10p
15、x outset #C6F ; padding:5px; margin:10px; width:800px; height:200px;position:absolute; left:350px; top:955px;.menu_navccposition:absolute;top:5px;left:350px;ubodyfont:12px Arial,Verdana,Tahoma,“宋体“; *padding:0px;margin:0px; * lilist-style:none; atext-decoration:none;color:#20537A; a:hovertext-decora
16、tion:underline;.menu_navccwidth:960px; margin:0 auto; .menu_navwidth:480px;height:40px;background:url(img/nav_bg.gif) repeat- x;float:left;margin-top:18px; .menu_nav .nav_contentpadding-left:8px;background:url(img/nav_l_bg.gif) no- repeat;float:left; .menu_nav .nav_content liwidth:116px;height:40px;background:url(img/
