不解释,分享这个base.css】的更多相关文章

@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…
我们在埋头写代码的时候,还要学会收集整理一些常用的代码小技巧,以便在工作时候,可以及时调取,提高工作效率. 今天,我把之前收集整理的一些CSS代码小技巧分享出来,供你参考学习,希望对你有帮助. 一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text…
在写css文件时,一些常用的属性我们完全可以把它单独提出来,提高复用性,能增加开发效率,下面是一些网站推荐的常用原子类,也是零度逍遥常用的,规定了一些字体,内外边距和宽高属性,一般写在base.css内,分享给大家,希望大家在开发的时候能够事半功倍.当然,对于脑残的IE也都是支持的. /*文字排版*/ .f12{font-size:12px} .f13{font-size:13px} .f14{font-size:14px} .f16{font-size:16px} .f20{font-size…
简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端灵活的MVC框架,代码具有复用性: web标准:结构.样式和行为的分离:理想状态下,网页源代码由html文件.css文件和js文件组成! 高质量的代码:精简.重用.有序,符合web标准: js要有常用效果和功能的积累:js类库封装了跨浏览器兼容的特性并扩展了功能: 最基本要求是CSS能兼容IE6.I…
今天发下我自己的 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…
兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实现,鼠标放到图片上会显示一个层,也就是悬停时的提示,在这个提示框内你还可以加入图片或是一个列表,这就靠你的发挥了,提示框的背景颜色和文字颜色你都可以自己调. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&…
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 max-height 继承 box-sizing 表格单元格等宽 用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接 使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 <p><font…
有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载 /* * @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.设置通用原…
一般是叫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…
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 <style> /*…
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理解盒模型,我们需要从两个方面去考虑:一.理解一个单独盒子的内部结构,二是理解多个盒子之间的相互关系! 盒子的组成:盒子是由(content(内容) + padding(内边距)+ border(边框) + margin(外边距) ) 四个属性组成.此外,在盒子模型中,还有width(宽度)和 hei…
1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值.2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大.3.一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来.临时解决方法:选…
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…
分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-gap 配合 break-inside 来实现瀑布流布局. 设置这样的 html 结构: <div class="masonry"> <div class="item"> <div class="item_content conten…
@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…
使用 CSS 显示 XML 通过使用 CSS(Cascading Style Sheets 层叠样式表),您可以添加显示信息到 XML 文档中. 使用 CSS 显示您的 XML? 使用 CSS 来格式化 XML 文档是有可能的. 下面的实例就是关于如何使用 CSS 样式表来格式化 XML 文档: 请看这个 XML 文件:CD 目录 然后看这个样式表:CSS 文件 最后,请查看:使用 CSS 文件格式化的 CD 目录 下面是 XML 文件的一小部分.第二行把 XML 文件链接到 CSS 文件: B…
@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等聚焦时的蓝…
CSS代码例如以下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.…
首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall不能回帖 翻wall的情况下 上论坛这个慢啊 所以 大家去看这个图吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958大家都知道哈 chrome能自定义的东西比较少 不像FF或者opera那样 几个样式 或者脚本 就能把浏览器改成任何想要的样子…
1.http://bulma.io/documentation/elements 2.支持IE9+ 3.内容:…
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,td,figure{margin:0;padding:0;}body{font:12px "宋体"; word-wrap:break-word;}a,u,s,del{color:#666;text-decoration:none} fieldset ,a img,.bor0 {border:0;}i,em,b{fon…
@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…
[].forEach.call($$('*'),function(val){ val.style.outline = '1px solid #'+(~~(Math.random()*(1<<24))).toString(16) })…
原文链接:https://github.com/hangyangws/baseCss#basecss baseCss 意义 统一各个浏览器差异.统一团队开发起始标准.弥补浏览器的“缺点”.提供频繁使用的原子类名. 友情提示 前端开发中如果不是UI特别要求,颜色值采用web安全色最佳,像素以偶数最佳. 移动端开发,量度可以尝试rem为单位(什么是rem,请自行Google). 使用rem为量度单位时,浏览器会是基于html节点而不是body节点计算大小. 代码解释 @charset 'utf-8'…