切版网框架 切版

Apache
HTML/CSS
跨平台
2017-06-17
切版

切版css1.0是切版网目前内部使用的框架,甚至于不算是一个框架,它只是提供了一个可靠的基础去创建你一个前端项目,提供了一段来自经验的css重写,并且约束了一些命名上的规范。

它没法和成熟的css框架媲美,只是一些乐于分享的代码片段。


关于命名的极简主义

view--vw

nav--nv

left--lt

right--rt

head -- hd

body --bd

foot --ft

list--lst

wrap--wp

标配

.about_view_left{
width:auto;	
}
.about_list_right{
width:auto;
}

瘦身

  .ab_vw_lt{
width:auto;	
}
.ab_lst_rt{
width:auto;
}

图片规范

图片命名以img_01.png 依次往后面顺,大banner图片,数据图片均保存为jpg图片,透明图片、小图标之类都存储为png24图片。

结构用途的图片放入img目录,数据图片放入images目录下。

如果涉及到多人协作

如果涉及到多人协作,通过 style_wz(人名首字母).css命名;图片命名以人名(wz_1.png)命名。

文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>切版</title>
<!--基础样式-->
<link rel="stylesheet" href="css/qieban.css">
<!--css3动画库-->
<link rel="stylesheet" href="css/animate.min.css">
<!--自己书写css的地方-->
<link rel="stylesheet" href="css/style.css">
<!--书写响应式代码的地方-->
<link rel="stylesheet" href="css/responsive.css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<!--低版本浏览器添加html5支持-->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]--> 
</head>
<body>
<!--添加jquery库文件-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!--好用小巧的响应式幻灯片-->
<script type="text/javascript" src="js/jquery.glide.js"></script>
<!--添加css3前缀支持-->
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<!--快速让网站绚丽起来-->
<script type="text/javascript" src="js/wow.min.js"></script>
<!--自己写JS的地方-->
<script type="text/javascript" src="js/script.js"></script> 
</body>
</html>

响应式

@media only screen and (max-width:800px) {
}

旋转

/*360旋转*/
@keyframes spin {
0% {
   	transform:rotate(0deg);
 }
 100% {
   	transform:rotate(-360deg);
 }
}
加载中

评论(0)

暂无评论

切版 CSS 框架 v1.6 发布,移动优先的 CSS 框架

切版css发布了1.6版本,这次做了比较大的改动,首先它是一款“移动优先”css框架,我们废除了很多代码,为了让更简单,它甚至算不上框架,只是我们工作中的集锦,我们做了一些整体,它没法像...

2017/11/06 20:59

切版内部使用 css 框架 v1.4 发布

切版v1.4版是在切版v1.2版基础上升级的一个版本! 添加了切图工具,公共样式,表单美化,动画交互,响应式,丰富了栏目内容,新增js功能插件。 切版v1.4版本演示地址 http://www2.qieban.cn/...

2017/07/26 12:08

切版内部使用 css 框架 v1.2 发布

切版css是切版网目前内部使用的框架,甚至于不算是一个框架,它只是提供了一个可靠的基础去创建你一个前端项目,提供了一段来自经验的css重写,和一些经验之谈,并且约束了一些命名上的规范。...

2017/07/04 18:38

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

CSS最佳实践

CSS作为前端开发必备基础知识,但随着显示器技术发展和多种设备共存情况下,前端技术也越来越复杂,如何更好的使用css,有哪些css框架可以供选择,他们又有什么优缺点?本文对这一些问题进行...

10/08 20:00
0
0
《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来...

10/28 17:09
8
0
css学习资料分享

css学习教程: (1)css2中文手册 (2)CSS布局:40个教程、技巧、例子和最佳实践 (3)值得参考的10个LESS CSS实例 (4)中文LESS站点 (5)关于Less的系列文章看起来很有前途,这是第一篇 ...

2012/04/10 16:38
154
0
CSS选择器

CSS 派生选择器 CSS id 选择器 CSS 类选择器 CSS 属性选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器 CSS ID 选择器 CSS 属性选择器 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择...

2015/07/08 15:29
46
0
如何利用Boostrap做响应式设计的前端方案?

Boostrap提供了一系列的前端css和各种小物件支持,让前端设计变得轻松可以很容易支持多屏。 资源下载https://www.slidestalk.com/s/css_responsive_design......

10/09 12:09
3
0
CSS中LI圆点样式li {list-style-type:符号名称}

CSS中LI圆点样式li {list-style-type:符号名称}

2016/04/12 17:05
426
1
2015年50+ CSS 工具、框架、库合集

在过去的一年中,我们已经看到了Flexbox布局人气大增、CSS动画的微妙变化、SVG动画的应用、Instagram风格的影响,这里我们列出了50多个今年发布的开源资源,可以帮你节省很多时间。...

2015/12/15 14:20
120
0
为 Drupal 7 网站添加自定义CSS

  当我们在逛聊天室或者论坛时,经常会碰到有人提问怎么向 Drupal 网站中添加自定义CSS —— 通常来讲,通过 Drupal 主题来进行添加最好。不过在某些情况下,因为环境限制或网站管理员没有...

2016/01/22 11:53
7
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部