web前台
关注
分享
扫一扫
文章平均质量分 60
keliteWang
这个作者很懒，什么都没留下…
展开
-
jquery 选择器
<br />jquery使用和CSS类似的选择器,jquery必须在获得元素后才能生效。使用jquery选择器不用考虑浏览器的兼容性问题。<br />一、jquery选择器的优势<br /> 1、简洁<br /> Write less，do more！javascript中的getElementById()可以通过$("#id")来代替以选中标签。getElementByTagName()可以通过$("tagName")代替等等。<br /> 2、支持CSS1-CSS3的选择器<br /> 3、完原创 2010-12-17 21:21:00 · 896 阅读 · 0 评论 -
打造自己的reset.css
<br /> <br />最近我对此观点有所新的看法，可以查看《真的还需要reset.css么？》<br />0，引言<br />每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。reset.css本意就是重置样式，我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进ty原创 2011-04-21 23:49:00 · 666 阅读 · 0 评论 -
简洁高效CSS原则
<br />CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：<br />1. 使用Reset但并非全局Reset<br /> 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：<br />view sourceprint?<br />*{ margin:0; padding:0; } <br原创 2011-04-21 22:16:00 · 834 阅读 · 0 评论 -
html 的http-equiv 标签的定时刷新功能
<br /> <br /> <br />html 的http-equiv 标签 自身有定时刷新功能,很强大<br />今天看到一个页面，打开后没几秒自动跳转了，我的第一反应就是里面肯定含有setTimeout之类的方法，但是看了页面源码后，里面根本没有包含JS文件,也没有写JS代码,一下子引起了我的兴趣.<br /><meta http-equiv=”refresh” content=”10; ,URL=/2010registration.html”><br />，meta原来这么强大。下面说将说一原创 2011-04-21 22:25:00 · 1255 阅读 · 0 评论 -
表格隔行换色
<br /> 网上很多关于表格隔行变色的方法，其实很多都是只能在IE内核浏览器下实现效，别的内核浏览器表现不出来。此文五种表格隔行变色的方法兼容所有现代浏览器(很久以前的古董浏览器未测试过)。 方法一：使用th与td标签控制隔行变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xml原创 2011-04-21 23:00:00 · 1818 阅读 · 1 评论 -
CSS的块元素和内联元素
<br />块元素即为容器，它默认不允许与其他块元素同处一行，高度、宽度起作用<br />内联元素 默认与其他内联同在一行，高度、宽度不起作用。（让内联元素的高度、宽度起作用的方法即为将其转换为块元素 display:block;）<br /><br />块元素(block element)<br />address - 地址<br />blockquote - 块引用<br />center - 举中对齐块<br />dir - 目录列表<br />div - 常用块级容易，也是CSS layout的主要原创 2011-04-22 23:56:00 · 1293 阅读 · 0 评论 -
CSS常用命名
页面模块的常用命名[quote] 头：header 内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动原创 2011-04-22 23:19:00 · 553 阅读 · 0 评论 -
CSS在IE6浏览器中的bug及解决办法收集
<br />1、双倍边距bug<br /> bug出现的状况： <br /> 满足下面3个条件才会出现这个BUG:<br /> 1）要为块状元素；<br /> 2）要左侧浮动；<br /> 3）要有左外边距(margin-left)； <br /> 解决办法：<br /> 只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：<br />#redBlock{<br />width:200px;<br />height:200px;<br /原创 2011-04-23 01:25:00 · 699 阅读 · 0 评论 -
CSS布局中的定位position
<br />如果页面内某个元素没有设定position属性，那么他具有position属性，并且属性值是static。原因在于网页里任一元素的默认position属性值均是static（静态）。<br /> <br />【position:absolute】<br />意思是：绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。<br />例子<br />制作一宽度为200px，高度为200px，背景色为红色(#900)的方块，距离浏览器左侧220转载 2011-04-23 01:29:00 · 1813 阅读 · 3 评论 -
垂直居中的两种实现方法
方法一：利用行高（line-height）定位<br /><br />line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器的高度也为500px，同样可以实现垂直居中，但是用它来实现垂直居中，也是有缺点的，就是如果内容过多，文字就会跑到下一行，那么内容就不可能垂直居中了。<br /><br />HTML代码：<br /><br /><h1>Hi, I'm<s转载 2011-04-23 01:42:00 · 929 阅读 · 0 评论 -
JavaScript中OnLoad用法
JavaScript中OnLoad用法在前几个项目的开发中 遇到onload使用的几种情形1. 可以在Body 里面执行 2. 先定义好 在页面加载完成后 使用 function test原创 2011-08-20 16:03:19 · 1393 阅读 · 0 评论 -
CSS网站布局十步之第九步
<br />第九步：导航条的制作<br /><br /> 导航条之所以放在第九步讲，是因为导航条制作是本教程中最难的部分，自然也是技术含量最高的地方.导航条的制作可易可难，但这里介绍的相对较难，您能坚持到这一步已经很不易，如果你只是有个导航条就满足的话，请参看第八步的副导航条的制作。<br /> 先去掉导航条的红色背景，还有就是移除html文件中main-nav层的"class="hidden"",使导航条的内容显示出来。我们实现导航条图片的变换的方法是纯css代码的，不包含任何js或是原创 2011-04-21 23:25:00 · 813 阅读 · 0 评论 -
CSS网站布局十步之第八步
<br />第八步：页脚信息的表现设置<br /><br /> 首先需要控制页脚的文本显示：<br /> Example Source Code [www.52css.com]#footer {<br />clear: both;<br />height: 66px;<br />font-family: Tahoma, Arial, Helvetica, Sans-serif;<br />font-size: 10px;<br />color: #c9c9c9;<br />原创 2011-04-21 23:24:00 · 684 阅读 · 0 评论 -
CSS网站布局十步
<br />首先需要规划网站，本教程将以下图为例构建网站。 <br /><br /><br /><br /> 其基本布局见下图：<br /><br /><br /><br />主要由五个部分构成： <br /><br /> Example Source Code [www.52css.com]1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px <br />2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Hei原创 2011-04-21 23:15:00 · 587 阅读 · 0 评论 -
CSS网站布局十步之第三步
<br />第三步：将网站分为五个div，网页基本布局的基础：<br /><br />1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：<br /> Example Source Code [www.52css.com]<div id="page-container"><br /><div id="main-nav">Main Nav</div> <br /><div id="header">Header</div> <br /><div id="sidebar-a">Sid原创 2011-04-21 23:18:00 · 683 阅读 · 0 评论 -
CSS网站布局十步之第六步
<br />第六步：页面内的基本文本的样式(css)设置<br /><br /> 你是不是厌倦了那些大红大绿的背景，现在是去掉它们的时候了，只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此，很好，再过几步，你就能很好了解css控制整个网页版面(Layout)的能力。<br /> 先设置全局的文本样式：<br /> Example Source Code [www.52css.com]body {<br />font-family: Arial, Helvetica, Verda原创 2011-04-21 23:22:00 · 551 阅读 · 0 评论 -
使用CSS设计搜索框
<br />今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框，但是这种方法看起来会更容易些，所以我想将它与感兴趣的朋友分享。<br />View Demo原始方式<br />首先来让我们看看我的原始的使用<input type=”image” src=”image_url” />的方法：<formmethod="get"id="searchform"action="http://www.sohtanaka.com/"><fieldset><inpu原创 2011-04-22 00:18:00 · 1807 阅读 · 0 评论 -
CSS网站布局十步之第一步
首先需要规划网站，本教程将以下图为例构建网站。 其基本布局见下图：主要由五个部分构成： Example Source Code [www.52css.com]1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px 2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content 网站的主要内容。 Width: 480px Height: Changes depen原创 2011-04-21 23:15:00 · 602 阅读 · 0 评论 -
CSS网站布局十步之第二步 创建html模板及文件目录等
<br />第二步：创建html模板及文件目录等<br /><br />1.创建html模板。<br /> 代码如下：<br /> Example Source Code [www.52css.com]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html><br />原创 2011-04-21 23:17:00 · 1444 阅读 · 0 评论 -
CSS网站布局十步之第十步
<br />第十步：解决IE浏览器的显示BUG<br /><br /> 要继续此教程需要IE的以前的版本进行测试，绝大部分用户使用的是IE6.0，因此您几乎不需要看下去了。IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto，要实现层的中间对齐，需加入：<br /> Example Source Code [www.52css.com]body {<br />font-family: Arial, Helvetica, Verdana, Sans-serif;<原创 2011-04-21 23:26:00 · 641 阅读 · 0 评论 -
快速写出较好CSS的5种方法
1. Reset<br />Photo by redux<br />真的，要一直使用一个reset，无论是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset，一定要使用。<br />这可以简单到仅仅将所有元素中的margin和padding属性去掉:html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,pre, form, fieldset, table原创 2011-04-21 23:52:00 · 935 阅读 · 0 评论 -
CSS网站布局十步之第四步
<br />第四步：网页布局与div浮动等<br /><br />1.浮动：首先让边框浮动到主要内容的右边。用css控制浮动。<br /> Example Source Code [www.52css.com]#sidebar-a {<br />float: right;<br />width: 280px;<br />background: darkgreen;<br />}<br /><br /> 表现如下：<br /><br /><br /><br />2.往主要内容的盒原创 2011-04-21 23:19:00 · 635 阅读 · 0 评论 -
CSS网站布局十步之第七步
<br />第七步：网站头部图标与logo部分的设计<br /><br /> 为实现设计时的网页头部效果，我们需要以下两幅图：（点击另存，并相应修改文件名）<br /> /images/headers/about.jpg<br /><br /><br /> /images/general/logo_enlighten.gif<br /><br /><br /> 首先我们给#header层添加背景图案：<br /> Example Source Code [www.52css.co原创 2011-04-21 23:22:00 · 598 阅读 · 0 评论 -
JSON_Encode后显示中文
如果我们使用JSON_Encode给含有中文的内容进行编码时，会出现类似于\u5c71\u4e1c这样的代码，虽然使用jQuery或者JSON_Decode进行解码的时候，并不会出现问题，但某些时候，我们还是需要将中文原样的显示出来。$code = json_encode(转载 2011-10-09 19:52:58 · 1679 阅读 · 0 评论