css的框架——global.css

global.css,一般这个css文件是用于装全站主要框架css样式代码. “global”翻译为全局.全部.从翻译中大家也能理解global.css用于做什么.大站常常用于装全站公共的CSS样式选择器. 全站能重复调用的CSS样式都放入此CSS文件内,可以节约样式代码.规范.有利于调用辨别.同时日后修改全站某处相同地方时候,由于全站公共部分样式集中于此global.css文件内,所以修改此文件内对应一处CSS样式即可完成对全站布局修改,节约时间方便管理. @charset "utf-8&qu…

CSS动画框架Loaders.css +animate.css

CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可实现,因此运行效率比较不错. Loaders.css的特点基于纯CSS,不需JavaScript脚本,也不需要图片,很干净. 默认提供近30个不同的Loading动画效果,你也可以发挥自己的想象来实现不同的加载动画. Loaders.css比较轻巧,基本没什么臃肿的文件. 免费.开源,这是必须的.…

css的框架——base.css

一.常用的base.css文件(也是比较简略的,但按需增加) body,ul,li,ol,dl,dd,h1,h2,h3,h4,h5,h6,input,p{ margin:;} ul,ol { padding:;} img { border:none;} .clear{zoom:1;} .clear:after{display:block; content:"";clear:both; visibility:hidden; height:0;} /*清除浮动*/ a{text-decor…

css的框架——common.css

@charset "utf-8"; /* 字体 */ .n{ font-weight:normal; font-style:normal; } .b{font-weight:bold;} .i{font-style:italic;} .fa{font-family:Arial;} .fs{font-family:'宋体';} .fw{font-family:'微软雅黑';} .fg{font-family:Georgia;} .ft{font-family:Tahoma;} .fl{f…

css 框架——base.css，作用是重设浏览器默认样式和提供通用原子类。自己留存

今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,o…

html css js 框架

html css js 框架 Bootstrap http://www.bootcss.com/ http://www.cnblogs.com/aehyok/p/3404867.html 入门资料 http://isotope.metafizzy.co/#install…

jQuery系列第三章 jQuery框架操作CSS

第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程. 使用原生的方式来设置标签的样式(代码示例) <body> <div>我是div标签</div> <button id="…

分享一个CSS+JavaScript框架materializecss

一.内容: CSS+JavaScript框架materializecss. 二.网址:http://materializecss.com 三.图片:…

LayoutSimple简易响应式CSS布局框架

开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundation之类框架无疑是雪上加霜.根本没有起到一点便捷的作用,反而增加了一堆冗余的代码.因此我就想能不能提取其中比较适用的部分,在添加平时经常会用到的样式进去,做一个比较简单自由度相对高一些的小框架.也就相当于一个初始化css布局,所以有了属于我的LayoutSimple简易响应式CSS布局框架. 废话…

跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画

Xuijs超轻量级的框架+Emile CSS动画效果图示例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &…

跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB0404'); 通过Class设置css属性 x$('.top2').setStyle('color', '#123456'); x$('.top2').setStyle('backgroundColor', '#EFEFEF'); 获取css属性:getstyle 获取top1 样式Color值…

【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装

// CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候,这里就是需要进行链式访问的] xframe.extend({ /** * 给DOM元素设置/取值CSS样式 * @return {*} */ css: function () { // 分为两种情况,一种是取值模式,一种是设置模式 var arg = arguments, len = arg.len…

【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架.内容框架.动画框架的搭建 * V 2.0:实现了框架的进一步优化,具有良好的扩展性, 可以支持链式访问 * */ / 主框架: 只做一件事,就是用于获取所有的元素集合 (function (w) { // 定义一个Xframe对象,后面就是他的构造函数 var xframe = function (…

jQuery框架操作CSS

3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程. 使用原生的方式来设置标签的样式(代码示例) 1 <body> 2 <div>我是div标签</div> 3 <button id="btnID"&…

CSS3动画框架 Animate.css

CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法引用css <link rel="stylesheet" href="animate.min.css" /> 然后在需要动画效果的元素上添加animated和网页上显示的API的名字即可,比如: <div class="animated b…

CSS网站框架及样式命名规范

CSS网站框架复位:reset.css 基础:base.css 或 basic.css (字体大小.颜色.背景.行高.列表样式.按钮样式.表格样式等等) 布局:layout.css (非结构的布局) 主题:themes.css 表单:forms.css //模块类头部:header.css 尾部:footer.css 或 copyright.css 针对网站的每个栏目单独写一个以栏目名称命名:xxx.css (首页.列表.内容等等) class id 组合命名中横线“-”来连接前后单词作为…

global.css

global.css /* 页面元素初始化和常用样式定义-start */ /*======== 全局 ========*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:; padding:; } body { font-size: 12px; color: #333; font-family: "Micr…

震惊！很多人都不知道 CSS Grid 框架早就有了！

前言写作本文起源于知乎的一个问题:[CSS Grid 布局那么好,为什么至今没有人开发出基于 Grid 布局的前端框架呢?] 这篇文章拖沓了两个月,是因为真的不知道从哪里说好.这个问题的所有回答几乎都没有切中问题的本质,而且对 CSS Grid 也有很深的误解.另外这个问题的描述可能不太恰当,因为基于 CSS Grid 的框架已经有了.感兴趣的朋友可以了解一下 Flex-Layout,它是一个基于指令布局的神器.大家不要被项目名误导,虽然叫 flex-layout,其实有 flex 和 gri…

css预处理器和css Modules是干嘛的?

CSS预处理器 1.css和js的区别 js是编程语言,它可以声明变量,编写逻辑.而css实际上只是个"表",表头是选择器,内容是里面的样式.它并不能写逻辑啥的.也就是说,对于css的样式,我们并不能引用.继承.判断等,复用性较低.比较冗余. 2.css预处理器是干嘛的为css提供了与js相关的功能,比如我可以在css中声明变量,可以引用变量,可以有嵌套关系,可以使用函数等. 3.常见的预处理器有less.sass等 4.以less为例,使用预处理器之后写css的方式有了哪些变化首…

【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇对于新手来说DIV CSS布局居中与DIV CSS内容居中常常搞混,摸不着头脑.这里DIVCSS5重点为介绍关于布局居中与内容居中区别.CSS代码.作用.用法,通过基础知识介绍到DIV CSS图文代码案例让大家通俗易懂掌握这两个概念知识点. 对于DIV CSS开发来说CSS布局居中与CSS内容居中是入门碰到最重要需要必须掌握知…

【学习DIV+CSS】2. 学习CSS（一）--CSS控制页面样式

1. CSS如何控制页面使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现CSS好比是衣服,如何让CSS去控制页面,好比是如何让衣服穿在人身上.不同的CSS就可以使页面出现不同的风格适应不同的网站,而不同的衣服,人穿上后就会体现不同的职业. 1.1 如何让CSS去控制页面? CSS控制页面的样式有四种,分别是:行内样式.内嵌样式.链接样式.导入样式. 1)行内样式: 行内…

CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视,用于设计网页的外观效果.通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率. 一.CSS基础用法 CSS代码可以在任何文本编辑器中打开和编辑.因此,不管读者有没有变成基础,初次接触CSS时会感到很简单. 1.1 CSS样式样式是CSS最小的语法单元,每个样式包含两部分内容:选择器和声明(规则),…

前端开发css实战：使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画; (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示…

CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多:在控制面板中可以找到文字文件夹,在C:\Windows\Fonts下也可以直接找到.另外如果想让自己的电脑上有更加丰富的字体,可以下载新的字体文件后复制到改位置. b).我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在…

[css]我要用css画幅画(九) - Apple Logo

接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比较复杂,如果讲那么细,真是怕要讲到猴年马月. 这次的图足够简单,就拿这个图来说明. 都是一些简单的基本方法,通过举一反三,可以实现大部分效果. Github Demo:http://bee0060.github.io/Css-Paint/pages/logo/apple.html Code Pen…

[css]我要用css画幅画(八) - Hello Kitty

接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一年就过了1/4多了. 现在依然处在迷茫状态,时间一直浪费下去也是白浪费,在找到新的目标前,暂时先继续之前做的事吧,免得时间过了又觉得可惜. */ 一点个人牢骚,可忽略这个hello kitty画下来,非常拖沓,慢慢调样式实在太沉闷了,而且感觉只是在重复自己,所以没啥动力继续. 这次的hello k…

[css]我要用css画幅画(七) - 哆啦A梦

接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录下学习的过程) 这次就不多说CSS属性的基础概念了. 说说我画的过程吧, 好,进入正题. 因为和之前的瞎画不同,这次是画现有的东西.我认为临摹是比较简单的. 我先上网找了下要临摹的对象,找了个最中规中矩的图片,如下: 这对我来说不是一个简单的任务, 而我处理不简单的任务的解决方案,就是把他拆分再拆分…