网页设计期末复习 网页设计与开发_第1页
网页设计期末复习 网页设计与开发_第2页
网页设计期末复习 网页设计与开发_第3页
网页设计期末复习 网页设计与开发_第4页
网页设计期末复习 网页设计与开发_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计期末复习网页设计与开发网页设计期末复习网页设计与开发网页设计期末复习网页设计与开发V:1.0精细整理，仅供参考网页设计期末复习网页设计与开发日期：20xx年X月网页设计简答题：相对定位与绝对定位的区别？并举例说明。相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。绝对定位的元素框从文档流完全删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭元素定位后生成一个块级框。制作菜单的常用方法？【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；)【第二步】盒子做好了，我们就要往里面放导航条中的内容了“CSS学习学前准备入门教程提高教程布局教程精彩应用”，插入标签有序列表ul，单元格li新建样式—复合类型—#navulli{float:left;};在li标签的CSS属性中加入“list-style:none;”

【第三步】后面的文字全部贴着前面的文字。设置<li>标签的宽度为100像素：【第四步】我们需要将上面的导航条做以下几个修改1）给上面的导航加上链接；2）链接文字大小修改为12px;3）并且规定链接样式，鼠标移上去和拿开的效果图片与文字的对齐方式(padding,margin,DIV的float、行高、对齐、背景图片设置属性)1.padding简写属性在一个声明中设置所有内边距属性。不允许使用负值。可能的值auto、length、%、inherit2.margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值可能的值auto、length、%、inherit3.float定义元素在哪个方向浮动none、left、right、inherit(规定应该从父元素继承float属性的值)4.line-height属性可设置行间的距离，不允许使用负值。

5.text-align属性规定元素中的文本的水平对齐方式。<img>图像由标签定义。是空标签，意思是说，它只包含属性，并且没有闭合标签。DIV中设置CSS的两种方式(内联和外联方式代码)外联：是指把样式写在一个CSS文件中通过link标签导入到页面中例如：1.<linkhref="styles.css"type="text/css"/>2.<linkhref="001.css"type="text/css"rel="Stylesheet"/>内联:是指在同一个页面文件中，统一写出在headstyle标签中，要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：ul与li的设置。<ul>标签定义无序列表。（ul是unorderedlists的缩写）ul标签是成对出现的，以<ul>；开始，</ul>；结束每一列使用<li>；标签定义在html中<li></li>是一对标记,表示有序列表或者无序列表的项目。如果在<UL></UL>标记之间，则表示无序列表。针对IE6不支伪类（编写JS代码）startList=function(){ if((document.all)&&(document.getElementById)) { rootnav=document.getElementById("nav") arrayli=rootnav.getElementsByTagName("li"); for(i=0;i<arrayli.length;i++) { currentli=arrayli[i]; currentli.onmouseover=function() { this.className+=this.className+"current"; } currentli.onmouseout=function() { this.className=this.className.replace("current",""); }}}}window.onload=startList;制作背景音乐、播放Flash、视频文件等关键代码。背景音乐：<head></head>之间加入<bgsoundsrc="音乐url"loop="-1"><embedsrc="sound/YesterdayOnceMore.mp3"autostart=trueloop="true">播放Flash、视频文件<embedsrc="flash/flash921.swf"type="application/x-shockwave-flash"width="300"pluginspage="/go/getflashplayer">制作动态公告的标签及属性设置。从插入菜单选“标签”，然后在对话框中选“html标签”“页元素”“marquee”。然后在打开右边标签检查器，里设定marquee标签的属性。

文字移动属性的设置

方向<direction=#>#=left,right,up,down

left从右向左移，right从左向右移，up从下向上移，down从上向下移。<marqueebehavior="scroll"direction="up"bgcolor="#7fffd4"height="150px"vspace="15"scrolldelay="300"onMouseOver=this.stop()onMouseOut=this.start()><fontface="宋体"size="4">    学校将于近期举电子信息系网页设计大赛，报名截</font></marquee>制作表单的常用元素。1创建表单

.<form></form>2.<selectmultiplename="name"size=""></select>创建滚动菜单,size设置在需要滚动前可以看到的表单项数目

<option>设置每个表单项的内容

3.<selectname="name"></select>创建下拉菜单

<option>设置每个菜单项的内容

4.<textareaname="name"cols=40rows=8></textarea>创建一个文本框区域,列的数目设置宽度,行的数目设置高度

5.<inputtype="checkbox"name="name">创建一个复选框,文字在标签后面6.<inputtype="radio"name="name"value="">创建一个单选框,文字在标志后面

7.<inputtype=textname="foo"size=20>创建一个单行文本输入区域,size设置为字符串的宽度

<inputtype="submit"value="name">创建提交(submit)按钮

8.<inputtype="image"border=0name="name"src="name.gif">创建一个使用图像的提交(submit)按钮

9.<inputtype="reset">创建重置(reset)按钮J．常见元素的功能（DIV、Span、a、ul、li、h、img等）Div；为HTML文档内大块（block-level）的内容提供结构和背景的元素。Span；在行内定义一个区域，span加在内容里，还是一行显示，1.span元素为p元素增加了额外的结构：<p><span>sometext.</span>someothertext.</p>2.span可以对文档中的部分文本增添视觉效果：<spanclass="red">健康</span>、<spanclass="blue">富裕</span></div> a:建立超链接<ahref=“”>xx文本</a>Ul:标记插入无序列表！Li：定义列表项序列！h:网页html中对文本标题所进行的着重强调的一种标签Img:表示插入图片！<imgsrc="images/wangyeseji.png"width="124"height="93"hspace="8"vspace="16"/>二、上机操作(1)用JS写出从小到大排序算法。functionsort(){varary;varlen,ex,tmp;varinputN=document.getElementById("Text1");varary=inputN.getAttribute("value");ary=ary.split(',');len=ary.length;for(vari=0;i<len;i++){//重置是否发生交换的变量ex=false;for(varj=len-2;j>=i;j--){if(ary[j+1]<ary[j]){//交换相邻的两个元素tmp=ary[j];ary[j]=ary[j+1];ary[j+1]=tmp;/////记录发生了交换ex=true;}}//如果没有发生交换，表明已经排序完成if(!ex)break;}varoutputN=document.getElementById("Text2");outputN.setAttribute("value",ary);}用JS写出图片幻灯切换效果。vart=1;varimageindex=1;varimagenumbers=3;functionchangeImage(){setFocus(imageindex); imageindex++; if(imageindex>imagenumbers) { imageindex=1; } setTimeout('changeImage()',t*1000);}functionsetFocus(indexImage){ for(i=1;i<=imagenumbers;i++) { if(i==indexImage) { document.getElementById('image'+i).style.display='block'; } else { document.getElementById('image'+i).style.display='none'; } }}window.onload=changeImage;(3)用JS判断表单验验（包括密码验证、根据用户选择的值，自动填写相关值，如选择某个系，自动读取列表值）

functionCheck(){ varpasswd=document.getElementById("passwordText").value; varConfirmpasswd=document.getElementById("ConfirmpasswordText").value; if(passwd=="") { alert("密码不能为空"); } if(passwd!=Confirmpasswd) { alert("密码不一致，请重输"); } varconfirack=document.getElementById("CheckBoxServiceAck"); if(!confirack.checked) { alert("你未接收服务条款!"); }}。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。//根据专业方向列出对应所有专业functionselectToPreTextarea(){ varcurrSelectIndex=document.getElementById("listMajor").selectedIndex; varpreSelect=document.getElementById("SelectPreselectmajors"); if(currSelectIndex==1) { jsAddItemToSelect(preSelect,"计算机应用",0); jsAddItemToSelect(preSelect,"计算机网络",1); jsAddItemToSelect(preSelect,"电子商务",2); } if(currSelectIndex==2) { jsAddItemToSelect(preSelect,"会计电算化",3); jsAddItemToSelect(preSelect,"经济管理",4); } if(currSelectIndex==3) { jsAddItemToSelect(preSelect,"英语",5); jsAddItemToSelect(preSelect,"日语",6); }}//用户选专业functiongetMajors(){ varpreSelect=document.getElementById("SelectPreselectmajors"); varselectIndex=preSelect.selectedIndex; varConfirmSelect=document.getElementById("ConfirmPreselectmajors"); varcurrSelectText=preSelect.options[selectIndex].text; varcurrSelectvalue=preSelect.selectedIndex; jsAddItemToSelect(ConfirmSelect,currSelectText,currSelectvalue);}//用户删专业functionDeletedMajors(){ varConfirmSelect=document.getElementById("ConfirmPreselectmajors"); jsRemoveSelectedItemFromSelect(ConfirmSelect);}////1.判断select选项中是否存在Value="paraValue"的ItemfunctionjsSelectIsExitItem(objSelect,objItemValue){varisExit=false;for(vari=0;i<objSelect.options.length;i++){if(objSelect.options[i].value==objItemValue){isExit=true;break;}}returnisExit;}//2.向select选项中加入一个ItemfunctionjsAddItemToSelect(objSelect,objItemText,objItemValue){//判断是否存在if(!jsSelectIsExitItem(objSelect,objItemValue)){varvarItem=newOption(objItemText,objItemValue);objSelect.options.add(varItem);}}//3.从select选项中删除一个ItemfunctionjsRemoveItemFromSelect(objSelect,objItemValue){//判断是否存在if(jsSelectIsExitItem(objSelect,objItemValue)){for(vari

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论