DIVCSS网页设计规范总结_第1页
DIVCSS网页设计规范总结_第2页
DIVCSS网页设计规范总结_第3页
DIVCSS网页设计规范总结_第4页
DIVCSS网页设计规范总结_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

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

文档简介

1、div+css布局的好处1内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给css来处理。 生成的html文件代码精简，更小打开更快。2改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何html 和程序页面，只需要改动css文件就完成了所有改版。对于门户网站来说改版就像换件衣 服一样简单容易。3搜索引擎更友好，排名更容易靠前。第一内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给css来处 理。生成的html文件代码精简，更小打开更快。这个是div+css技术最现著的特点，也是css存在的根源。完全的颠覆现在传统 (table)网页设计的技术。所有现在用t

2、able制作的内容，都可以用css来解决掉，而且解 决的更完美，更强大。不需要大家再表格套表格，只需要用div套div就可以实现以往表格 套表格所有的美工，这样的结果就是使用div+css技术，让生成的网页文件大小更精简， 更小ctable时代，一个页面表格达到10个以上是非常普遍的事情，但是现在用div+css, 一个table都可以不用，就完全达到之前的效果，这就直接导致网页文件大小比使用table 时减少50%-80%,更节约各位站长的硬盘空间，访问者打开网页时更快,而且用div+css 时，不像以往使用table时，必须把全部table读取完了才显示页面内容，现在是可以读一 个div就

3、显示一个效果，大家打开网页不用等。好处真是明显而强大。这个优点的确是显著的，凡是使用传统table建的网页，内容多的话，有时候达到30k 左右都有可能，文件打了打开时，肯定就有0.0儿秒的延迟。使用div+css,由于没有表 格使用，你前台打开看到的全是直接内容，css文件都是导入链接的，是另一个文件，根 本和html文件大小没关系，这种生成的html文件，一个也就10k左右大小。文件数量 少时看不出来，但是文件万级以上时，还是会节约儿十m大小的。但是使用table制作网页框架和表格时，全是选择化制作的，也就是说不用大家去写代 码，很简单输入边框和行数列数就可以达到制作出来的要求，但是使用di

4、v+css时，完全 是靠手写代码，一个表格写四行代码的话，如果一个页面涉及十多个div表格生成，手写代 码将超过50行，而且如果你数学不好，或是逻辑思维能力不强的话，你手写出来的表格将 是乱78糟，出现表格重叠和位置完全不正确。因为用div+css写表格时，表格间的逻辑 排列关系完全是靠自己手写代码判断，如果你没有很强的手写代码能力和逻辑性，你所花费 的时间，比你用table制作时间至少是4倍左右。基本上一个页面定义的id和class类， 完整页面是不会少于20个的，一个id或class手写5句，你制作一个html页面将超过 100句代码，当然其中很多是对以存成一个css文件來重复调用的。也就

5、是说相同的页面 内容的话，排版一样的情况下，可以直接导入链接css来实现。这个就很像之前生成html时，制作一个网页模板。但制作这个模板花的时间是用 table制作时的几倍。这里有些人要说，但是我改版的时候，就只需要再写一个css就可以 了，不用再生成htmlto那么我要说，当你再写一个css文件改版时，我可能都己经用 table制作好一个页面模板，而且还自动生成html全站的页面了。这不是不可能的。第二点 改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何 html和程序页面，只需要改动css文件就完成了所有改版。div+css对于门户网站来说改版就像换件衣服一样简单容易，

6、改版时，不用改动全 站html页面，只需要重新写css,再用新css覆盖以前的css就可以实现改版了。方 便吧。第三点搜索引擎更友好，排名更容易靠前。div+css需要注意的问题1. 检查html元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。2. 检查css是否正确检查一下有无拼写错误、是否忘记结尾的等。3. 确定错误发生的位置假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常, 即可确定错误发生的位置。4. 利用border属性确定出错元素的布局特性使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界

7、，错误 原因即水落石出。5. float元素的父元素不能指定clear属性假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。6. float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何, 一定要为其指定width属性。7.是否重设了默认的样式？某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的 margin、padding设置为0、列表样式设置为none等。css书写规范及方法一. 常规书写规范及方法1. 选择 doctype：xhtml

8、1.0提供了三种dtd声明可供选择：过渡的(transitional):求非常宽松的dtd,它允许你继续使用html4.01的标识(但是 耍符合xhtml的写法)。完整代码如下：<! doctype html public “-/w3c/dtd xhtml 1.0 transitional/en, u/tr/xhtml1/dtd/xhtml1-transitional.dtd*>严格的(strict):要求严格的dtd,你不能使用任何表现层的标识和屈性，例如vbr>。完 整代码如下：<! doctypehtml public “"

9、;/w3c/dtd xhtml 1.0 strict/enmuhttp :/www. /tr/xhtml1/dtd/xhtml1-strict.dtdu>框架的(frameset)针对框架页面设计使用的dtd,如果你的页面中包含有框架，需 要采用这种dtdo完整代码如下：<! doctype html public “-/w3c/dtd xhtml 1.0 frameset/enn “/tr/xhtml1/dtd/xhtml1-frarneset.dtcta理想情况当然是严格的dtd,但对于我们大多数刚接触web标准的设计师來说，过渡的d

10、td(xhtml 1.0 transitional)是目前理想选择(包扌舌本站，使用的也是过渡型dtd)。因 为这种dtd述允许我们使用表现层的标识、元素和属性，也比较容易通过w3c的代码校 验。2. 指定语言及字符集：为文档指定语言：<html xmlns=,/1999/xhtmr, lang=,en,>为了被浏览器正确解释和通过w3c代码校验，所有的xhtml文档都必须声明它们所使用的编码语言；女口：常用的语言定义：<meta http-equiv=m content-type" content=” text/html; char

11、set=utf-8，/ />标准的xml文档语言定义：<?xml version=”1.0" encoding=” utf-87 ?>针对老版本的浏览器的语言定义：<meta http-equiv=n content-languagen content=” utf-8/>为提高字符集，建议采用“utf8” o3. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的head|x0如：<style type=,text/css,x- body background : white ; color : black ; -> &l

12、t;/style>外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码 调用。<link rel=''stylesheet" rev=,stylesheetm href=”css/style.css" type=,text/cssn media=,air, />在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变 页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所 有文件的样式。4、选用恰当的元素：根据文档的结构来选择html元素，而不是根据htm

13、l元素的样式来选择。例如，使用p 元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑 使用通用的div或者是span；避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清 晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小 巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainmenu ul li background:url(images/bg.gif

14、;)6、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作为页面耍表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过css样式来进行改动， 如：#logo background:url(images/logo.jpg) #fefefe no-repeat right bottom;7、结构与样式分离：在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用css样式表來实现结构与样式的分离。&文档的结构化书写：页面css文档都应采用结构化的书写方式，逻辑清晰易于阅读。女山<div id=,mainmenu,>&l

15、t;ul><lixa href' #” >首页v/ax/li><lixa href=” #” >介绍v/a>v/li><lixa href=” #” >服务</ax/li></ul></div>/*=主导航=*7#mainmenu width:100%;height:30px;background:url(images/mainmenu_bg.jpg) repeat-x;#mainmenu ul li float: left;line-height:30px;margin-right:1px

16、;cursor:pointer;/*=主导航结束=*/9、鼠标手势：在xhtml标准中，hand只被ie识别,当需要将鼠标手势转换为“手形”时，则将“hand”换为 “pointer” ,即 “cursor:pointer;”二. 注释书写规范1、行间注释：直接写于属性值后面，如：.searchborder:1 px solid #fff;/*定义搜索输入框边框*/background:url(./images/icon.gif) no-report #333;/*定义搜索框的背景*/2、整段注释：分别在开始及结束地方加入注释，如：/*=搜索条=*/.search border:1px sol

17、id #fff;background:url(./images/icon.gif) no-repeat #333;/*=搜索条结束=*/三. 样式属性代码缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合 并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并 易于控制。如：#mainmenu background :url(./images/bg.gif);border:1px solid #333;width:100%;height:30px;overflowzhidden;#submenu b

18、ackground :url(./images/bg.gif);border:1px solid #333;width:100%;height:20px;overflowzhidden;两个不同类的属性值有重复之处，刚可以缩写为：#mainmenu5#submenu background :url(./images/bg.gif);border:1px solid #333;width:100%;overflowzhidden;#mainmenu height:30px;#submenu height:20px;2、同一属性的缩写：同一属性根据它的属性值也可以进行简写，如：.search ba

19、ckground-color: #333;background-image :url(./images/icon.gif);background-repeat: no-repeat;background-position :50% 50%;.search background:#333 url(./images/icon.gif) no-repeat 50% 50%;3、内外侧边框的缩写：在css中关于内外侧边框的距离是按照上、右、下、左的顺序來排列的，当这四个屈性值不同时也可直接缩写，如：.btn margin-top:10px;margin-right:8px;margin-bottom

20、:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom :12px;padding-left:8px;则可缩写为:.btn margin:10px 8px 12px 5px;padding:10px 8px 12px 5px;而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如:.btn margin-top:10px;margin-right:5px; margin-bottom :1 opx;margin-left:5px;缩写为:.btn margin:10px 5px;而

21、当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如:.btn margin-top:10px;margin-right:1opx;margin-bottom :1 opx;margin-left:1opx;缩写为：.btnmargin:10px;4、颜色值的缩写：当rgb三个颜色值数值相同时，可缩写颜色值代码。如:.menu color:#ff3333;可缩写为：.menu color:#f33; 四.hack书写规范因为不同浏览器对w3c标准的支持不一样，各个浏览器对于页而的解释呈视也不尽相同， 比如ie在很多情况下就与ff存在3px的差距，对于这些差异性，就需要利用css的hac

22、k 来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而 导致页而出现问题。1、ie6、ie7、ie8、ie9、firefox 之间的兼容写法:写法一：ie都能识别七标准浏览器（如ff）不能识别jie6能识别=但不能识别iimportant,ie7能识别=也能识别iimportant;ie8能识别=也能识别0;ie9能识别=也能识别90;ff不能识别*,但能识别iimportant;根据上述表达，同一类/id下的css hack可写为: .searchinput background-color :#333;/*h 者皆“广/*background-color:

23、#666 'important; /*仅 ie7*/ *background-color:#999; /*仅 ie6 ie7 */ background-color:#999; /*仅 ie6*/ background-color:red0;ie8 和 ie9 都支持； background-color:blue90;仅 ie9 支持；一般三者的书写顺序为：ff、ie7、ie6.写法二ie6可识别，而ie7及ff皆不能识别，所以当只针对ie6与ie7及ff之间的区别时，可这样书写：.searchinput background-color :#333;/通用 */_background

24、-color:#666;/*仅 ie6 可识别*/写法三：*+html与*html是ie特有的标签，firefox暂不支持。.searchinput background-color:#333;*html .searchinput backgroundcolor:#666;/*仅 ie6*/*+html .searchinput background-color:#555;/*仅 ie7*/屏蔽ie浏览器：select是选择符，根据情况更换。第二句是mac上safari浏览器独有的。*:lang(zh) select font:12px iimportant; /*ff 的专用*/select

25、zempty font:12px iimportant; /*safari nj'£*/ie6 nf识别：这里主要是通过css注释分开一个属性与值，注释在冒号前。select display /*ie6 不识别*/:none;2、清除浮动：在firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时 用这个清除浮动的hack来对父级做一次定义，那么就可以解决这个问题。select:after content:"."displayzblock;heightzo;clear :both;visibilityzhidden;css+di

26、v标签命名规范页头:header背录条zloginbar标志:logo侧栏:sidebar广告:ba nner导航:nav子导航:subnav菜单:menu子菜单:submenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表：list提示信息:msg 小技巧:tips栏目标题:title友情链接:friendlink页脚:footer力口 azjoinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyri

27、ght1.cssid的命名外套:wrap主导航:mainnav子导航:subnav页脚:footer整个页面:content页眉：header页脚:footer商标zlabel标题:title主导航:mainnav(globalnav)顶导航:topnav边导航:sidebar左导航 zleftsidebar右导航:rightsidebar旗志:logo标语:banner菜单内容 1:menul content菜单容 mzmenucontainer子菜单:submenu边导航图标:sidebaricon注释:note容器:contai ner内容:content搜索 zsearch登陆zlog

28、in功能区:shop（如购物车，收银台）当前的currentdiv+css网页设计规范1、网页html代码最前面必须包括w3c声明，以便符合标准： 一般网页：<!doctype html public”/w3c/dtdxhtml 1.0 transitional/en"',http:/www. /tr/xhtml 1 /dtd/xhtml 1 -transitional.dtd"><html xnilns=h/1999/xhtmr,>框架页：<! doctype html public”j/w

29、3c/dtdxhtml 1.0 frameset/enh"/tr/xhtml 1/dtd/xhtml 1 frameset.dtd"><html xmlns=n/1999/xhtml">2、网页编码声明：简体中文网页为gb2312<meta http-equiv=mcontent-typeh content=mtext/html; charset=gb2312m />繁体中文网页为big5<meta http-equiv=hcontent-typeh content

30、=ntext/html; charset= big5m />英文网页为utf8<meta http-equiv=hcontent-typem content=ntext/html; charset= utf-8h />3、釆用css链接方式，全站使用同一个css文件，实现内容与表现分离：<link href=himages/style.cssn iel二"stylesheet" type=ntext/cssh>不要将样式直接写在页面html代码中，页面中不得使用vfontx/font>、<style>等标签。4、css文件屮需

31、要对一些基本的标签进行定义或重置：*padding:o;margin:0;body,td,th,div font-family:宋体；font-size: 12px;color: #000000;body background:#ffffff;p（line-height: 150%;a:link color: #000000;text-decoration: none;a:visited color: #000000;text-decoration: none;a:hover color: #ff()()()o;text-decoration: underline;a:active color

32、: #000000;text-decoration: none;hlcolor:#000000;line-height: 150%;font-size:24px;iilist-style:none;word-break: keep-all;white-space: nowrap;5网页设计完成后，必须分别在internet explorer 6.0和firefox3.0进行兼容性测试，确保页 面表现在这两个主流浏览器中保持完全一致，无错位、重叠现象。6、解决兼容性问题常用css代码有：1) div对齐方式有居左、居中、居右三种方式，居中的要清除浮动：clear:both;否则就会有 重叠现象。

33、2) 隐藏超出部分：overflow:hidden;3) 设置固定宽度：width: 100pxo除特殊需要外，div 一般不设置高度，宽度、髙度不能使 用百分比，以免在各浏览器中出现较大误差。4) 给 div 临时加边框：border:ipx solid;5) 用jimportant;为 ie 和 ff 设置不同样式,如：width: 100px!important; width: 102px;前面是 ff样式，后面是ie样式。6) 判断ie浏览器版本调用不同的样式表。<!-iflte ie 6><link rel二"stylesheet" type二&

34、quot;text/css” hre仁"images/css.css" /><!endif|>v!if 1e7><link rel=nstylesheeth type=htext/cssm hre仁himages/css2.cssn /><!endifj><!-if ie 8><link rel=hstylesheeth type=htext/cssh href=,images/css3.cssm /><!endif>7）屏蔽ie7。<meta http-equiv=,fx-ua-co

35、mpatibleh content=uie=emulateie7h />7、信息列表用ul,li形式，减少代码冗余。如：<div><ul><lix/li></ul></div>8、w3c验证。通过w3c组织官方网站可以验证css是否符合标准，网址是： /css-validatoi7checkaeferer1）所有标签都必需使用小写2）所有标签内之屈性都要有值且不可省略双引号或单引号3）所有标签必须成对，若非成对需加上/在最后4）一个网页最少要包含的标签<html><head

36、><meta http-equiv=ncontent-typeh content=mtext/html; charset= gb2312h /><title> 标题 </title></head><body>内容</body></html>5）若要显示<、>、&的话，需输入：&lt;&gt; 若要显示&于网页中的话，则需输入：&amp;6）标签顺序不可错乱，应该是：<b><p>文字</p></b>7）注释文

37、字中不可包含，html注释形式：v!注释文字>,css注释形式：/*注释文 字*/在页而中除了开始、结束、javascript代码处需要加一些必要的注释外，其他地方尽量少写 注释，有时注释太多也会引起一些问题。在样式表中可以适当加些注释，简要说明样式的用途、范围等。8、页面引用样式时使用class二” sty lei",而不是id二” stylcl",把id留给程序员使用，提高样 式可重用性，减小css文件体积。9、html代码要适当缩进（可在代码前按tab键，或页面全部做完后，在dw代码视图屮执行“套用源格式”，不要有空白行。4-s242526<div cla

38、ss二"bgg"><table width二"950" border二"d" cellspacing二"o' <!dwl ayouttable>套用源格式(将源格式应用于选定内客(e)rl zu i n代码格式设置 編辑标签库 枚才u10、网页屮图片的使用。1) 网页中最好使用gif、jpg格式图片，由于png图片在浏览器中的兼容性还有问题，故不 建议使用。2) 栏目标题背景、圆角背景、边框背景、标题前的icon图标等可以写在background:url(); 里。3) 网站logo、more

39、 new hot、广告位等图片需使用<img>标签，以便为其添加链接。11、网页整体必须在浏览器中居中显示,即：div margin:。auto;。12、如果网页中同时有飘浮图片、下拉菜单、弹出对话框、flash,前三者耍位于flash ±方。 需在flash中加以下透明代码：<param name二"wmode” value=',transparent',> /ie<embed wmode="transparent"> /firefox13、设置网页滚动条的样式：html scrollbar-face

40、-color:#f6f6f6;scrol lbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#0()0;scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;14、英文、数字在ff下不自动换行，需加以下代码：word wrap: break word;15、注意水平、垂直方向的对齐、留白问题。16、网页宽度。一般窄屏宽为760px,宽屏为950px。17、样式的

41、命名应该符合语义化耍求，即一看样式名就可知道这个样式大概用在什么地方、 有什么用途，方便以后调用、维护。如顶部样式则为.headero技巧代码1 控制横向和纵向滚动条的显隐？<body style=hoverflow-y:hiddenh> 去掉 x 轴<body style=hoverflow-x:hiddenh> 去掉 y 轴<body scroll=fo”>不显2表格变色<tdonmouseout=mthis.style.backgroundcolor=fmtstyle=,cursor: handu>3. 禁止复制，鼠标拖动选取<bod

42、yondragstart=window.event. returnvalue=falseoncontextmenu=window.eve ntreturnvalue=falseonselectstart=event.returnvalue=false>4普通iframe页面<iframe name=,'namen src=,main.htmn width=450, height=h287nscrolling=hauton frameborder=nohx/iframe>5.iframe自适应高度<iframe src=,findex.asp,f framebor

43、der=false scrolling=,fautofl width=,f100%lf height=m100%n frameborder=no ></iframe>6.ie地址栏前换成自己的图标&可以在收藏夹中显示出你的图标<link rel="shortcut icon" href=nfavicon.icoh><link rel=nbookmarkn href=mfavicon.icon>7字号缩放 越来越多的人长时间的泡网，眼镜的普及率也越來越高，让文字大点，让更多的用户看的更 清楚。<script type=,

44、ftext/javascript,f>function dozoom(size)document.getelementbyld(fzoom,).style.fontsize=size4-fpxf;</script><span id=,zoom,>需要指定大小的文字</span><ahref=,fjavascript:dozoom(16),f>大v/a><ahref=,fjavascript:dozoom(14)f,>中</$：> <a href=njavascript:dozoom(12),f>小

45、</a>8.简单的跳转网页代码如果你要让页面显示3秒钟之后跳转，可以在html代码的vheadx/head>部分加上这样的代码：<meta http-equiv=mrefreshn content=,f3; url=h>9.iframe(嵌入式帧)口适应高度填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！ ”。对跨域引用 有权限问题，请查阅其他资料。<iframe name=mguestbook,f src=hgbook/index.aspn scrolling=no width=n100%”height=n100%“frameborder

46、=noonload=,ldocument.allfguestbook1.style. height=guestbook.document.body.s crollheightmx/iframe>10.跳转菜单新窗口<selectname=hselecthonchange=hwindow.open(this.optionsthis.selected index.value)h><option value=h in ternet explorer</option><option value=hlf> microsoft home</option

47、><option value=,'n> developer network</option></select>11 .flash透明选项<param name=,wmodeh value=ntransparent”a12 添加到收藏夹和设为首页<a href=# >设为首页v/a><a href=,javascript:window.external.addfavorite(,站长设计网')"> 收藏本站v/a>13 .记录并显示网页的最后修改时间<script ianguage

48、=javascript>document.write("最后更新时|司：” + documentastmodified +</script>14.节日倒计时<script language=,javascript,>var timedate= new date(noctober 1,2002”)；var times= ”国庆节”;var now = new date();var date = timedate.gettime() - now.gettime();var time = math.floor(date / (1000 * 60 * 60 *

49、24);if (time >= 0)document.write("现在离”+times+”还有：”+time +”天”)</script>15加在head里禁止缓存<meta http-equiv=hexpiresh content="0”><meta http-equiv=,cache-contror, content=,no-cache,><meta http-equiv=,pragmam content=,no-cache,>16.让iframe框架内的文档的背景透明<iframesrc=habout :&

50、lt;bodystyle=fbackground:tra nsparent'”allowtra nsparency>v/iframe>17 打开窗口即最大化<script language=f,javascript,f> beginself.moveto(0,0)self. resizeto(screen.availwidth,screen.availheight)/ end -> </script>18加入背景音乐 <bgsound src=f,mid/windblue1.midlf loop=,-1h> 只适用于 ie<e

51、mbed src=,fmusic.midn autostart=htruef, loop=ntruen hidden=ntruem> 对netscape ,ie 都适用19 滚动<marquee direction=up height=146 onmouseout=start() onmouseover=stop()scrollamount=2> 滚动信息</marquee>20.防止点击空链接时，页面往往重置到页首端代码"javascript:void(null)”代替原来的“#”标记21 .文字或图片弹出指定大小的窗口在body中加入<scri

52、pt ianguage=njavascriptn type=,text/javascriptn>functionmm_openbrwindow(thellrl,winname,features)window.open(theurl,winname,features);</script>弹出代码<ahref=h#ntarget=h_selfmonclick=mmm_openbrwi ndow('windows01 .htm,/,/width=550,height=380,)h width=”550” height=m380u border=hon>图片或文字

53、v/a>22 .跳转页面代码<meta httpequiv=''refresh'' content=n5;url='*>23.细线分隔线<hr noshade size=o color=#cococo>24.网页中的自动换行<td style="word七reak:break-all">就搞定了。完整的是word-wrap:style=f,table-layout:fixed; word-break:break-all;break-wordh25消除ie6自动出现的图像工具栏,设置galler

54、yimg属性为false或no .<img src=nmypicture.jpgh height=”100px” width=”1 oopx”galleryimg=tfno,l>26禁止页面正文内容被选取<body oncontextmenu=hreturn false11 ondragstart=hreturn false11 onselectstart =hreturnfalse*1onselect=hdocument.selection.empty ()noncopy=hdocument.selection.empty()n onbeforecopy=11 return

55、 falsef,onmouseup=ftdocument.selection.empty ()h>27.不能点右键，不用ctrl+a,不能复制作！<body one on textmenu=hwindow.event. returnvalue=falselfon keypress=hwindow.event. returnvalue=falsen onkeydown=,fwindow.event.returnvalue=falseh onkeyup=f,window.event, return value=false,f ondragstart=f,window.event.ret

56、urnvalue=false,t on selectstart=f,event.returnvalue=falsem></body>2&ie浏览器支持一个body属性bgproperties,它可以让背景不滚动: <body background=''图片文件” bgproperties=,fixed,>29.随机变换背景图彖(一个可以刷新心情的特效)<script language=mjavascriptm>image = new array(4); 定义image为图片数量的数组image 0 = 'tuo.gif&

57、#39; 背景图象的路径image 1 = *tu1 .gif'image 2 = *tu2.g讦，image 3 = *tu3.gifimage 4 = 'tu4.gifnu mber = math.floor(math.random() * image length);document.write("vbody background="+imagenumber+”：>”);</script>30图片表单按钮 <form id=ftform1m name=hform1h method=nposth action=fmf>hei

58、ght=h22h<imgsrc=nlogin.girwidth=n62nonclick=hdocument.form1 .submit()f, /></form>31 .左右阴影背景的css定义方法body text-align:center;background-repeat: repeaty;background-position: center;background-image: url(./images/bg.jpg);32. 划过链接手型鼠标style=f,cursor:ha nct33. 如何关闭层<div id=fllayer1 ffx/div><a href=,f#lf onclick=hlayer1.style.display=,nonef,f>关闭层v/a>34.关闭窗口的脚本<a href=javascript:close()>关闭窗口v/a>35 .如果文字过长，则将

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

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

最新文档

评论

0/150

提交评论