利用css切割图片代码实例:本章节介绍一下如何对图片进行切割，css3提供了clip属性，能够实现将图片切割成举行效果，关于clip属性的具体用法这里就不多介绍了，具体可以参阅CSS3的clip属性用法详解一章节，下面分享一段简单的代码实例，希望能够给需要的朋友带来参考作用。代码如下: 蚂蚁部落img{ position:absolute; clip:rect(20px 100px 50px 20px); } 以上代码实现了我们的要求，实现了对图片...
CSS3实现的3D旋转代码实例:本章节通过代码实例介绍一下CSS3实现的3D旋转效果，css3的出现可以设置更为强大的效果，3D运动效果就是其中的常用效果之一，下面就是一个这样的代码实例，希望能够给需要的朋友带来一定的参考意义。代码如下: 蚂蚁部落body, div, ul, li{ padding:0; margin:0;}.container ul li{ height:180px; width:180px; margin-right:20px; margin-bottom:20px; display:inline; -webkit-...
div垂直水平居中代码实例:本章节分享一段代码实例，它演示了如何让div实现全屏垂直水平居中和指定元素的内容垂直水平居中。代码实例如下: 蚂蚁部落#main{ position:absolute; background-color: blue; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #00F;}#content{ position:absolute; background-color:yellow; width:200px; height:100px;...
css清除浮动代码实例演示:在页面中如果采用了浮动，那么清除浮动则是必须要进行的操作，否则可能引起一些意想不到的后果。本章节不会对浮动或者清除浮动的原理做介绍，只是分享一下清除浮动的几段代码，因为有些朋友可能需要的就是一个代码实例，关于浮动或者清除清除浮动的相关内容可以参阅相关阅读。一.使用overflow清除浮动: 蚂蚁部落*{ margin:0px; padding:0px;}#box{ list-style:none; width:150px; overfl...
调整窗口大小也能够实现div水平垂直居中代码实例:将一个div在窗口内实现居中效果，基本上没有什么难度，具体可以参阅CSS实现div屏幕居中效果代码一章节。 但是有时候我们可能会有这样的需求，就是在调整窗口大小的情况下也能够实现div垂直水平居中效果，下面通过代码实例做一下简单介绍,代码如下: 蚂蚁部落 *{ margin:0px; padding:0px;} #thediv{ width:200px; height:100px; background:green; pos...
纯css实现的截取字符串后面添加省略号代码实例:通常情况下截取字符串使用后台语言或者javascript，当然本人页推荐使用上述方式，因为更加准确灵活。不过使用纯css也可以实现截取字符串，多余的用省略号替代的效果。代码如下: 蚂蚁部落#box li{ line-height:28px; width:330px; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} 蚂蚁部落欢迎您，只有努力奋斗才会有美...
css禁止选中指定文本代码实例:在实际编码中可能有这样的需求，那就禁止指定的元素可以被选中，下面就通过代码实例介绍一下如何实现此效果。代码如下: 蚂蚁部落div{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; width:150px; height:100px; background:#ccc; margin:0px auto; font-size:12px;}蚂蚁部落欢迎您，只有努力奋斗才会有美...
利用css设置半个文字的样式代码实例:通常情况下，设置文字的样式，效果都是作用域整个文字的，比如设置它的颜色，那么整个文字都会变色，下面介绍一下如何给文字的一部分设置指定的样式，希望能够给需要的朋友带来一定的帮助。代码如下: 蚂蚁部落.antzone{ position:relative; display:inline-block; font-size:80px; color:black; overflow:hidden; white-space:pre; }.antzone:before{ display:block; z-ind...
css实现的美观的table细线表格代码实例:默认状态下的表格边框是十分的丑陋的，如果直接应用与客户的网站，那反响是可想而知的。下面是一段非常美观的细线表格代码实例和大家分享一下。代码如下: 蚂蚁部落.table{ width:100%; padding:0px; margin:0px; font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体; border-left:1px solid #ADD8E6; border-collapse:collapse; } /*表头样式。*/ .table th{ fo...
css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前，鼠标悬浮于按钮之上，无非是设置按钮的大小、字体颜色或者背景图片等简单的项目，但是css3的出现，可以让设置变得丰富多彩，下面就是一个css3实现的此效果。代码如下: 蚂蚁部落*, *:before, *:after{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ padding-top:10%; text-alig...
css3实现的绘制图形图案效果代码实例:如果使用css2实现绘制图形图案几乎是不可能的，或者说费好大的劲也只能够得到非常简单的图案，css3的出现将绘制复杂的图形这个目标成为可能，下面就是一个相关的代码实例，有这方面需要的朋友可以参考一下它的实现方式。代码如下: 蚂蚁部落div{ width:170px; height:140px; background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) ...
兼容IE6的最小高度代码实例:虽然IE6浏览器的市场正在逐渐缩小，并且在不久的将来就难觅其身影，但是当前还是有不少的用户。此浏览器并不支持min-height属性，下面就介绍一下如何实现IE6兼容此属性，由于代码比较简单，下面直接给出代码，如下: min-height: 200px;_height: 200px; / hack for ie6 */ 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15771 更多内容可以参阅:http://www.sof...
css控制div元素旋转指定角度代码实例:本章节介绍一下如何利用css3实现控制元素旋转指定角度的效果。在这里咱们就不考虑低版本的浏览器，因为随着时间的推移，低版本的浏览器会被逐渐淘汰，就算是当前，低版本浏览器的用户的占比也是很少了，下面直接看代码实例: 蚂蚁部落div{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); width:100px...
使用标签引入css文件简单代码实例:本章节介绍一下如何利用标签引入外部css文件。虽然这个非常的简单，但是很多初学者比较容易忘记它的基本使用格式。下面就演示一下如何使用此标签引入外部样式表:代码如下: 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16451 更多内容可以参阅:http://www.softwhy.com/divcss/
css实现的div垂直居中效果代码实例:关于div垂直居中效果，在网上已经有很多介绍了。本章节再来通过代码实例演示一下如何实现此效果，希望能够给需要的朋友带来帮助。代码实例如下: 蚂蚁部落#box{ width:400px; height:200px; background:#CCC; position:relative;}#inner{ width:50px; height:50px; background:green; position:absolute; left:50%; top:50%; margin-left:-25px; margin-top:-25px;} ...