由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,就需要统一class与id的名称,前天花了一点时间,按照大多人的习惯,制定了下面的常用关键字: 容 器:container/box 头 部:header 主 导 航:mainNav 子 导 航:subNav 顶 导 航:topNav 网站标志:logo 大 广 告:banner 页面中部:mainBody 底 部:footer 菜 单:menu 菜单内容:menuContent 子 菜 单:subMenu 子菜单内容:subMenuContent 搜 索:search 搜索关键字:keyword 搜索范围:range 标签文字:tagTitle 标签内容:tagContent 当前标签:tagCurrent/currentTag 标 题:title 内 容:content 列 表:list 当前位置:currentPath 侧 边 栏:sidebar 图 标:icon 注 释:note 登 录:login 注 册:register 列 定 义:column_1of3 (三列中的第一列) column_2of3 (三列中的第二列) column_3of3 (三列中的第三列) 转自:http://www.lanrentuku.com/lanren/superlazy/20070526/superlazy182717.html
View Details1.样式命名外 套: wrap主导航: mainnav子导航: subnav页 脚: footer整个页面: content页 眉: header页 脚: footer商 标: label标 题: title主导航: mainbav(globalnav)顶导航: topnav边导航: sidebar左导航: leftsidebar右导航: rightsidebar旗 志: logo标 语: banner菜单内容1: menu1 content菜单容量: menu container子菜单: submenu边导航图标:sidebarIcon注释: note面包屑: breadcrumb(即页面所处位置导航提示)容器: container内容: content搜索: search登陆: Login功能区: shop(如购物车,收银台)当前的 current 2.另外在编辑样式表时可用的注释可这样写:<-- Footer -->内容区<-- End Footer --> 3.样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css http://www.lanrentuku.com/lanren/superlazy/20070419/000757.html
View Details门户网站 portals website 网站导航 site map 公司简介 profile / company profile / company 公司设备 equipment 公司荣誉 glories 企业文化 culture 产品展示 product 资质认证 quality certification 企业规模 scale 营销网络 sales network 组织机构 organization 合作加盟 join in cooperation 技术力量 technology 经理致辞 managers oration 发展历程 development history 工程案例 engineering projects 业务范围 business scope 分支机构 branches 供求信息 supply & demand 经营理念 operation principle 产品销售 sales 联系我们 contact us 信息发布 information 返回首页 homepage 产品定购 order 分类浏览 browse by category 电子商务 e-business 公司实力 strength 版权所有 copy right 友情连结 hot link 应用领域 application fields 人力资源 human […]
View DetailsPNG图像格式介绍: PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可 存储多到16位的α通道数据。 IE6下PNG背景透明的显示问题 PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多,目前,最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明,会显示一个灰色的框。 IE6下PNG背景透明的解决办法 .pngImg { background:url(image.png); _background:url(image.gif);} 注意上文的_号,目前IE7,8以及Firefox浏览器等都不支持此CSS语法,只有IE6识别。因此,其他浏览器会调用PNG,而IE6刚调用GIF。 二.滤镜filter解决IE6下背景灰 background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop"); 上面的原理是其他调用PNG,IE6,则先设背景没有,然后调用滤镜使之显示PNG图片。 缺陷:IE6下背景无法平铺,这个问题很严重。同时在性能上也有小问题,页面中次数不是很多的时候该办法还是可行的。 AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。 解决IE下的链接无效可用最后面的方法: 三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题 页面中插入一段js即可。原理同上,只是将img标签用<span>标签替换掉,并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。<!--[if IE 6]> <script>function correctPNG() {for(var i=0; i<document.images.length; i++){var img = document.images[i];var imgName = img.src.toUpperCase();if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){var imgID = (img.id) ? "id=’" + img.id + "' " : "";var imgClass = (img.className) ? "class=’" + img.className + "' " : "";var imgTitle = (img.title) ? "title=’" + img.title + "' " : "title=’" + […]
View Details强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-break:break-all;}
View Details设置为首页: <a href="#" onClick="this.style.behavior=’url(#default#homepage)';this.setHomePage('这里面写上你自己主页就可以了')">设置为首页</a> 个人理解:其中behavior是css属性,设置url为ie默认(default)动作。setHomePage是设置或返回主页的路径。 加入收藏夹 <a href="javascript:window.external.AddFavorite('这里面写上要加入收藏夹的地址就可以了', '收藏夹里显示的文字描述信息');">加入收藏夹</a>
View Details1.window.event.keyCode的用法: 例子、<input type="text" onkeydown="javaScript:if(window.event.keyCode==13) kenNumIE();" /> <script language="javascript" type="text/javascript"> function kenNumIE(){ alert("你按的是回车键!"); } </script> 但是该方法只对IE有效,原因是Firefox的window对象没有event属性,所以window.event是不存在的,Firefox只能在事件句柄函数的第一个参数获取事件对象。2.兼容Firefox的方法:<input type="text" onkeydown="return keyNumAll(event);" > <script language="javascript" type="text/javascript"> function keyNumAll(evt){ var k=window.event?evt.keyCode:evt.which; if(k == 13){ alert("你按的是回车键!"); } } </script> 这样,当你按回车键时,就可以触发keyNumAll(event)事件了。 附:window.event.keyCode 集合(键盘字符的Ascii): XML/HTML代码 Ascii 代码表 Ascii 0 {Nulo, Sem Som} Ascii 1 Ascii 2 Ascii 3 Ascii 4 Ascii 5 Ascii 6 Ascii 7 Ascii 8 {BackSpace} Ascii 9 {Tab} Ascii 10 Ascii 11 Ascii 12 Ascii 13 {Enter} Ascii 14 Ascii 15 Ascii 16 {Shift} Ascii 17 {CTRL} Ascii 18 {ALT} Ascii 19 Ascii 20 {CapsLock} Ascii 21 Ascii 22 Ascii 23 Ascii 24 Ascii 25 Ascii 26 Ascii 27 Ascii 28 Ascii 29 – Ascii 30 – Ascii 31 Ascii 32 {Espa?o} ! Ascii 33 " Ascii 34 # Ascii 35 $ Ascii 36 % Ascii 37 & Ascii 38 ' Ascii 39 ( Ascii 40 ) Ascii 41 * Ascii 42 + Ascii 43 , Ascii 44 – Ascii 45 . Ascii 46 / Ascii 47 0 Ascii 48 1 Ascii 49 […]
View Detailsie,chrome可能通过JS的onselectstart 例如代码如下:<body onselectstart="return false"> firefox可以通过CSS 代码如下: *{ -moz-user-select:none }
View Details最重要的三段代码如下: view plaincopy to clipboardprint?01.<mce:script type="text/javascript"><!-- 02. 03. var HKEY_Root,HKEY_Path,HKEY_Key; 04. HKEY_Root="HKEY_CURRENT_USER"; 05. HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; 06. //设置网页打印的页眉页脚为空 07. function PageSetup_Null() 08. { 09. try { 10. var Wsh=new ActiveXObject("WScript.Shell"); 11. HKEY_Key="header"; 12. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 13. HKEY_Key="footer"; 14. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 15. } catch(e){} 16. } 17. //恢复网页打印的页眉页脚 18. function PageSetup_default(){ 19. try { 20. var Wsh=new ActiveXObject("WScript.Shell"); 21. HKEY_Key="header"; 22. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P"); 23. HKEY_Key="footer"; 24. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d"); 25. }catch(e){} 26. } 27. function printsetup(){ 28. // 打印页面设置 29. wb.execwb(8,1); 30. } 31. function printpreview(){ 32. // 打印页面预览 33. PageSetup_Null(); 34. wb.execwb(7,1); 35. } […]
View Details浏览器窗口宽:document.documentElement.clientWidth 浏览器窗口高:document.documentElement.clientHeight 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 IE,FireFox 差异如下: IE6.0、FF1.06+: clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5: clientWidth = width – border clientHeight = height – border offsetWidth = width offsetHeight = […]
View Details