纯CSS3打造相册效果，感觉还不错，这里与大家分享下，最主要的是没有使用一行js，这才是亮点 今天偶然发现电脑里面还有这样的一个例子，感觉效果还不错，不记得啥时候下载的了，也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。 效果图： 效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。 先看html文件： 代码如下:<body> <p id="g all ery"> <h1>纯CSS3相册效果</h1> <ul> <li> <span class="touc...
“祝你生日快乐，祝你生日快乐……”，过生日有生日歌，生日蛋糕也是必不可少的，这篇文章主要为大家详细介绍了程序员利用纯HTML5+CSS3制作的生日蛋糕,具有一定的参考价值，感兴趣的小伙伴们可以参考一下以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧，程序员庆生的乐趣与哀愁啊。写的比较简陋，感兴趣的看一下吧。先发个效果图吧蛋糕分为三个部分，底部蛋糕，顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部...
本篇文章给大家带来的内容是介绍如何仿花瓣网实现静态登陆页面？（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。思路：花瓣网（http://huaban.com/）1、对页面进行分析2、下载素材3、对页面尺寸进行分析4、实现下载素材将页面素材保存到本地，方法如下图页面尺寸进行分析只做了大概得尺寸，尺寸获取方法，使用截图得方法获取宽和高，注意获取过程中图片得大小不能有变化。将图片最大化后获取尺寸...
在前端网站的开发过程中，我们都是要用到css样式的，css样式可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。那么这些css样式的文件或者代码是如何导入到html中的？本章就给大家带来html中是如何引入CSS样式文件？以及link与@import的区别（代码实例），让大家了解css样式是如何导入的，重点描述css样式文件的导入。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、HTML导入css样式的...
无标题文档*{margin:0;padding:0;}.wrapper1{ width:150px; height:191px; border:#eee 1px solid; border-radius:10px; padding:2px; float:left; margin:200px 0 0 50px; -moz-perspective:800px; -moz-transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; -moz-backface-visibility:; -webkit-backface-visibility:hidden;}.box1{ width:150px; height:191px; background:url(http:...
本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长，也就是能够实现宽度自适应效果。 代码实例如下: www.100sucai.com 以上代码实现了我们的要求，代码非常的简单，注册onkeyup事件处理函数，此函数可以判断当前输入内容的长度是否大于默认长度，如果不大于，则文本框的长度就是4，否则就是输入内容的长度。
多个div在同一行以相同间隔分布: 这样的布局效果使用非常的频繁，也就是让多个div在一行分布，并且div于div之间的间隙是一样的，多用在对于产品的展示之用，下面就介绍一下如何实现此中布局，代码实例如下: div均匀分布代码实例 *{ margin:0px; padding:0px;}#box{ width:430px; height:200px; background-color:red; overflow:hidden; margin:100px;}#box ul{ width:440px;}#box ul li{ width:100px; height:1...
CSS3实现的字符串逐字高亮效果代码实例:本章节分享一段代码实例，它实现了字符串逐字高亮效果。代码如下: 蚂蚁部落html, body{ background-color: #aaaaaa;}p span{ font-family: 'Comic Sans MS'; animation: loading 1.4s; -moz-animation: loading 1.4s; -webkit-animation: loading 1.4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}@keyframes loading{ 0% {c...
兼容所有浏览器的圆角矩形效果代码实例:CSS3中已经给出了非常方便定义圆角的属性，可惜IE浏览器中兼容性很差，这里就不多介绍了，具体可以参阅CSS3实现圆角效果一章节。由于兼容性问题所以要使用一些特别的方法来实现圆角效果，下面就是一段这样的代码实例。代码如下: div+CSS圆角矩形body{ padding:20px; background-color:#FFF; font:100.01% "Trebuchet MS",Verdana, Arial,sans-serif}div#nifty{ margin:0 10...
纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一，当前的此效果一般哟结合js实现，本章节介绍一个使用纯CSS实现的二级下拉菜单效果，希望能够给需要的朋友带来一定的帮助，不过此代码也有一点浏览器兼容问题，那就是在IE6中不兼容。代码如下: 蚂蚁部落ul{ padding:0; font:15px "微软雅黑";}.item{ width:100px; padding:0 5px; border:solid 1px #eee; display:block; float:left}.item u...
CSS3实现的横向二级下拉菜单代码实例:横向二级下拉菜单是非常常用的效果，例如很多网站的导航栏就是这样的二级下拉菜单效果，非常好用，本章节分享一段使用CSS3实现的下拉菜单，当然当下很多浏览器都不支持，不过相信用不了多久这种现状就会被改变。代码实例如下: 蚂蚁部落#nav{ float:left; font:bold 12px Arial, Helvetica, Sans-serif; border:1px solid #121314; border-top:1px solid #2b2e30; -webkit-bo...
css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一，当然也是最为基础的操作，可能对于刚刚接触css的朋友还不够熟悉，下面就通过一段简单的代码历史演示一下如何设置文本框的样式，当然这个演示可能并不是特别的美观，这里的目的也只是起到一个演示作用，代码如下: 蚂蚁部落 .txt{ width:200px; height:18px; border-top:1px solid green; border-left:1px solid green; backgroun...
将子div定位于父div的右下角的代码实例:可能在实际应用中，很少有这样的设置，这里分享这段代码的目的是为了让初学者熟悉一下关于定位的应用。代码如下: 蚂蚁部落#father{ width:600px; height:600px; background:green; position:relative}#father #children{ width:200px; height:200px; background:red; position:absolute; right:0; bottom:0} 蚂蚁部落 代码实现了我们的要求，可以将子元素定位...
让input文本框文本垂直居中代码实例:很多时候讲究对称美，也有时候讲究不对称的美，当然这个要分具体情况，在文本框中一般对称一些更为美观，下面就通过代码实例介绍如何实现文本框中的文本垂直居中对齐。代码实例如下: 蚂蚁部落 #text{ height:50px; line-height:50px;} 以上代码实现了我们的要求，将height属性值和line-height属性值设置为相同即可。 原文地址是:http://www.softwhy....
css设置元素透明度代码实例:本章节介绍一下如何设置一个元素的透明度，现在众多的效果都有使用，下面就介绍一下如何实现此效果。w3c提供了一种标准的设置透明度的属性opacity，此属性值大小是介于0-1之间的，0为完全透明，1为完全不透明。代码如下: 蚂蚁部落div{ width:100px; height:100px; background:red; opacity:0.3;} 以上代码在谷歌和火狐浏览器中能够完美执行，但是在IE8和IE8以下浏览器...