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

一.常用的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…

上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffolding)之上,Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素,旨在为用户提供新鲜.一致的页面外观和感觉.本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容. 排版  (Typography)…

下面是我用过多次的base.css.欢迎各种建议吐槽.大家共同进步. ;;} table{;} fieldset,img {;} address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul {list-style:none;} capation,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weigh…

@charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,le…

有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载 /* * @Author: liubeimeng * @Date: 2015-11-11 10:22:02 * @Last Modified by: liubeimeng * @Last Modified time: 2015-11-11 10:33:18 * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原…

在写css文件时,一些常用的属性我们完全可以把它单独提出来,提高复用性,能增加开发效率,下面是一些网站推荐的常用原子类,也是零度逍遥常用的,规定了一些字体,内外边距和宽高属性,一般写在base.css内,分享给大家,希望大家在开发的时候能够事半功倍.当然,对于脑残的IE也都是支持的. /*文字排版*/ .f12{font-size:12px} .f13{font-size:13px} .f14{font-size:14px} .f16{font-size:16px} .f20{font-size…

一般是叫reset.css 我这边命名成base.css 哎呀无所谓…… @charset "UTF-8"; /*css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元素*/ form, fieldset, legend, input, button, select, textarea, /*表单元素*/ th, td, /*表格元素*/ pre…

Headings All HTML headings, <h1> through <h6> are available. h1. Heading 1 h2. Heading 2 h3. Heading 3 h4. Heading 4 h5. Heading 5 h6. Heading 6 Body copy Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applie…

ul { list-style: none;}a { text-decoration: none;} body,h1,h2,h3,h4,h5,h6,p,ul,ol,form { margin: 0; padding: 0;}html,body { width: 100%; height: 100%; background: #fff; font-size: 12px; font-family: Microsoft YaHei ; SimSun, Arial, Helvetica, sans-se…

@charset "utf-8"; /*CSS reset*/ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spac…

@charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } /*去掉input等聚焦时的蓝…

@charset "utf-8";  html {   overflow-x: hidden;   overflow-y: auto;  }  /*隐藏横向滚动,垂直滚动根据内容自适应(去除IE默认垂直滚动条)*/    body,  h1,  h2,  h3,  h4,  h5,  h6,  hr,  p,  blockquote,  dl,  dt,  dd,  ul,  ol,  li,  pre,  fieldset,  lengend,  button,  select,  …

html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: auto; /*如果有溢出自动形成滚动条*/ -webkit-text-size-adjust: 100%; /*不想让iPhone横坚屏切换的时候调节文字*/ -ms-text-size-adjust: 100%; } html * { /*所有元素*/ outline: none; -webkit-t…

周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但是这不是说以后文章就不提我手里这个半死不活的类电商网站了,还得接着提,要不然拿什么自黑呢~~ [回顾一下上一篇] 上一篇里我主要针对于我最近写的一个项目的前端结构,开始介绍了一些前端结构的一些知识或者说是经验吧. 为什么前端css也有架构,为什么要考虑css的架构,怎么实现css的简单架构,这些问题…

回顾 在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Theme 本篇我们将介绍Base Rules.你可以将所有Base Rules放在一个文件,比如 base.css :当然,也可以不这么做.区分Category的作用是帮助我们区分出不同功能的CSS,提高可重用性,可维护性. 哪些CSS属于Base Rules? Base Rules指的是所有元素的默认s…

在过去的大概一个月的学习,基本掌握了HTML+CSS的用法和特性. 这个星期老师给我们布置了一个PC端的实战项目,并且要求在3-4天内完成,我不惜废寝忘食,在紧迫的时间内大致地完成了,但是有些效果不能像想象中的那样实现出来,毕竟时间有限,能力有限.经过了这次的实战之后,我对此有各方面的总结: 一.技术总结 1. 在开发之前必须要先把这个项目的所有设计图从头到尾看一遍,注意观察相同的部分,比如说每个页面的头部和底部都是相同的,那么就把他们提取出来,应用到每个页面当中,这样可以大大提高了开发的效率.…

1. 通用样式 Base.css * { margin:; padding:; } body { width: 1000px; margin: 0 auto; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #969696; } a { text-decoration: none; color: #93B300; } a:link { text-decoration: none; } a:vi…

1.css代码语法 p{font-size:12px;color:red;}p 为选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 2.注释 用 /* ````*/ 3.从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式: 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文…

经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type="text/javascript" src="jb51.js?version=1.2.6"></script><link rel='stylesheet' href='base.css?version=2.3.3' type='text/css'…

<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version= ) <script type="text/javascript" src="jb51.js?version=1.2.6″></script> <link rel='stylesheet' href='base.css?version=2.3.3′…

HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现CSS的优势,因此不推荐使用. 行内式示例: <div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div> 2. 嵌入…

格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;} a{ color: inherit; text-d…

以前看过模块化的相关资料以及解释,对模块化有了一个表皮的了解,自己也做了一些相关的实践,由于接触到的项目交小,所以也没能更好的去体现和理解模块化,但总体还是有那么一些感悟,但是如果要说怎么才能算是好的模块化,自己内心还是一个疑问. 前几天接到一个电话面试,谈到了css模块化的问题,觉得自己的回答太模棱两可,自己回答过后对自己的答案也不满意,没有一个周全的思考和考虑. 下面总结一下自己对css模块化的理解,尽可能的表达完善自己的想法以及对所查找到的资料的一个总结. ————————————————…

无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则: 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面,…

在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及分析 CSS 结构:第二部分将围绕方法论.思维框架以及编写与规划 CSS 的态度. CSS 文档分析 无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释.统一的语法与统一的命名规范. 总则 尽量将行宽控制在 80 字节以下.渐变(gradient)相关的语法以及注释中的…

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写 2).属性的…

zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前文件目录下的media文件夹) 2.在urls.py文件中导入import settings再,urlpatterns里加入一句(r’^site_media/(?P<path>.*)$’,'django.views.static.serve’,{'document_root’: settings.…

本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器:所有浏览器. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式.. 一.关于选择器的命名 W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符…

转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=referral 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等.2. CS…