一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

元素的class与ID命名常用关键字

由于项目中编写文档结构、编写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

龙生   08 Jun 2011
View Details

CSS样式命名规则(仅供参考)

1.样式命名外 套:  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

龙生   08 Jun 2011
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 […]

龙生   08 Jun 2011
View Details

使IE6下PNG背景透明的七种方法任你选

PNG图像格式介绍: 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=’" + […]

龙生   01 Jun 2011
View Details

css实现强制不换行/自动换行/强制换行

强制不换行 div{white-space:nowrap;}  自动换行 div{ word-wrap: break-word; word-break: normal; }  强制英文单词断行 div{word-break:break-all;}

龙生   28 May 2011
View Details

JS 设置为首页和加入收藏夹

  设置为首页:  <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> 

龙生   21 Apr 2011
View Details

window.event.keyCode兼容Firefox

1.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   […]

龙生   04 Jan 2011
View Details

禁止选择功能实现代码(兼容IE/Firefox/Chrome)

ie,chrome可能通过JS的onselectstart 例如代码如下:<body onselectstart="return false"> firefox可以通过CSS 代码如下:  *{ -moz-user-select:none }

龙生   05 Nov 2010
View Details

web打印控件与分页

最重要的三段代码如下: 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.   }    […]

龙生   03 Sep 2010
View Details

javascript获取屏幕,浏览器,网页高度宽度

浏览器窗口宽: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 = […]

龙生   09 Jun 2010
View Details