杰拉斯的博客
[CSS3] 纯 CSS 实现未知高度垂直居中
杰拉斯 | 时间:2015-12-17, Thu | 25,989 views前端开发
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯CSS实现未知高度垂直居中</title>
<style>
.outer {
font-size: 0;
height: 200px;
background: #0099ff;
white-space: nowrap;
}
.outer:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.inner {
font-size: 14px;
white-space: normal;
display: inline-block;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
第一行<br>第二行<br>第三行
</div>
</div>
</body>
</html>
50 款简化 CSS 开发的实用工具和生成器
杰拉斯 | 时间:2012-07-27, Fri | 30,735 views前端开发
这些CSS工具都是很适合网页设计题使用,已经为大家分好类别,请自行点击导航快速浏览:
网格和布局,CSS 优化,CSS 菜单工具,CSS 按钮,CSS 圆角,CSS 框架,CSS Sprites,CSS 排版以及 CSS 表单。
CSS3无图片实现华丽折页菜单效果(多浏览器兼容)
杰拉斯 | 时间:2012-05-29, Tue | 25,988 views前端开发
昨天在做一个网站的左栏菜单的时候,突然想到,看了那么多创意的CSS3导航、菜单,何不自己动手做一个纯CSS3菜单呢?于是捣鼓了一下把想法给实现了,虽然说是比较老掉牙的一个创意,不过顺便也算是锻炼了一下CSS水平。
先看看网页里的最终效果:
那么,教程开始了!
CSS3实现文本框焦点伸长效果
杰拉斯 | 时间:2012-05-28, Mon | 11,580 views前端开发
如果用过苹果官网的搜索功能,就会发现,当搜索框获得焦点时会自动伸长,并且有动画效果,这是怎么实现的呢?
不需要Flash,不需要JavaScript,纯CSS3就可以实现,先看看Demo(不支持IE内核浏览器):
[前端]CSS3命名规范
杰拉斯 | 时间:2011-09-12, Mon | 5,743 views前端开发
- 头部:header
- 内容:container
- 尾:footer
- 导航:nav
- 侧栏:sidebar
- 栏目:column
- 页面外围控制整体布局宽度:wrapper wrap
- 左右中:left right center
- 登录条:loginbar
- 标志:logo
- 广告:banner
- 页面主体:main
- 热点:hot
- 新闻:news
- 下载:download
- 子导航:subnav
- 菜单:menu
- 子菜单:submenu
- 搜索:search
- 友情链接:link
- 页脚:footer
- 版权:copyright
- 滚动:scroll
- 内容:content
- 标签页:tab
- 文章列表:list
- 提示信息:msg
- 小技巧:tips
- 栏目标题:title
- 加入:joinus
- 指南:guild
- 服务:service
- 注册:regsiter
- 投票:vote
- 合作伙伴:partner
- 摘要:summary
- 按钮:btn
- 标签页:tab
- 当前的:current
- 小技巧:tips
- 图标:icon
- 注释:note