网页制作的程序与设计毕业论文目录摘要 (I)第1章选题背景 (1)1.1来源 (2)1.2目的 (2)1.3意义 (2)1.4应解决的主要问题 (2)1.5应达到的技术要求 (3)1.6国外现状及发展趋势 (3)1.7所用各技术特点 (3)1.8网页制作优缺点 (4)1.9 PS页面样式 (5)第2章方案论证 (9)2.1设计原理 (10)2.2方案选择 (15)2.3方案的特点 (16)2.4 css代码 (17)第3章后台 (29)1 后台页面 (29)2 页面代码 (30)3 运行环境 (33)3 小结 (34)第4章总结 (35)致谢 (35)第1章引言一、介绍超是网页中最活泼、最有吸引力的一种元素。
表单用于特殊的信息，使用户和进行交互，使你找到用户的详细信息。
表格在许多工作中有着广泛的应用。
框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面容。
网页制作的高级技术包括：在网页中插入FLASH动画利用Java或者JavaScript制作网页的动态效果。
网页中使用插件，视频等Web组件以及创建、发布和管理站点等技术。
Web页面往往是具有各种各样的页面元素、丰富的容和复杂的布局。
因此仅仅使用到一种或者两种网页制作技术，不可能创作出一个优秀的Web页面，一个美观而实用的Web页面往往需要综合利用各种技术。
二、概述1. 名称：“JONY的天空”2. 步骤：(1) 确立主题(2) 收集资料(3) 创建(4) 编辑网页(5) 美化网页三、目的运用已经掌握的知识完成一个环境保护企业。
通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。
四、要求根据公司的要求，设计一个，以达到宣传该公司及其产品的目的。
有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，容丰富多彩，页面风格独特。
五、设计工具Dreamweaver、Flash、Photoshop等。
六、站点构思1.整体构思：本主题为：JONY的天空个人。
总共有主网页7个，外加后台网页及程序。
主页是一个总目录的网页，里面加有网页动画效果“相册浏览”及Flash动画，本站几个主要分网页分别为：首页、展示时刻、心情日志、随笔感悟、温馨相册、关于我们。
还有许多子网页。
2.页面构思：下面介绍一下中的几个网页的制作。
背景色采用跟主页一样的蓝色，淡蓝色的背景给人以干净大方的感觉，上方为Flash动画与导航部分，全部均是用Photoshop制作的图片PSD图片，每个页色调均不相同。
左边的LOGO是用Photoshop制作的图片。
每个页面都有一个置的播放器，不同的页面有不同风格的音乐，让浏览者有身临其境的感觉，播放器支持点击播放/停止的功能，更加人性话。
七所用各技术的特点1.Dreamweaver : Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。
Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。
Dreamweaver的主要特点：最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。
Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。
除此之外，只要单击便可使Dreamweaver 自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
管理使用地图可以快速制作雏形，设计，更新和重组网页。
改变网页位置或档案名称，Dreamweaver会自动更新所有。
使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的更新变得迅速又简单。
无可比拟的控制能力Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧(frames)和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所供即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party 厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页时，所供即所得的功能，让您不需要透过浏览器就能预览网页。
梦幻样版和XMLDreamweaver将容与设计分开，应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版，指定可编辑或不可编辑的部分，容提供者可直接编辑以样式为主的容，却不会不小心改变既定之样式。
您也可以使用样版正确地汇入或输出XML容。
全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。
对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft 浏览器上执行。
使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。
当有新的浏览器上市时，只要从Dreamweaver的下载它的描述档，便可得知详尽的成效报告。
2.Photoshop:Adobe photoshop 在绘图、色彩调整等诸多方面有着出色的功能，集成度高、适应面广和操作简便。
他不仅提供强大的绘图工具，可以直接绘制艺术图形，还能直接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图像的颜色模式，并能在图像中制作艺术文字等。
Photoshop中的高级绘图工具，可自动生成背景纹理、图层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的web图形并可直接在photoshop中定义和编辑切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。
强大的彩色校正工具——修复画笔，可在消除瑕疵的同时保留色调和纹理图层。
Photoshop的强大工具可以使操作者不管制作任何图像都游刃有余。
对于设计网页，photoshop是不可或缺的工具，是强大的图片处理工具。
3.FlashMX: Macromedia公司出品的Flash是制作网页动画的利器。
严格来说， F1ash是网络多媒体制作工具而不是网页编辑工具。
F1ash是制作动感网页的权威。
对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。
可以让制作者随心所欲地实现各种创意，并且可以和JavaScript一起创作出具有强大交互性的网页动画。
Flash是一种绘制矢量图形和创作互动多媒体动画的软件。
它可以用少量的矢量数据就可以描述相当复杂的对象，所以生成的文件尺寸小，便于在网上传输。
Flash创建的动画集可以插入到html文档中，也可以单独制作网页。
使网页的效果更加完美。
八网页制作的优缺点比较明确，风格统一。
并运用了一些其它的设计软件加以辅助设计。
使网页更加具有动感，形式丰富。
就容而言，比较丰富。
大量运用了图片，并进行了文字说明，做到了图文并茂。
但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。
九 ps页面样式一．首页二．展示时刻三．心情日志四．随笔感悟五．温馨相册六．关于我们代码1.页面代码<!--#include file="conn.asp"--><html xmlns="/1999/xhtml"><style type="text/css"><!--#apDiv1 {position:absolute;width:46px;height:43px;z-index:1;}--></style><head><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>懿——[jony天空]</title><meta name="description" content=""><meta name="keywords" content=""><link href="Css/css.css" rel="stylesheet" type="text/css"><link rel="shortcut icon" href="favicon.ico" ><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script></head><body><table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="1024" height="110" valign="bottom" background="Images/in_01.jpg"><div id="apDiv1"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','1024','height','300','src','Images/PGY','quality','high','plugins page','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','tr ansparent','movie','Images/PGY' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="1024" height="300"><param name="movie" value="Images/PGY.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/PGY.swf" width="1024" height="300" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></div><!--#include file="images/Top_23_11.gif"--><table width="1004" border="0" cellspacing="0" cellpadding="0"><tr><td width="960" align="right" class="fong_FFFFFF"><a href="index.asp" class="a3">首页</a> | <a href="user.qzone.qq./362173487/infocenter" target="_blank" class="a3">空间</a> |<a href="user.qzone.qq./996723423/infocenter" target="_blank" class="a3">爱人</a> |<a href="/Product.asp" target="_blank" class="a3">案例</a></td><td width="44" align="right" class="fong_FFFFFF"> </td></tr><tr><td height="40" colspan="2" align="right" valign="bottom"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','515','height','35','src','Images/Top','quality','high','pluginspa ge','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','tran sparent','movie','Images/Top' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="515" height="35"><param name="movie" value="Images/Top.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/Top.swf" width="515" height="35" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr><tr><td height="13" colspan="2" align="right" valign="bottom"></td></tr></table></td></tr><tr><td><img src="Images/in_02.jpg" width="1024" height="109" alt=""></td></tr><tr><td><img src="Images/in_03.jpg" width="1024" height="95" alt=""></td></tr><tr><td><img src="Images/in_04.jpg" width="1024" height="87" alt=""></td></tr></table><table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><a href="ShowTime.asp" class="a5"><img src="Images/in_05.jpg" alt="" width="257"<td><a href="MoodDiary.asp" class="a5"><img src="Images/in_06.jpg" alt="" width="339" height="57" border="0"></a></td></tr><tr><td align="right" valign="top"><table border="0" cellpadding="5" cellspacing="0"><tr><%set rs=server.CreateObject("ADODB.Recordset")rs.open "select top 4 * from jcl_photo where P_zx=1 and P_cla=13 order by id desc",conn,1,1 if not rs.eof theni=0do while not rs.eofi=i+1%><td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#666600"> <tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" cellspacing="0"> <tr><td><span class="unnamed2"><a href="showtimeDisp.asp?id=<%=rs("id")%>" target="_blank"><img src="upImgFile/<%=rs("p_url")%>" width="90" height="70" border="0" /></a></span></td></tr></table></td></tr></table></td><td valign="bottom"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','10','height','70','src','Images/YY2','quality','high','pluginspag e','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','trans parent','movie','Images/YY2' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"<param name="movie" value="Images/YY2.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/YY2.swf" width="10" height="70" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr><tr><td colspan="2" align="center"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','88','height','6','src','Images/yy','quality','high','pluginspage' ,'.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Images/ yy' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="88" height="6"><param name="movie" value="Images/yy.swf"><param name="quality" value="high"><embed src="Images/yy.swf" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" width="88" height="6"></embed></object></noscript></td></tr></table></td><%if i mod 2 = 0 then%></tr><%end ifrs.movenextlooprs.closeset rs=nothing%></table></td><td align="right" valign="top"><table width="320" border="0" cellspacing="2" cellpadding="3"><%set rs=server.createobject("ADODB.Recordset")rs.open "select top 1 * from Record order by id desc",conn,1,1if not rs.eof thenid=rs("id")%><tr><td></td></tr><tr><td class="td04">∷<strong> <%=rs("P_date")%> <%=rs("Title")%></strong>∷</td> </tr><tr><td class="fong_25"><%if len(rs("Content"))>180 thenresponse.write left(rs("Content"),180)&"..."elseresponse.write rs("Content")end if%></td></tr><%end if%></table></td></tr></table></td><td width="428" height="192" valign="top" background="Images/in_07.jpg" class="td_Bj"><table width="100%" border="0" cellspacing="0" cellpadding="0"><td height="150" align="right" valign="bottom"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','100','height','50','src','Images/Music_In','quality','high','plug inspage','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode', 'transparent','movie','Images/Music_In' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="100" height="50"><param name="movie" value="Images/Music_In.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/Music_In.swf" width="100" height="50" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr></table></td></tr></table><table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><img src="Images/in_10.jpg" width="1024" height="26" alt=""></td></tr><tr><td height="64" background="Images/in_12.jpg"><!--#include file="end.asp"--></td></tr></table></body></html>2.Left导航代码<meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><link href="Css/css.css" rel="stylesheet" type="text/css"><link rel="shortcut icon" href="favicon.ico" ><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="60"> </td></tr><tr><td align="center"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','150','height','310','src','Images/left','quality','high','plugins page','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','tr ansparent','movie','Images/left' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="150" height="310"><param name="movie" value="Images/left.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="Images/left.swf" width="150" height="310" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr></table>3.底栏代码<meta http-equiv="Content-Type" content="text/html; charset=GB2313" /><link href="Css/css.css" rel="stylesheet" type="text/css"><link rel="shortcut icon" href="favicon.ico" ><script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="13%" align="center"></td><td width="87%" class="fong_FFFFFF">技术所有懿© CopyRight <a href="user.qzone.qq./362173487/infocenter"class="a1">user.qzone.qq./362173487/infocenter</a> All rights reserved<br />美工设计：<a href="user.qzone.qq./362173487/infocenter" target="_blank" class="a1">懿</a> 系统程序：懿遥阳科技<a href="/" target="_blank" class="a1"></a></td></tr></table>4.css代码一．css.cssBODY {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;SCROLLBAR-FACE-COLOR: #61A2AD;SCROLLBAR-HIGHLIGHT-COLOR: #61A2AD;SCROLLBAR-SHADOW-COLOR: #61A2AD;SCROLLBAR-3DLIGHT-COLOR: #61A2AD;SCROLLBAR-ARROW-COLOR: #fFFFFF;SCROLLBAR-TRACK-COLOR: #ffffff;SCROLLBAR-BASE-COLOR: #ffffff;font-size: 12px;color: #666666;text-decoration: none;background-color: #FFFFFF;background-image: url(../Images/bj.jpg);background-repeat: repeat-y;background-position: center;}}COLOR: #666666;TEXT-DECORATION: none }A:active {TEXT-DECORATION: none}A:hover {COLOR: #ff6600;LEFT: 1px;POSITION: relative;TEXT-DECORATION: none;TOP: 1px;font-size: 12px;}A:link {TEXT-DECORATION: none ;font-size: 12px;color: #666666}P {FONT-SIZE: 12px;LINE-HEIGHT: 16px}TD {FONT-SIZE: 12px;LINE-HEIGHT: 16px}DIV {FONT-SIZE: 12px;line-height: 16px;}a.a1:link {color: #FFFFFF;}color: #FFFFFF;}a.a1:hover {color: #CCCCCC;font-size: 12px;font-weight: normal; }a.a2:link {color: #ABE3EB;}a.a2:visited {color: #43C0D4;}a.a2:hover {COLOR: #FFFFFF;LEFT: 1px;POSITION: relative;TEXT-DECORATION: none;TOP: 1px;font-size: 14px;font-weight: bold;}a.a3:link {color: #000000;}a.a3:visited {color: #66666;}a.a3:hover {COLOR: #333333;LEFT: 1px;POSITION: relative;TEXT-DECORATION: none;TOP: 1px;font-weight: bold;}a.a4:link {]font-size: 14px;color: #717843;font-size: 14px;font-weight: bold;}a.a4:visited {font-size: 14px;color: #9FAA66;font-weight: bold;}a.a4:hover {COLOR: #B8C08D;LEFT: 1px;POSITION: relative;TEXT-DECORATION: underline;TOP: 1px;font-size: 14px;font-weight: bold;}a.a5:hover {LEFT: 0px;POSITION: relative;TOP: 0px;font-weight: bold;right: 0px;bottom: 0px;}.td_Bj {background-repeat: no-repeat;background-position: top;}color: #FFFFFF;text-decoration: none;}.fong_25 {line-height: 25px;}.td01_au {line-height: 25px;color: #664F00;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC; }.td02_XX_CCCCCC {border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;line-height: 25px;}.td03_xxX4 {line-height: 20px;font-weight: bold;color: #FFFFFF;letter-spacing: 2px;font-size: 14px;border: 1px dashed #CCCCCC; }.td03_xxX3 {border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-style: dashed;border-bottom-style: dashed;border-left-style: dashed;border-bottom-color: #CCCCCC;border-left-color: #CCCCCC;}.td03_xxX2L {border-bottom-width: 1px;border-left-width: 1px;border-bottom-style: dashed;border-left-style: dashed;border-bottom-color: #CCCCCC;border-left-color: #CCCCCC;}.td03_xxX {border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;}.td03_xxX2 {line-height: 25px;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;}.td04 {color: #3C8445;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;line-height: 25px;}.font_3C8445 {line-height: 25px;color: #3C8445;}.font_en {font-family: Arial, Helvetica, sans-serif;font-size: 10px;}二．Default.css/*Yes this layout was inspired by lightbox v2.0's page, the reason being, the layout works really well for a doc*/* {margin: 0;padding: 0;}body {padding: 0;margin: 0;background-color: #171B20;font-size: 12px;font-family: "Lucida Grande", Tahoma, sans-serif;}.page-body {margin: 0 auto 0 auto;width: 600px;padding: 30px 0 20px 0;text-align: left;}.page-footer {margin: 0 10% 0 315px;width: 600px;padding: 0 0 50px 0;text-align: left;}.page-body ul, .page-body ol { color: #ffffff;margin: 10px 0 30px 25px;}.page-body ul li,.page-body ol li {padding: 0;margin: 0 0 5px 0;color: #cccccc;line-height: 140%;font-size: 100%;}.page-footer p {margin: 0;}.page-footer {padding: 20px;}.page-title h1 span {text-align: left;font-weight: normal;font-size: 100%;color: #ffffff;margin: 5px 0 15px 0;}h1 {text-align: left;font-weight: normal;font-size:%;color: #96BF55;margin: 5px 0 15px 0;h1 span {clear: both;font-size: 60%;color: #FF9;}h2 {text-align: left;font-weight: normal;font-size: 150%;color: #09f;margin: 5px 0 15px 0;}h2 span {clear: both;font-size: 70%;color: #FF9;}h3 {clear: both;font-size: 120%;color: #FF9;font-weight: normal;margin: 0 0 10px 0;}.notice {border: 3px solid #ffffbe;padding: 10px;color: #ffffff;background-color: #09f;margin: 0 0 20px 0;.notice p,.notice p a,li a {color: #ffffff;text-decoration: none;}a.page-options {color: #000000;text-decoration: none;display: block;text-align: left;padding: 5px;background: #a9d06a;margin: 3px 0 0 0;border-bottom: 1px solid #333333;border-bottom: 1px solid #555555; }a.page-options:hover,a.page-options:focus {color: #fff;background: #09F;}p {margin: 0 0 20px 0;color: #cccccc;line-height: 140%;}p small,li small {color: #09F;font-size: 100%;p em,em {color: #ffffff;}.hidden {display : none;}三．Lightbox.css#lightbox{position: absolute;left: 0;width: 100%;z-index: 100;text-align: center;line-height: 0;}#lightbox a img{ border: none; }#outerImageContainer{position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}#imageContainer{padding: 10px;}#loading{top: 40%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}#hoverNav{position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}#imageContainer>#hoverNav{ left: 0;}#hoverNav a{ outline: none;}#prevLink, #nextLink{width: 49%;height: 100%;background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */display: block;}#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{font: 10px Verdana, Helvetica, sans-serif;background-color: #fff;line-height: 1.4em;}#imageData{ padding:0 10px; color: #666; }#imageData #imageDetails{ width: 70%; float: left; text-align: left; }#imageData #caption{ font-weight: bold; }#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }#overlay{position: absolute;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;background-color: #000;filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix {height: 1%;}。