不可不知的CSS小技巧

一、表单部分

1.禁止textarea文本域的缩放

 resize:none;

2.去除初始化textarea下拉条

overflow:auto;

3.如何让表单中的选项按钮,点击文字也能选中?

<lable><input type="radio" name="sex" value="女" checked="checked"/>女</lable>

4.如何让文本垂直对齐文本输入框

input{vertical-align:middle;}

5.如何做1像素细边框的table?

#test{border-collapse:collapse;border:1px solid #ddd;}

#test th,#test td{border:1px solid #ddd;}

<table id="test">

<tr><th>姓名</th><td>少年</td></tr>

<tr><th>年龄</th><td>20</td></tr>

</table>

二、其它部分

1.如何让单行文本在容器内垂直居中?

#test{height:25px;line-height:25px;}

2.如何让块级元素居中显示?

#test{width:900px;height:200px;margin:0 auto;}

3.如何清除图片下方出现几像素的空白间隙?

方法1:img{display:block;}  方法2: img{vertical-align:top;}

4.常见的链接样式

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

当为链接的不同状态设置样式时,请按照以下次序规则:a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后

5.将一个容器设为透明

#test{

    filter:alpha(opacity=50);

    -moz-opacity:0.5;

    -khtml-opacity: 0.5;

    opacity: 0.5;

  }

在这四行CSS语句中,第一行是IE专用的,第二行用于Firefox,第三行用于webkit核心的浏览器,第四行用于Opera。

6.CSS3阴影

外阴影:

  .shadow {

    -moz-box-shadow: 5px 5px 5px #ccc;

    -webkit-box-shadow: 5px 5px 5px #ccc;

    box-shadow: 5px 5px 5px #ccc;

  }

内阴影:

  .shadow {

    -moz-box-shadow:inset 0 0 10px #000000;

    -webkit-box-shadow:inset 0 0 10px #000000;

    box-shadow:inset 0 0 10px #000000;

  }

总结:实战才是检验理论的唯一标准。不去做,永远是不明白这其中的实现原理。

时间: 2024-09-08 04:12:41

不可不知的CSS小技巧的相关文章

12个你不可不知的css小技巧

1.去除input记住密码后自动填充表单的黄色背景 input:-webkit-autofill { -webkit-box-shadow:000px1000px#FFFinset;  } //其中#fff是背景颜色值 2.IE8不支持opacity:0属性,可以加上下面属性: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); 3.IE input 框去掉文本框的叉叉和密码输入框的眼睛图标: ::-ms-clear,::-ms

你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏. OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN -- filter 了解下: { filter: blur(5px); filter: brightness(0.4); filter: co

你所不知道的 CSS 动画技巧与细节

怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到的动画不加特殊说明,皆指 CSS 动画.   正负旋转相消 嗯.名字起的很奇怪,好像数学概念一样. (写完文章才发现这里应该叫正反旋转相消,图都截完了,大家心里清楚就好) 在动画中,旋转是非常常用的属性, { transform: rotate(90deg); } 那旋转有一些什么高级点的技巧呢?当

你一定不知道的Win8小技巧

Win8.1上市也有些时日了,各种应用小技巧也被挖掘得差不多了.不过对于这种内涵博大的操作系统而言,偶尔冒出一两个"未知秘密"绝对不是新鲜事儿.比如说今天要跟大家介绍的这三条技巧,我敢打赌很多人就肯定没听说过. 1. 自动截屏 很多软件都自带了截屏功能,但终究没有系统自带的方便.忘掉Print Screen吧,Win8.1自带的要比它强上百倍.使用方法是通过键盘上的Win+Prt SC键,按下后屏幕会瞬间暗一下(有点像相机快门的感觉,呵呵~),同时还伴随悦耳的"咔嚓"

你所不知道的CSS滤镜技巧与细节

本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN - filter 了解下: {      filter: blur(5px);      filter: brightness(0.4);      filter: contrast(200%);      filter: drop-shadow(16px 16px 20px 

三个很特别的CSS小技巧分享

  各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新.最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网.这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码.现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能. 1.在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了

CSS小技巧

css|技巧 经常有朋友问:如何使有超级连接的文字不出现下划线,如何使鼠标移动到超连上产生变色的效果?其实这些通过传统的方法是办不到的.而使用CSS的控制却可以非常轻松地作到,而且,页面的代码也不会臃肿. ★★先看看超连没有下划线的例子: 例子1: 这个连接可以去页面底部,但是没有下划线. 是如何作到这一点的呢?在<head>和</head>之间加上如下的CSS语法控制: <style type="text/css"> <!-- a:link 

学习CSS小技巧:优化你的CSS代码

css|技巧|优化 最近看过许多网友制作的SKIN的CSS文件,发现其中有着许多冗余的代码.下面我来跟大家介绍一下,如何清除这些冗余的代码,让你的CSS文件更加简洁. 一.margin.padding属性 参照相关资料我们可以知道,margin和padding代表的意思分别是外部边距和内部填充距离,在许多网友的CSS中,关于这两个属性的冗余代码是出现得最多的.比如:margin:0px,大家可以查看一下自己的CSS文件中,是否许多的margin:0px,其中有的是不需要的,你可以尝试删除它,当然

CSS小技巧:巧用CSS实现左右分离的滚动条

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近自己在一个表情网(www.40607.cn),参考了其他的一些表情网,发现很多表情网都才具的左右分离的 滚动条的模式,左边是列表.右边是某一类的具体表情展示页,打开这样的页面,我自己还是比较这样的格局的,这样的用户体验做的简单明了,方便用户来查询,用户体验还是蛮不错的,不象别的网站做的很不方便查询,任何网站都一样,著名导航好123不就是简