您现在的位置是:首页 > 博客网站制作 > 心得笔记心得笔记
css技巧以及经验总结
杨青2014-05-14【心得笔记】人已围观
简介1、如何清除图片下方出现几像素的空白间隙?2、如何让文本垂直对齐文本输入框?3、如何让单行文本在容器内垂直居中?4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?
推荐链接:
html css 十一条网页设计经典实用的代码片段
Div+CSS 规则整理 以及注意问题
10条HTML代码编写技巧
CSS常见的问题和技巧总结
1、如何清除图片下方出现几像素的空白间隙?
方法1:img{display:block;} 方法2: img{vertical-align:top;}
2、如何让文本垂直对齐文本输入框?
input{vertical-align:middle;}
3、如何让单行文本在容器内垂直居中?
#test{height:25px;line-height:25px;}
/* 只需设置文本的行高等于容器的高度即可 */
4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
/* 按L-V-H-A的顺序设置超链接样式即可,可速记为LoVe(喜欢)HAte(讨厌)*/
5、如何使文本溢出边界不换行强制在一行内显示?
#test{width:150px;white-space:nowrap;}
/* 设置容器的宽度和white-space为nowrap即可,其效果类似<nobr>标签 */
6、如何使文本溢出边界显示为省略号?
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。 */
7、如何使连续的长字符串自动换行?
#test{width:150px;word-wrap:break-word;}
/* word-wrap的break-word值允许单词内换行 */
8、如何清除浮动?
方法1:
#test{clear:both;}
/* #test为浮动元素的下一个兄弟元素 */
方法2:
#test{display:block;zoom:1;overflow:hidden;}
/* #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height */
方法3:
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
/* #test为浮动元素的父元素 */
9、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
/* #test是img的祖父节点,p是img的父节点。Know More:未知尺寸的图片如何水平垂直居中 */
10、如何设置span的宽度和高度(即如何设置内联元素的宽高)?
span{display:block;width:200px;height:100px;}
/* 要使内联元素可以设置宽高,只需将其定义为块级或者内联块级元素即可。所以方法非常多样,既可以设置display属性,也可以设置float属性,或者position属性等等。 */
11、如何去掉超链接的虚线框?
a{outline:none;}
12、如何容器透明,内容不透明?
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
<div class="outer">
<div class="inner">我是不透明的内容</div>
</div>
/* 高级浏览器直接使用rgba颜色值实现;IE浏览器在定义容器透明的同时,让子节点相对定位,也可达到效果 */
13、如何做1像素细边框的table?
方法1:
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
<table id="test">
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年龄</th><td>26</td></tr>
</table>
方法2:
#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}
<table id="test" cellspacing="1">
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年龄</th><td>26</td></tr>
</table>
/* IE7及更早浏览器不支持border-spacing属性,但是可以通过table的标签属性cellspacing来替代。*/
14、如何让层在falsh上显示?
<param name="wmode" value="transparent" />
15、如何使用标准的方法在页面上插入flash?
<object id="flash-show" type="application/x-shockwave-flash" data="*.swf">
<param name="movie" value="*.swf" />
<param name="wmode" value="transparent" />
<img src="*.jpg" alt="用于不支持flash或屏蔽flash时显示" />
</object>
/* 至于flash的宽高可以在css里设置 */
很赞哦! ()
下一篇:IE常见bugs以及解决方案列表
相关文章
随机图文
如果个人博客网站再没有价值,你还会坚持吗?
个人博客现在的数量是越来越来多了,也有越来越多的人在讨论个人博客,个人网站的价值。也许你仅仅是因为一个爱好,也许你仅仅因为些许的新鲜感,也许你仅仅是因为祭奠那些过去...有位哲学家说过,存在即合理。万事万物都有其存在的价值,只是有些事物存在的意义大,有些事物的价值相对少一点。那么,站长们做的网站的价值又是什么,有什么样价值的网站存在的意义才更大,存在的时间才更长呢?Fieldset教你如何绘制带标题的表单框
一朋友问我像这样的表单样式是怎么实现的,我看到图,第一眼的印象应该是用图片来实现的,或者是用postion来定位实现的。本例演示如何在数据周围绘制一个带标题的框。css技巧以及经验总结
1、如何清除图片下方出现几像素的空白间隙?2、如何让文本垂直对齐文本输入框?3、如何让单行文本在容器内垂直居中?4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?不同的浏览器搜索同一个关键字词 结果不一样
自己电脑里面的浏览器3个以上,还外加一个IETester。浏览器是浏览互联网不可缺少的工具,做SEO的大家可以很明确的发现,浏览器现在很多,而且内核不一致,不同的浏览器,所搜索的结果不一样!这一组图片,一个使用的