随笔分类 -  css

如何写好CSS系列之表单(form)
摘要：表单模块可以分为两部分：一是表单的布局，也就是规范表单元素单元的排列位置；二是表单元素，如：输入框、单选、复选、列表组件、搜索组件等，由于列表组件、搜索组件不是单纯的css组件，所以暂且没有实现。 一、表单布局的实现 表单布局分为：表单容器、行、表单元素组（包含元素标题、元素）。并且实现根据屏幕进行 阅读全文
posted @ 2017-11-12 17:20 小龙女先生 阅读(7570) 评论(0) 推荐(0) 编辑
D3、openlayers的一次尝试
摘要：近期尝试了一个webgl相关的内容，有些小激动，及时分享一下我的测试示例，效果如下： 此示例分从业务角度分为两部分，一个部分为d3展示的柱图，另一部分则为用openlayers展示的地图。而其难点却在界面的交互效果。实现内容的翻面。 一、翻面效果的实现 此效果看似神奇，理解清楚原理后也还是很简单的。 阅读全文
posted @ 2017-11-01 20:29 小龙女先生 阅读(2121) 评论(0) 推荐(0) 编辑
如何写好css系列之button
摘要：现代前端行业的发展，如果你在css的时候，还没有利用一些预编译工具，是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要，因为基础有boostrap，组件库有：easyui，elementui，iview，ionic等等。但我个人练习自己如何写好一个css框架，对自己前 阅读全文
posted @ 2017-09-24 16:05 小龙女先生 阅读(1501) 评论(1) 推荐(0) 编辑
双飞翼布局的改造 box-sizing和margin负值的应用
摘要：box-sizing + margin负值 升级双飞翼布局 一、box-sizing属性 二、border-box属性的应用 对双飞翼布局的改造，传统的双飞高度是自适应的。本次通过box-sizing属性的border-box值对双飞翼布局的高度进行定高，从而实现head与footer固定，而中间内 阅读全文
posted @ 2017-06-04 22:09 小龙女先生 阅读(564) 评论(0) 推荐(0) 编辑
Css3新特性应用之过渡与动画
摘要：目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、缓动效果 学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等 还提供一个cubic-beizer自定义贝塞尔曲线的起点 阅读全文
posted @ 2017-01-09 08:09 小龙女先生 阅读(571) 评论(0) 推荐(0) 编辑
Sass之坑Compass编译报错
摘要：前段时间在使用Compass时遇到了其为难处理的一个坑，现记录到博客希望能帮助到各位。 一、问题： 利用Koala或者是gulp编译提示如下，截图为koala编译提示错误： 二、解决办法 从问题截图上看提示是找不到.sass-cache文件夹下面的一个文件夹（父级目录名称中带有特殊字符很容易重现）， 阅读全文
posted @ 2017-01-04 22:01 小龙女先生 阅读(754) 评论(0) 推荐(0) 编辑
CSS3新特性应用之结构与布局
摘要：目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、自适应内部元素 利用width的新特性min-content实现 width新特性值介绍： fill-available，自动填充盒子模型中剩余的宽度，包含margin、paddi 阅读全文
posted @ 2017-01-03 08:35 小龙女先生 阅读(666) 评论(0) 推荐(2) 编辑
【垂直居中高级篇】你不知道的垂直居中方式
摘要：在Css中对元素进行水平居中是很简单的，如果他是一个行内元素，对它的父元素应用text-align:center；如果是一个块级元素，就对自身应用margin:auto。然而如果要对一个元素进行垂直居中，想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中，对当下流行的几种技巧不做讨论，原 阅读全文
posted @ 2016-12-29 08:12 小龙女先生 阅读(1402) 评论(0) 推荐(1) 编辑
CSS3新特性应用之用户体验
摘要：目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、光标 新增加not-allowed光标，不允许访问 隐藏光标，在触模应用上很有用，css2.1需要一个透明的图片来实现，而css3直接用cursor:none即可。 完整代码： 二 阅读全文
posted @ 2016-12-26 08:26 小龙女先生 阅读(1038) 评论(2) 推荐(0) 编辑
前端工程师是怎么练成的
摘要：本人Sam。启蒙微软派，遁入前端教。已修炼后端技能、领域驱动设计、前端技能等近八余载。擅长C#，领域驱动设计，必杀技为Javascript、Css。为领域驱动设计在前端教的应用而奋斗。现将自我领悟的前端教技能秘笈总结如下： 上图咯： 内功心法 前端教的三大内功秘笈：Html、Css、Javascri 阅读全文
posted @ 2016-12-26 08:09 小龙女先生 阅读(1204) 评论(2) 推荐(5) 编辑
CSS3新特性应用之字体排印
摘要：目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、插入换行 ~：表示同辈元素之后指定类型的元素，如;elm1 ~ elm2表示,elm1之后的所有elm2元素，且elm1与elm2都是在同一个父级元素。 +：表示同辈元素的兄弟元素 阅读全文
posted @ 2016-12-19 08:10 小龙女先生 阅读(902) 评论(0) 推荐(0) 编辑
Css3新特性应用之视觉效果
摘要：目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、单侧阴影 box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow：水平阴影的位置，允 阅读全文
posted @ 2016-12-11 15:36 小龙女先生 阅读(827) 评论(0) 推荐(0) 编辑
Css3新特性应用之形状
摘要：目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、自适应椭圆 * border-radius特性： * 可以单独指定水平和垂直半径，并且值可以是百分比，用/（斜杠）分隔这两个值即可（可以实现自适应宽度椭圆）。 * 还可以单独指定四 阅读全文
posted @ 2016-12-08 08:23 小龙女先生 阅读(693) 评论(0) 推荐(1) 编辑
Css3新特性总结之边框与背景(二)
摘要：目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、条纹背景 利用background为linear-gradient函数实现，linear-gradient取值如下： <angle>：角度，渐变的方向 to left right 阅读全文
posted @ 2016-12-01 08:04 小龙女先生 阅读(837) 评论(0) 推荐(1) 编辑
Css3新特性总结之边框与背景（一）
摘要：本系列主要总结Css3一些新特性的认识，来源于《css揭秘》书。 目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一、半透明边框 css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100 阅读全文
posted @ 2016-11-22 07:43 小龙女先生 阅读(843) 评论(0) 推荐(0) 编辑
深入理解及应用Position
摘要：position俗称定位，主要取值及作用如下： static 默认值。没有定位，出现在正常文档流中 absolute 绝对定位，相对于position为absolute、relative、fixed的第一个父元素进行定位 relative 相对定位，相对于其正常位置进行定位 fixed 绝对定位，相 阅读全文
posted @ 2016-11-04 07:41 小龙女先生 阅读(596) 评论(0) 推荐(0) 编辑
深入理解和应用Float属性
摘要：一、Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度、高度自适应，但可以设置其值。 二、核心解决的问题 文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。 2.1 这是一个问题 浮动元素与正常元素相邻 阅读全文
posted @ 2016-10-30 21:44 小龙女先生 阅读(2182) 评论(0) 推荐(0) 编辑
深入理解和应用display属性（二）
摘要：四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效；width和height都有效； 1) 还是存在8像素的间隔 2) Block/inline-block元素包裹的inline-block元素，默认超width会换行，hieght撑 阅读全文
posted @ 2016-10-20 20:53 小龙女先生 阅读(467) 评论(0) 推荐(0) 编辑
深入理解和应用display属性（一）
摘要：Display在官方定义：规定元素应该生成的框的类型。本文只重点分析常用的6个值：none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再推荐使用。 一、None 此元素不会被显示。主要与visibility属性为hidden 阅读全文
posted @ 2016-10-20 20:37 小龙女先生 阅读(782) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示