css-样式重构-代码分享
1.css reset
/* reset 重置样式,清除浏览器默认样式,并配置适合设计的基础样式(强调文本是否大多是粗体、主文字色,主链接色,主字体等)。*/
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{
margin
:
0;
padding
:
0;
}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{
display
:
block
;}
table{
border-collapse
:
collapse
;
border-spacing
:
0;
}
caption,th{
text-align
:
left
;
font-weight
:
normal
;}
html,body,fieldset,img,iframe,abbr{
border
:
0;
}
i,cite,em,var,address,dfn{
font-style
:
normal
;}
[hidefocus],summary{
outline
:
0;
}
li{
list-style
:
none
;}
h1,h2,h3,h4,h5,h6,
small
{
font-size
:
100%
;}
sup,sub{
font-size
:
83%
;}
pre,code,kbd,samp{
font-family
:inherit;}
q:before,q:after{
content
:
none
;}
textarea{
overflow
:
auto
;resize:
none
;}
label,summary{
cursor
:
default
;}
a,button{
cursor
:
pointer
;}
h1,h2,h3,h4,h5,h6,em,strong,b{
font-weight
:
bold
;}
del,ins,u,s,a,a:hover{
text-decoration
:
none
;}
body,textarea,input,button,select,keygen,legend{
font
:
12px
/1.14
arial
,\5b8b\4f
53;
color
:
#333
;
outline
:
0;
}
body{
background
:
#fff
;}
a,a:hover{
color
:
#333
;}
2.css function
/* function功能样式,从常用样式方法中抽离,按需使用,使用前请先阅读 CSS规范 中相关条列。 */
.f-cb:after,.f-cbli li:after{
display
:
block
;
clear
:
both
;
visibility
:
hidden
;
height
:
0;
overflow
:
hidden
;
content
:
"."
;}
.f-cb,.f-cbli li{
zoom
:
1;
}
.f-ib{
display
:
inline-block
;*
display
:
inline
;*
zoom
:
1;
}
.f-dn{
display
:
none
;}
.f-db{
display
:
block
;}
.f-fl{
float
:
left
;}
.f-fr{
float
:
right
;}
.f-pr{
position
:
relative
;}
.f-prz{
position
:
relative
;
zoom
:
1;
}
.f-oh{
overflow
:
hidden
;}
.f-ff0{
font-family
:
arial
,\5b8b\4f
53;
}
.f-ff1{
font-family
:
"Microsoft YaHei"
,\5fae\8f6f\96c5\9ed1,
arial
,\5b8b\4f
53;
}
.f-fs1{
font-size
:
12px
;}
.f-fs2{
font-size
:
14px
;}
.f-fwn{
font-weight
:
normal
;}
.f-fwb{
font-weight
:
bold
;}
.f-tal{
text-align
:
left
;}
.f-tac{
text-align
:
center
;}
.f-tar{
text-align
:
right
;}
.f-taj{
text-align
:
justify
;
text-justify
:
inter-ideograph
;}
.f-vam,.f-vama *{
vertical-align
:
middle
;}
.f-wsn{
word-wrap
:
normal
;
white-space
:
nowrap
;}
.f-pre{
overflow
:
hidden
;
text-align
:
left
;
white-space
:
pre-wrap
;
word-wrap
:
break-word
;
word-break
:
break-all
;}
.f-wwb{
white-space
:
normal
;
word-wrap
:
break-word
;
word-break
:
break-all
;}
.f-ti{
overflow
:
hidden
;
text-indent
:
-30000px
;}
.f-ti2{
text-indent
:
2em
;}
.f-lhn{
line-height
:
normal
;}
.f-tdu,.f-tdu:hover{
text-decoration
:
underline
;}
.f-tdn,.f-tdn:hover{
text-decoration
:
none
;}
.f-toe{
overflow
:
hidden
;
word-wrap
:
normal
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;}
.f-csp{
cursor
:
pointer
;}
.f-csd{
cursor
:
default
;}
.f-csh{
cursor
:
help
;}
.f-csm{
cursor
:
move
;}
.f-usn{-webkit-
user-select
:
none
;-moz-
user-select
:
none
;-ms-
user-select
:
none
;-o-
user-select
:
none
;
user-select
:
none
;}
3.css media
/* media 通过媒体查询为不同的设备和大小配置不同的样式。*/
/* 横屏 */
@media
screen
and (orientation:
landscape
){
}
/* 竖屏 */
@media
screen
and (orientation:
portrait
){
}
/* 窗口宽度<960,设计宽度=768 */
@media
screen
and (
max-width
:
959px
){
}
/* 窗口宽度<768,设计宽度=640 */
@media
screen
and (
max-width
:
767px
){
}
/* 窗口宽度<640,设计宽度=480 */
@media
screen
and (
max-width
:
639px
){
}
/* 窗口宽度<480,设计宽度=320 */
@media
screen
and (
max-width
:
479px
){
}
/* windows UI 贴靠 */
@media
screen
and (-ms-view-state:snapped){
}
/* 打印 */
@media
{
}
4.css animation
/* animation常见动画效果的集合,主要用于效果演示和参考(点击查看代码库演示),也可以直接调用。 */
/* 淡入 */
.a-fadein{-webkit-
animation-name
:fadein;-moz-
animation-name
:fadein;-ms-
animation-name
:fadein;
animation-name
:fadein;}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
0%
{
opacity
:
0;
}
100%
{
opacity
:
1;
}
}
@-moz-keyframes fadein{
0%
{
opacity
:
0;
}
100%
{
opacity
:
1;
}
}
@-ms-keyframes fadein{
0%
{
opacity
:
0;
}
100%
{
opacity
:
1;
}
}
@keyframes fadein{
0%
{
opacity
:
0;
}
100%
{
opacity
:
1;
}
}
转载于:https://www.cnblogs.com/fcan/p/4856048.html
css-样式重构-代码分享相关推荐
- Bootstrap全局css样式_代码
内联代码 通过 <code> 标签包裹内联样式的代码片段.<!DOCTYPE html> <html lang="en"> <head&g ...
- 标准的html 样式,CSS 样式表代码规则
使用HTML进行标记网页内容时,需要遵从一定的规范,CSS亦如此.要想熟练地使用CSS对网页进行修饰,首先要了解CSS样式规则,具体格式如下 选择器(属性1:属性值1;属性2:属性值2;属性3:属性值 ...
- html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影 男女 第一句:act ...
- 几行样式代码,让你的网站全站和图片都变成灰色|CSS样式灰色代码
目录 方法一 方法二 方法三 如果需要将你的网站全站和图片变灰,只需要加几段css控制就可以了 效果展示 小编这里试用了下面的几种方法,一般用方法一的效果会更好一些,用其他的几种方法,或多或少的原来网 ...
- 使用Mootools动态添加Css样式表代码,兼容各浏览器
这个函数很有用处,尤其是当我们在使用Mootools开发插件的时候,例如Tips等,当我们需要额外的Css来支撑插件内的效果时,通常我们的做法是把Css放到单独的css文件里调用,但是这样做就不利于插 ...
- CSS样式居中代码小结
1.text-align: center 2.<center> <img src="av.gif" /> </center> ...
- html css廖雪峰,廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式(示例代码)
拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...
- 记录vue中使用scss报红但是不影响css样式,代码行会提示css-rcurlyexpected这个问题
要把这个地方设置为vue就行了
- js改变style样式和css样式
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: [html] view plaincopy < ...
最新文章
- 高并发之存储篇:关注下索引原理和优化吧!躲得过实践,躲不过面试官!
- 注解RequestMapping中的URI路径最前面到底需不需要加斜线?
- MySql cmd下的学习笔记 —— 有关select的操作(max, min等常见函数)
- vue踩坑记-在项目中安装依赖模块npm install报错
- 太糟糕了,Java 8没有Iterable.stream()
- xenserver 安装新硬盘_给Xenserver添加新硬盘
- Linux环境下的jdk安装(大数据环境)
- springboot学习笔记03 整合JPA
- CSS综合案例——淘宝焦点图(轮播图)布局及网页布局总结
- Android 多语言设置,这里演示中英文转换
- HDFS_数据加密空间
- 0927锚框(Anchor box)
- open3d显示pcd点云并读取任意点的坐标+生成点云绕任意轴旋转的transformation matrix
- 赋能 打造应对不确定性的敏捷团队 pdf_协会成长课堂|《赋能》:打造应对不确定性的敏捷团队...
- 联想电脑怎么进入bios设置u盘启动
- JAVA12_12学习总结(JavaScript)
- SOA、RMI、RPC、Rest、RestFul、Soap、WebService 详解
- 企业级docker安装kong,konga实战
- Introduction to Fabric.js. Part 3(介绍Fabric.js第三部分)
- IE8中文正式版下载
热门文章
- golang实现聊天室(三)
- 设一组初始记录关键字序列为(25,50,15,35,80,85,20,40,36,70)进行一趟归并后的结果为
- linux网络编程之TCP三次握手和四次挥手
- [数据结构]用插入排序和选择排序的思想实现优先级队列
- 实现Linux select IO复用C/S服务器代码
- mysql数据库文件位置
- CSS清除默认样式,聪明人已经收藏了!
- 终于有人把安卓程序员必学知识点全整理出来了,送大厂面经一份!
- 【C/C++开发】C++实现字符串替换的两种方法
- 微信客户端<->腾讯微信服务器<->开发者服务器