网页设计简答题:a.相对定位与绝对定位的区别?并举例说明。
相对定位的元素框会偏移某个距离。
元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
绝对定位的元素框从文档流完全删除,并相对于其包含块定位,元素原先在正常文档流中所占的空间会关闭元素定位后生成一个块级框。
b.制作菜单的常用方法?【第一步】我们要先做一个容器(要求:ID为“nav”,宽度为960px,高度为:35px,位于页面水平正中,与浏览器顶部的距离是30px;)【第二步】盒子做好了,我们就要往里面放导航条中的容了“CSS学习学前准备入门教程提高教程布局教程精彩应用”,插入标签有序列表ul,单元格li新建样式—复合类型—#nav ul li{ float:left;};在li标签的CSS属性中加入“list-style:none;”【第三步】后面的文字全部贴着前面的文字。
设置<li>标签的宽度为100像素:【第四步】我们需要将上面的导航条做以下几个修改1)给上面的导航加上;2)文字大小修改为12px;3)并且规定样式,鼠标移上去和拿开的效果c.图片与文字的对齐方式?(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.<link href="styles.css" type="text/css"/>2.<link href="001.css" type="text/css" rel="Stylesheet"/>联:是指在同一个页面文件中,统一写出在head style标签中,要使用联样式,你需要在相关的标签使用样式(style)属性。
Style 属性可以包含任何CSS 属性。
本例展示如何改变段落的颜色和左外边距:d.ul与li的设置。
<ul> 标签定义无序列表。
(ul是unordered lists的缩写)ul标签是成对出现的,以<ul>;开始,</ul>;结束每一列使用<li>;标签定义在html中<li></li>是一对标记,表示有序列表或者无序列表的项目。
如果在<UL></UL>标记之间,则表示无序列表。
e.针对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;f.制作背景音乐、播放Flash、视频文件等关键代码。
背景音乐:<head></head>之间加入<bgsound src="音乐url" loop="-1"><embed src="sound/Yesterday Once More.mp3" autostart= true loop="true">播放Flash、视频文件<embed src="flash/flash921.swf" type="application/ x-shockwave-flash" width="300" pluginspage=".macromedia./go/getflashplayer" >g.制作动态公告的标签及属性设置。
从插入菜单选“标签”,然后在对话框中选“html标签”“页元素”“marquee”。
然后在打开右边标签检查器,里设定marquee标签的属性。
文字移动属性的设置方向<direction=#> #=left, right, up, downleft从右向左移,right从左向右移,up从下向上移,down从上向下移。
<marquee behavior="scroll" direction="up" bgcolor="# 7fffd4" height="150px" vspace="15" scrolldelay="300" onMouseOver=this.stop() onMouseOut=this.start()><font face="宋体" size="4"> 学校将于近期举电子信息系网页设计大赛,报名截</font> </marquee>I.制作表单的常用元素。
1创建表单.<form></form>2.<select multiple name="name" size=""></select>创建滚动菜单,size设置在需要滚动前可以看到的表单项数目<option> 设置每个表单项的容3.<select name="name"></select>创建下拉菜单<option> 设置每个菜单项的容4.<textarea name="name" cols=40 rows=8></textarea>创建一个文本框区域,列的数目设置宽度,行的数目设置高度5.<input type="checkbox" name="name">创建一个复选框,文字在标签后面6.<input type="radio" name="name" value="">创建一个单选框,文字在标志后面7.<input type=text name="foo" size=20> 创建一个单行文本输入区域,size设置为字符串的宽度<input type="submit" value="name">创建提交(submit)按钮8.<input type="image" border=0 name="name" src="name.gif">创建一个使用图像的提交(submit)按钮9.<input type="reset">创建重置(reset)按钮J.常见元素的功能(DIV、Span、a、ul、li、h、img等)Div;为HTML文档大块(block-level)的容提供结构和背景的元素。
Span;在行定义一个区域,span加在容里,还是一行显示,1.span 元素为p 元素增加了额外的结构:<p><span>some text.</span>some other text.</p>2. span可以对文档中的部分文本增添视觉效果:<span class="red">健康</span>、<span class="blue" >富裕</span></div>a:建立超<a href = “”>xx文本</a>Ul:标记插入无序列表!Li:定义列表项序列!h:网页html 中对文本标题所进行的着重强调的一种标签Img:表示插入图片!<img src="images/wangyeseji.png" width="124" height="93" hspace="8" vspace="16" />二、上机操作(1)用JS写出从小到大排序算法。
function sort(){var ary;var len, ex, tmp;var inputN = document.getElementById("Text1");var ary=inputN.getAttribute("value");ary = ary.split(',');len = ary.length;for(var i=0; i<len; i++){//重置是否发生交换的变量ex = false;for(var j=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;}var outputN = document.getElementById("Text2");outputN.setAttribute("value",ary);}(2)用JS写出图片幻灯切换效果。