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\4f53;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\4f53;}
.f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.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 print{
      
}

 

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399585.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

冯洛伊曼体系结构

布尔代数 是一种关于0 和 1 的代数系统&#xff0c;用基础的逻辑符号系统描叙物体和概念&#xff0c;是现代电子计算机的数学和逻辑基础 布尔量&#xff1a; 0 1   True, False 与&#xff1a; a, b ab a*b and 或&#xff1a; ab …

技术分类目录

https://www.helloweba.net/nav.html

Codeforces Round #324 (Div. 2) B. Kolya and Tanya 快速幂

B. Kolya and Tanya Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/problem/BDescription Kolya loves putting gnomes at the circle table and giving them coins, and Tanya loves studying triplets of gnomes, sitting in the ve…

Android 自定义Application

在android中 自定义Application 常用的作用是1 保存在程序运行中的全局变量实例&#xff1a;public class GlobalApp extends Application{ private UserData udata ; public UserData getudata(){ return udata; } public void setudat…

web基础,用html元素制作web页面

观察常用网页的HTML元素&#xff0c;在实际的应用场景中&#xff0c;用已学的标签模仿制作。 用div,form制作登录页面&#xff0c;尽可能做得漂亮。 练习使用下拉列表选择框&#xff0c;无序列表&#xff0c;有序列表&#xff0c;定义列表。 <!DOCTYPE html> <html la…

js遍历Object所有属性

https://www.cnblogs.com/itrena/p/9085009.html 在js中经常需要知道Object中的所有属性及值&#xff0c;然而若是直接弹出Object&#xff0c;则是直接显示一个对象&#xff0c;它的属性和值没有显示出来&#xff0c; 不是我们想要的结果&#xff0c;从而需要遍历Object的所有…

一,彻底理解第一个C语言程序 Hello World

对于初学者来说&#xff0c;第一个程序一般都是hello world&#xff0c;而且是照着书上一点一点敲的。所以&#xff0c;在初学者眼中&#xff0c;敲出来的第一个程序代码不过是一堆看不懂的英语。而事实上&#xff0c;C语言作为一门语言&#xff0c;是有语法的。所以这一节&…

es6的箭头函数

1.使用语法 : 参数 > 函数语句; 分为以下几种形式 :  (1) &#xff08;&#xff09;&#xff1d;&#xff1e;语句 ( )&#xff1d;&#xff1e; statement 这是一种简写方法省略了花括号和return 相当于 &#xff08;&#xff09;&#xff1d;&#xff1e;&#xff5…

三级分类菜单的数据库设计

http://www.imooc.com/article/285246?block_idtuijian_wz 最近在设计一款进销存系统的时候&#xff0c;遇到一个分类的设计问题&#xff0c;就是如何将分类设计成数据库里的表&#xff0c;怎么样设计才比较灵活&#xff1f; 举个例子&#xff0c;一级分类&#xff1a;生鲜类&…

双向环形链表

#ifndef DULIST_H #define DULIST_H /* 线性表的双向链表存储结构 */ typedef void * elemtype; typedef struct dulnode { elemtype data;struct dulnode *prior,*next; }dulnode,*dulinklist; /*带头结点的双向循环链表的基本操作(14个) */ void list_init(dulinklist *l)…

linux服务器加入windows域时报错Ticket expired

[rootrusky]# net ads join -U administrator Enter administrators password: kinit succeeded but ads_sasl_spnego_krb5_bind failed: Ticket expired Failed to join domain: failed to connect to AD: Ticket expired使用data命令查看时间&#xff0c;发现linux机器与wind…

机器学习问题解答

1、如何从字面正确理解weight decay的含义&#xff1f;它为何相当于L2范式正则化&#xff1f; 2、L2范数正则化对应贝叶斯统计里的哪个概念&#xff1f; 解答&#xff1a;http://blog.csdn.net/zouxy09/article/details/24971995/&#xff1b;http://t.hengwei.me/post/%E6%B5%…

搜索和数据分析引擎

https://www.elastic.co/cn/products/elasticsearch

mysql查询区分大小写

Mysql默认查询是不分大小写的&#xff0c;可以在SQL语句中加入binary来区分大小写。 binary不是函数&#xff0c;是类型转换运算符&#xff0c;它用来强制它后面的字符串为一个二进制字符串&#xff0c;可以理解为在字符串比较的时候区分大小写。 SELECT * FROM t_resource_inf…

(二)单元测试利器 JUnit 4

JUnit 深入 当然&#xff0c;JUnit 提供的功能决不仅仅如此简单&#xff0c;在接下来的内容中&#xff0c;我们会看到 JUnit 中很多有用的特性&#xff0c;掌握它们对您灵活的编写单元测试代码非常有帮助。Fixture 何谓 Fixture&#xff1f;它是指在执行一个或者…

.net平台的MongoDB使用

网址&#xff1a;http://www.cnblogs.com/skychen1218/p/6595759.html 前言 最近花了点时间玩了下MongoDB.Driver&#xff0c;进行封装了工具库&#xff0c;平常也会经常用到MongoDB&#xff0c;因此写一篇文章梳理知识同时把自己的成果分享给大家。 本篇会设计到Lambda表达式的…

2018程序员最佳ssh免费登陆工具

https://www.jianshu.com/p/b29b894aa60f Linux 终端 Screenshot from 2018-09-15 00-12-41.png PAC Screenshot from 2018-09-15 00-12-00.png 参考资料 讨论qq群144081101 591302926 567351477本文涉及的python测试开发库 谢谢点赞&#xff01;本文相关海量书籍下载 Wind…

Android Studio快捷键(MAC版)

用了AS一段时间了&#xff0c;感觉还是挺好用的&#xff0c;虽然还是有些小问题&#xff0c;但好处还是很明显的。。。 从Eclipse 转用AS最难受的估计就是快捷键了&#xff0c;整了好久才基本把个人在Eclipse上使用的快捷键给找差不多&#xff0c;但还是有些快捷键木有&#xf…

学习flex布局(弹性布局)

Flex是Flexible Box的缩写&#xff0c;意为弹性布局。是W3C早期提出的一个新的布局方案。可以便捷的实现页面布局&#xff0c;目前较高版本的主流浏览器都能兼容&#xff0c;兼容情况如下&#xff1a; Flex在移动端开发上已是主流&#xff0c;比如在h5页面&#xff0c;微信小程…

php创建无限级树型菜单以及三级联动菜单

http://www.php.cn/php-weizijiaocheng-373500.html 这篇文章主要介绍了php创建无限级树型菜单 &#xff0c;主要使用的是递归函数&#xff0c;感兴趣的小伙伴们可以参考一下 写递归函数&#xff0c;可考虑缓存&#xff0c;定义一些静态变量来存上一次运行的结果&#xff0c;多…