CSS
文章平均质量分 67
唐宋元明清.
0.0
展开
-
TML下直接调用Less文件
虽然有很多编译Less的插件可以使用 , 但是在开发的时候 , 每修改一次less代码就编译一次less文件 , 很明显效率就太低了 , 接下来为大家介绍一个直接在html的link标签中引入.less文件并且执行的方法 首先下载 less.js ; 点击下载 接下来是代码 在文档head标签内加入一下两行代码 ; link的 rel 的属性值一定要修改为 'sty原创 2016-11-29 00:26:39 · 521 阅读 · 0 评论 -
编写现代 CSS 代码的 20 个建议
明白何谓Margin Collapse不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习:.square { width: 80px; height: 80px; } .red { backg原创 2017-09-04 21:40:12 · 423 阅读 · 0 评论 -
兼容新旧浏览器的flex写法
拷贝直接加类名即可/* 定义 */.flex-def { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /原创 2017-05-26 20:53:45 · 8585 阅读 · 0 评论 -
Felx布局(三)
flex网格布局平均分布 最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放html代码<!-- 几个元素就几个标签 --><div class="Grid"> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> <div class="Grid-原创 2017-04-15 08:58:13 · 958 阅读 · 0 评论 -
Flex布局(二)
接上一篇,说一下flex布局的实例,转自阮一峰老师的博客骰子的布局html页面模版<div class="box"> <span class="item"></span></div>div代表容器,span代表骰子的点一个 左上对齐.box { display: flex;} 居中对齐.box { display: flex; justify-content: cen原创 2017-04-14 07:31:43 · 2044 阅读 · 0 评论 -
Flex布局(一)
FlexFlex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。display: flex;, 行内元素也可以使用display: inline-flex;注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素,称为Flex容器(flex containe原创 2017-04-13 07:31:46 · 827 阅读 · 0 评论 -
自制图标字体
生成自定义图标字体借助在线生成工具[IcoMoon](https://icomoon.io/)单击 import icons 按钮 导入我们准备好的svg 图标,或者Add Icons From Library引用这个网站上的一些现成图标 ,白色表示选中自定义的可以用AI直接画出来然后保存为svg格式还可以用ps的自定义形状工具导出ai路径,然后用ai打开保存为svg文件png图片就没必要转换了原创 2017-03-04 17:48:23 · 549 阅读 · 0 评论 -
简单的gulp应用
简单的gulp应用使用方法全局安装gulp npm install --global gulp 安装gulp到项目目录 npm install --save-dev gulp在项目根目录下创建一个名为 gulpfile.js 的文件,把下面的代码拷贝到该文件中var gulp = require('gulp');gulp.task('default', function() {原创 2017-02-17 13:48:40 · 354 阅读 · 0 评论 -
flex布局(二)--实例
你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo转载 2016-12-28 14:28:49 · 2467 阅读 · 0 评论 -
flex布局(一)
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很转载 2016-12-28 13:24:23 · 370 阅读 · 0 评论 -
CSS3的2D变换属性:skew()
最近用刀CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的!研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角)style>div{ width: 200px; height: 200px; transition:all 2s;原创 2016-11-27 08:37:18 · 732 阅读 · 0 评论 -
WeUI的radio与cheakedBox选中与设置选中问题
cheakedBox判断的方法就是, 选定的元素是否有checked这个属性, 如果有就是已选中, 没有就是未选中 // 标签绑定的onchange = "changeState(this)" function changeState (ele) { if(ele.checked){ ele.removeAttribute('checked')原创 2017-11-10 09:40:18 · 20228 阅读 · 0 评论