这篇文章主要讲解了“CSS实用技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css实用技巧有哪些”吧!1、如何清除图片下方出现几像素的空白间隙?方
这篇文章主要讲解了“CSS实用技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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;}
5、如何使文本溢出边界不换行强制在一行内显示?
#test{width:150px;white-space:nowrap;}
6、如何使文本溢出边界显示为省略号?
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
7、如何使连续的长字符串自动换行?
#test{width:150px;Word-wrap:break-word;}
8、如何清除浮动?
方法1:
#test{clear:both;}
方法2:
#test{display:block;zoom:1;overflow:hidden;}
方法3:
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:’’;}
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;}
10、如何设置span的宽度和高度(即如何设置内联元素的宽高)?
span{display:block;width:200px;height:100px;}
11、如何去掉超链接的虚线框?
a{outline:none;}
12、如何容器透明,内容不透明?
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#0009;filter:alpha(opacity=20)9;}
.outer .inner{position:relative9;}
<div class="outer">
<div class="inner">我是不透明的内容</div>
</div>
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>
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>
感谢各位的阅读,以上就是“css实用技巧有哪些”的内容了,经过本文的学习后,相信大家对css实用技巧有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!
--结束END--
本文标题: css实用技巧有哪些
本文链接: https://www.lsjlt.com/news/91860.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0