当前目录: css基础教程
用css让div只显示横向x轴滚动条

2013年12月23日  css基础教程,前端资源   

学习CSS也有一段时间了,发现对一些不常用的样式属性来说真的很陌生,不常拿出来晒晒还真容易忘记,现在需要做一个效果是让指定div只显示横向滚动条也就是只有x轴滚动条出现,大家都知道网站内容过多一般都有纵轴也就是y轴滚动条出现,如果实现只显示横向x轴滚动条呢? [code]<div style="width:360px;height:120px; overflow-x:scroll; border:1px solid red;"> <ul style="width:400px;"> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li> <li>你好1</li...

纯css2.1制作简易导航

2013年12月20日  css基础教程,前端资源   

一般网站导航都使用jquery特效居多,但是利用纯css样式也可以打造一个简单的导航效果,不支持IE6这里可以用jquery弥补。 [code]<style> *{ margin:0; padding:0;} li{ list-style-type:none; height:16px;} div li:hover,div:hover{ background:yellow; position:relative} div.a{position:relative} div.a ul{ position:absolute;top:100%;*top:16px; left:0; visibility:hidden} div.a:hover > ul{visibility:visible} div.a > ul li:hover > ul{visibility:visible} div.a > ul >li{ position:relative;} div.a ul ul{position:absolute;visibility:hidden; left:100%; top:0;} </style>[/code] [code]<div class="a"> asdasdf <ul> <li><a href="#">12312312...

实现图片的形状遮罩和动画放大效果

2013年12月17日  css基础教程,前端资源   

今天,给大家分享来自 Quess 的如何实现图片的形状遮罩和放大动画效果。在很多作品集网站中,我们经常能看到这样的造型和效果。就个人而言,我觉得我们不能因为旧的浏览器不支持,我们就放弃在项目中使用 HTML5 或者 CSS3 技术。我们应该“奖励”使用现代浏览器的用户,给他们一个更好的用户体验。 效果演示 详细教程 代码下载

Respond.js让IE6/7/8支持 CSS3 Media Query

2013年12月16日  css基础教程,前端资源   

css 媒体查询 CSS3 Media Queries 实现响应式设计。其实就是根本屏幕的宽度不同加载不同的样式,也可以针对不同的区域如果改变屏幕宽度,也加载不同样式。 Max Width 下面的样式会在可视区域的宽度小于 600px 的时候被应用。 [code]@media screen and (max-width: 600px) { .class { background: #ccc; } }[/code] 如果你想链接到一个单独的样式表,把下面的代码放在<head>标签里。 [code]<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />[/code] Min Width 下面的样式会在可视区域的宽度大于 900px 的时候被应用。 [code]@media screen and (min-width: 900px) { .class { background: #666; } }[/code] Multiple Media Queries 你还可以使用过个匹配条件,下面的样式...

css前端框架bootstrap

2013年12月15日  css基础教程,前端资源   

涉及网站的都知道程序都有自己的程序框架,框架其实就是把一些常用的功能打包起来需要的时候在调用出来即可,脚本程序都有自己的框架现在都很成熟。现在前端也有自己的框架开发,那就是bootstrap。因为功能的强大和缩减了开发的时间短时间内已经响应全球,更多的请参考http://www.bootcss.com/