切版 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
切版 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 Apache
开发语言 HTML/CSS
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发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);
 }
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表了资讯
2017/11/06 20:59

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

切版css发布了1.6版本,这次做了比较大的改动,首先它是一款“移动优先”css框架,我们废除了很多代码,为了让更简单,它甚至算不上框架,只是我们工作中的集锦,我们做了一些整体,它没法像bootstrap一样构建一个完整的页面,但是它非常的适合二次开发。 下载地址:https://gitee.com/qieban/qieban 演示地址:https:/...

3
9
发表了资讯
2017/07/26 14:08

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

切版v1.4版是在切版v1.2版基础上升级的一个版本! 添加了切图工具,公共样式,表单美化,动画交互,响应式,丰富了栏目内容,新增js功能插件。 切版v1.4版本演示地址 http://www2.qieban.cn/qieban1.4v/index.html 更新笔记 新增切图工具 PhotoshopCc Photoshop CC 安装文件 Photoshop CC 破解补丁 CutterMan(一个好用的切...

11
50
发表了资讯
2017/07/04 18:39

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

切版css是切版网目前内部使用的框架,甚至于不算是一个框架,它只是提供了一个可靠的基础去创建你一个前端项目,提供了一段来自经验的css重写,和一些经验之谈,并且约束了一些命名上的规范。 演示 http://www.qieban.cn/demo/ 更新笔记 添加了使用比较频繁的js插件 jquery1.7.2压缩版本 jquery-1.7.2.min.js 写css3前缀...

4
36
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2018/04/20 14:09

CSS:CSS 字体

ylbtech-CSS:CSS 字体 1.返回顶部 1、 CSS 字体 CSS字体属性定义字体,加粗,大小,文字样式。 serif和sans-serif字体之间的区别 在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读 CSS字型 在CSS中,有两种类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace") 特...

0
0
发表了博客
2019/04/10 10:10

CSS(1)---css语法、css选择器

<center> CSS(1)---css语法、css选择器 </center> <font color=#FFD700> 一、CSS语法</font> 1、CSS语法 CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。 <img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221134804-1398437910.jpg" style="border: 1px dashed rgb(204, 200, 20...

0
1
发表了博客
2018/04/20 15:13

CSS:CSS 列表

ylbtech-CSS:CSS 列表 1.返回顶部 1、 CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等) 有序列表 - 列表项的标记有数字或字母 使用CSS,可以列出进一步...

0
0
发表了博客
2018/04/23 07:14

CSS:CSS 下拉菜单

ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1、 CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标移动到指定元素上时,会出现下拉菜单。 实例 <style> .dropdown { position: relative; display: inline-block; } .dropdown-cont...

0
0
发表了博客
2019/01/15 17:30

CSS工具、CSS重置(CSS Reset)

样式重置的目的是减少浏览器的不一致性,例如line-height,margin,标题的font-size大小等等。样式重置经常在CSS框架中出现。 这里的重置样式故意写的很一般,例如没有为body元素设置任何颜色或是背景之类,我并不建议您就拿这个重置样式应用在您自己的项目中,它应该被调整,修改,扩展以符合您自己的特定的重置基准。例如...

0
0
发表了博客
2018/04/20 11:40

CSS:CSS 创建

ylbtech-CSS:CSS 创建 1.返回顶部 1、 CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使...

0
0
发表了博客
2019/10/07 21:33

CSS变量(CSS variable)

CSS变量(CSS variable) CSS变量 是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的var()来访问。 一、CSS变量的用途 构建大型站点时,在这些网页中,有大量的CSS样式,并且会在许多场合大量重复的使用。比如说:为了保持一种配色方案,在这个配色方案中会有一...

0
0
发表了博客
2019/07/29 20:14

css基础,css选择器

07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head标签内定义一个stype标签内 CSS语法:css选择器{样式1;样式2} 优缺点:可读性强,有复用性,样式被html页面绑定了,不能提供给其它html页面使用 2. 外联式...

0
0
发表了博客
2019/05/17 00:00

CSS变量(CSS variable)

使用 CSS 变量编写你的样式代码 基本使用: 1. --variable: <declaration-value> 2. <css-attribute>: var(--variable) 第一个是定义 css 变量 其中 --variable 可以是自定义的名称,但是必须 -- 开头,冒号后面是变量的值(变量:值) 第二个是在选择器中使用一开始定义好的 css 变量,使用方式就和正常写样式一样,只是...

0
0
发表了博客
2018/04/24 10:19

CSS:CSS 图片廊

ylbtech-CSS:CSS 图片廊 1.返回顶部 1、 CSS 图片廊 以下是使用CSS创建图片廊: 图片廊 以下是使用 CSS 创建图片廊: 实例 <div class="responsive"> <div class="img"> <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg"> <img src="http://static.runoob.com/images/demo/d...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
18 收藏
分享
返回顶部
顶部