最新消息:

前端笔记

div中图片水平垂直居中显示
HTML/CSS

div中图片水平垂直居中显示

18shu.cn 2017-01-12 154浏览 评论

不多说,直接上代码。 第一种css写法: 给容器div添加以下css属性: display: flex; justify-content: center; align-items: center; 第一种css写法: 给容器div添加以下css属性: display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: cente...

去除inline-block元素间间距的N种方法
HTML/CSS

去除inline-block元素间间距的N种方法

18shu.cn 2017-01-12 197浏览 评论

一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: input / input type=submit / 间距就来了~~ 表单控件之间的间距例子 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问...

推荐:7个有用的HTML5学习资源
HTML/CSS

推荐:7个有用的HTML5学习资源

admin 2013-10-24 204浏览 评论

虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用。毫无疑问,几年下来,HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它,但也有许多人还没有接触过HTML5。为了帮助学习这个任务,我们收集了7个有用的HTML...

解决Firefox下input button内文字垂直居中
HTML/CSS

解决Firefox下input button内文字垂直居中

admin 2013-10-24 186浏览 评论

很老的问题了,如今再次碰到,记录下来,给后来者方便! 众所周知,在Firefox下input type=button的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写了padding:0 2px所致); 按...

简单CSS3 让搜索更有爱
HTML/CSS

简单CSS3 让搜索更有爱

admin 2013-10-24 162浏览 评论

首先,请看右侧搜索位置,试试先!!(如果你用的是IE,悲剧了) 小小的动画,是css3实现的,很有爱,有木有!! 代码如下: .searchdemo {display:inline-block;position:relative;height:27px;margin:60px;}.searchdemo:hover {-webkit-box-shadow:0 0 3px...

CSS3详解:border-radius
HTML/CSS

CSS3详解:border-radius

admin 2013-10-24 154浏览 评论

讲到css3的border-radius这个玩意,可以很好玩。比如:圆角矩形,圆,椭圆等等。 CSS3 border-radius是什么? border-radius的含义是:圆角。 CSS3 border-radius的书写格式: border-radius: a px,比较常见,其中 a 表示数值,下同; -webkit-border-top-l...

解决Button在IE6、7下的自适应宽度问题
HTML/CSS

解决Button在IE6、7下的自适应宽度问题

admin 2013-10-24 202浏览 评论

很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它。 写一个Button,有两种方式:其一,直接button标签;其二,input type=button。 不管哪种方式,Button的宽度在IE6、7下总是不能完美,接下来我们演示...

推荐13个CSS3快速开发工具
HTML/CSS

推荐13个CSS3快速开发工具

admin 2013-10-24 112浏览 评论

有了下面这些工具,你可以快速方便地掌握css3 并利用它构建页面效果: 1.? CSS3 Pie 2.? CSS3 Builder 3.? CSS3 Drop shadow generator 4.? Cascader 5.? Border Radius.com 6.? Button Maker 7.? CSS3 Generator 8.? Modernizr 9.? HTML5 CSS3 Support 10.?...

CSS3详解:text-shadow
HTML/CSS

CSS3详解:text-shadow

admin 2013-10-24 121浏览 评论

在CSS3详解的上一篇中我们讲到了 transform 的具体属性和用法,今天我们看一个相对简单的 text-shadow 。 CSS3 text-shadow是什么? text-shadow的含义是:文本的阴影,给文本添加阴影效果 CSS3 text-shadow书写格式: text-shadow: a px b px c px # color...

详细解说:简单CSS3实现炫酷读者墙
HTML/CSS

详细解说:简单CSS3实现炫酷读者墙

admin 2013-10-24 122浏览 评论

如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处。 先看demo( 请使用Chrome或者Firefox浏览,IE的靠边 ): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行。 使用基础的Html和CSS写出雏形 需要一提的是头像(img)的排版。给外...