不可不知的CSS小技巧

  • 编辑时间: 2014-10-25
  • 浏览量: loading
  • 作者: 段亮

从个人博客上线那一刻起,或许我已经真正意义上的成为了一名IT“程序猿”了。才知道在互联网上学的东西还很多,只有每天不断的充实自己,才感觉不会被互联网淘汰。不知不觉中学习网页制作已经快半年了,下面是自己整理和总结的一些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;

  }

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

本文出处:http://www.duanliang920.com/learn/web/jc/226.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 伊莉娜泳装
    2015-10-27 14:43:27发表

    [磕头]

  • 美女总裁哦
    2015-10-20 18:07:14发表

    应该加分呀

  • 上帝之手
    2014-10-25 20:55:00发表

    js的总结

  • ℡低调少年╮
    2014-09-25 16:49:54发表

    以后有时间在总结一些吧

  • Jcomey
    2014-09-25 14:55:19发表

    还有更多的么?这篇文章很适合新手~

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客