资源描述：
《【精品】网页设计与网站建设课程》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、《网页设计与网站建设》课程设计二O—二年六月十九日1＞网站设计目的32、网站设计题目描述和要求33、网站设计报告内容64、结论215、附录21网页制作和网站设计课程报告1、网站设计目的通过本次课程设计，学习ASP动态网页制作技术，html5css3等技术，了解后台服务器的运作，提高作为电商人的技术素养。2、网站设计题目描述和要求个人网站主题：电影资讯分享乐园描述：动态部分：采川ASP技术，实现的功能主要有：添加评论，并且可以做岀修改和删除。静态部分：•本网站捉供一些最新大片的电影资讯，包括主要信息和经
2、典影评。•网站静态部分使用的编辑器为editplus,代码纯手写。•采用Thtml5和css3新标准,()o•彳j局上采用div,而不是旧的table^
3、j局。•主要用的新功能有html5新标签的使用，css3的radiusI员I角；斜线(oprea还不清楚其兼容代码怎么写)•特色功能有纯css模拟的图片点击放人，滤镜效果和点击关闭。主要实现方法为：首先是大图div的隐藏(-9999px的定位)，点击图片的时候触发va>的伪类效果：:hover:visited:focus,
4、这是大图div重新定位，出现在网页屮间，其他空间这川一个空的白色div,设置滤镜透明效果；关闭按钮为z-index最高的div,当点击此div时，va>的伪类效果消失，定位恢复，人图被隐藏。具体代码片段如下:.clickbox,.clickbox:visited,.clickbox:hover{tcxt-dccoration:none;text-alignreenter;}/*a无下划线,居中*/.clickboxb{display:block;}/*定义b为块级元素,这里故意不JIJdiv，呵呵*/
5、.clickbox.opabox{position:absolute;left:-9999px;top:-9999px;cursor:default;z-index:5()0;}/*先隐藏点击后跳出的*/.clickbox.opa{position:absolute;left:O;top:0;width:100%;}/*滤镜水平撑满，本身没内容，起始为透明*/.clickbox.box{position:absolute;left:O;width:100%;text-align:center;heig
6、ht:300px;top:30%;margin-top:-150px;}/*大图水平撑满文字居中高300top30%*/.clickbox:active・opabox{left:O;top:0;width:100%;height:100%;}.clickbox・opabox:hover,.clickbox:focus.opabox{position:absolute;/*不同定位方式大图滚动效果不同*/left:O;top:0;width:100%;height:100%;}.clickbox.opa
7、box:hover.opa,.clickbox:active・opabox.opa,.clickbox:focus.opabox.opa{background:#fff;width:100%;height:100%;position:fixed;/*滤镜固定，filter:alpha(opacity=90);opacity:0.90;cursor:default;}/*点击滤镜牛效，背景白色，10%透明撑满引.clickbox.opabox:hover.boximg,img,.clickbox:foc
8、us・()pabox.boximg{border:1pxsolid#ddd;margin:0auto;padding:3()px;background:#fff;}/*点击后大图居中，调整位置，口色背景,30pad,.clickbox.opabox:hover・boxspan,span,・clickbox:focus・opabox.boxspan{解决滚动高度问题勺.clickbox:active边框*/.clickboxiactive.opabox.opabox.box.boxdisplay:blo
9、ck;width:540px;padding:lOpx;margin:lOpxauto;text-align:center;text-decoration:none;background:#fff;border:lpxsolid#ddd;}/*文字定位*/a.clickbox.opabox.boxspan.titlc{font:normal22px/2em来体；color:#069;}/*文字样式*/a.clickbox.opabox.boxspan.c
