css2.0 实现圆角

一直都很想写一篇关于CSS实现圆角的文章,今天不想再错过。之前有一篇用CSS去实现三角形有很多种方法,但这里用CSS2.0实现圆角只有一种方法。我们知道,如果使用最新的CSS3.0,只需要使用它独有的属性border-radius即可。比如,要圆角10px,则为border-radius:10px。但是,CSS2.0却没有提供类似的属性,于是前端们发挥它们的聪明才智,不靠背景图,而只用CSS2.0也完成了圆角的功能。

原理:利用CSS的margin, 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

css 优先级

关于CSS的优先级,面试的时候用到最多。这是css排版必须掌握,也是很多网页前端开发人员比较容易忽视的知识点。下面,这篇文章将详细说说CSS的优先级情况,看看它们到底有什么规律:

第一:CSS存放位置的优先级规律

标签内嵌样式 > 页面内部样式表 > 外联样式表

这里有一点要注意:“页面内部样式表”  的位置一定要比“ 外联样式表”  离定义样式标签的距离近,否则“外联样式表”的优先级会比 “页面内容样式表”的高。所以这条规律总结是离标签内容最近的样式才具有最高的权重性。

<link href=”yx.css” type=”text/css” rel=”stylesheet”/> (这里外联样式为:#test p.pra{color:red;})  <!–页面内部样式表–>

<style type=”text/css”>
#test p.pra{color:green;}
</style> 继续阅读

发表在 前端技术 | 标签为 , , | 留下评论

javascript事件绑定与解除

今天要说的是javascript里面的事件绑定。何为事件绑定,为什么要用事件绑定,如何解除事件绑定,事件绑定有哪些使用条件以及兼容性,下面我们就以上几方面做分部的介绍:

何为事件绑定

所谓的事件绑定就是给对象用事件绑定多个函数,以达到对一对象绑定某个事件运行多个函数的目的。

IE方式 :  对象.attachEvent(事件名 ,  函数); // 两个参数,当中事件名包括onclick ,onmouseover等

DOM方式:  对象.addEventListener(事件名, 函数 ,  是否捕获 )  // 三个参数,当中事件名包括click ,mouseover等,注意这里没有on  。 而且“是否捕获” 大多数为false

为什么要用事件绑定

上面介绍了事件绑定的概念以及它的函数运用。那现在就要说说为什么要用事件绑定,正如它的概念所说的,它是绑定一个事件,运行多个函数。怎么理解呢?打一个最简单的比方,点击一个按钮,要运行函数a, 之后接着 继续阅读

发表在 前端技术 | 标签为 , , , | 留下评论

标签内部隐藏文字的方法

在制作一些类似按钮的标签时,我们经常用到的标签无非是a或者input,当然也可以用span,var ,i 等html标签。效果如下图,我们为了方便机器阅读和搜索引擎的抓取,会对标签进行必要的文字说明。在给标签设置宽高的同时,还需要设置背景,最重要的是需要让文字隐藏,这也是我们这篇文章所要阐述的,下面说明主要的方法:

万能的方法一:text-indent:-9999em(这里的数字可变)

html:
<a class=”btn_a btn”>我要咨询</a>
<input type=”button” value=”我要咨询” class=”btn_b btn” />

css:
.btn{display:block;width:125px;height:40px;background:url(images/btn_20130105.png) no-repeat;overflow:hidden;text-indent:-9999em;}
.btn_b{border:none;}

方法说明:适合a,input等各标签。但此种方法只能设置标签的display:block, 继续阅读

发表在 前端技术 | 标签为 , , , , | 留下评论

短标题(右边多行)两端对齐的方式

上篇说道短标题(二,三,四文字长度)两端对齐的方式,这篇想说的是,短标题(右边多行)两端对齐的方式。先把图的事例贴上:

实际上,以我现在所知道,要实现这种排法,除了表格,或者两个子标签采用浮动的方法外,还有另外两种html的写法。这两种写法都用到了负margin的概念,这在我们平时的排版中显得比较怪异。好在它们大都能兼容各大浏览器。 继续阅读

发表在 前端技术 | 标签为 , | 留下评论