首页
学习
活动
专区
工具
TVP
发布

cnblogs

专栏成员
110
文章
143587
阅读量
47
订阅数
如何写好css系列之button
      现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要,因为基础有boostrap,组件库有:easyui,elementui,iview,ionic等等。但我个人练习自己如何写好一个css框架,对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。 一、与美术交流获取得这些信息 1. 按钮状态:普通状态、鼠标悬停、选中状态、禁用状态 2. 按
sam dragon
2018-01-17
1.1K0
如何写好CSS系列之表单(form)
     表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置;二是表单元素,如:输入框、单选、复选、列表组件、搜索组件等,由于列表组件、搜索组件不是单纯的css组件,所以暂且没有
sam dragon
2018-01-17
1.6K0
上下div高度动态自适应--另类处理方案
     这段时间在工作中遇到一个看似较为棘手的问题。问题描述:查询报表页面分为上下两部分,上部分为条件输入区域,下部分为报表展示区域。客户要求做到默认满屏(但要动态适应不同的窗体大小,也就是浏览器窗体用户会手动改变其大小),但上部分条件输入区域有动态变化高度的现象。      在遇到上述问题,您是否第一反应就是利用window的onresize事件,做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时,我们又应该如何呢。是否有统一的处理方案呢。今儿本人就把我自己的想法和测试提供出来,供大家参
sam dragon
2018-01-17
3.1K0
Css3新特性应用之过渡与动画
一、缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等 还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点 Css中只支持一条贝塞尔曲的运动,不能连续多段 对cubic-beizer中控制锚点的水平坐标与垂直坐标互换,就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数 水平坐标只能在0~1的范围内,因为水平坐标表示的是时间 垂直坐标可以超过此范围,表示为运动距离
sam dragon
2018-01-17
1.1K0
Css3新特性总结之边框与背景(一)
本系列主要总结Css3一些新特性的认识,来源于《css揭秘》书。 一、半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);s:饱合度(0%~100%);l:亮度(0%~100%);a:透明度(0~1) background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border);padding-box(背景颜色扩散到padding);content-box(背景颜色扩展到content) 示例代码: width:200px; height:20
sam dragon
2018-01-17
7890
Css3新特性总结之边框与背景(二)
一、条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 to left right top bot
sam dragon
2018-01-17
6800
CSS3新特性应用之字体排印
一、插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素。 +:表示同辈元素的兄弟元素。 \A:一个空白换行符 解决方案: 在dd与dt相邻的dt上的子元素前面加入一个空白换行符 在相邻的dd与dd之间,加入一个逗号 示例代码: <head> <meta charset="UTF-8"> <title>Document</title> <style> dt, dd{
sam dragon
2018-01-17
8090
CSS3新特性应用之用户体验
一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可。 完整代码: curosr: url(transparent.gif'); cursor: none; 二、扩大热区 应用在小按钮的情况下,不好被鼠标点击到 代码如下: .btn{ position: relative; cursor: pointer; } .btn:after{ position: absolute
sam dragon
2018-01-17
8280
【垂直居中高级篇】你不知道的垂直居中方式
      在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用margin:auto。然而如果要对一个元素进行垂直居中,想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中,对当下流行的几种技巧不做讨论,原因如下: 表格布局法:需要用到一些冗余的HTML元素 行内块法:这个方法Hack味道过浓。 一、基于绝对定位的垂直居中 以下两种技巧都需要使用绝对定位 calc实现 内容部分必须固定宽和高 tra
sam dragon
2018-01-17
9370
CSS3新特性应用之结构与布局
一、自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin、padding、border尺寸,他让非block元素也可实现宽度100%; max-content:假设容器有足够的宽度,足够的空间,此时,所占据的宽度就是max-content,与display为inline不一样,max-content就像white-space:nowrap一样,不会换行的。 min-content:采用内部
sam dragon
2018-01-17
1.5K0
深入理解和应用display属性(一)
    Display在官方定义:规定元素应该生成的框的类型。本文只重点分析常用的6个值:none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再推荐使用。 一、None 此元素不会被显示。主要与visibility属性为hidden时相区分。 1) 当元素的none时,js可以获取此元素,但不能获取/设置此元素的可视化属性的值(但可以设置自定义属性的值),如Width、Height、background等Css属性的值,这也就表明当
sam dragon
2018-01-17
7780
深入理解和应用display属性(二)
四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inline{ display: inline-block; width: 200px; background: red; margin: 10px; padding: 10px;
sam dragon
2018-01-17
9250
深入理解和应用Float属性
一、Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度、高度自适应,但可以设置其值。 二、核心解决的问题 文字围绕图片:img标签与多个文本标签放置在一个容器中,如果img浮动,文本标签会围绕图片。 <img src="../img/a.jpg" style=" width: 100px; height: 200px; float: left;" alt=""> <p>001文件内容文件内容文内容文件内容<br/> 文件
sam dragon
2018-01-17
1.1K0
深入理解及应用Position
position俗称定位,主要取值及作用如下: static 默认值。没有定位,出现在正常文档流中 absolute 绝对定位,相对于position为absolute、relative、fixed的第一个父元素进行定位 relative 相对定位,相对于其正常位置进行定位 fixed 绝对定位,相对于浏览器窗口进行定位 Position本不复杂,混淆应用比较难理解,主要规则如下: 脱离文档流 除 static属性值之外,其他值都会使元
sam dragon
2018-01-17
5990
没有更多了
社区活动
【纪录片】中国数据库前世今生
穿越半个世纪,探寻中国数据库50年的发展历程
Python精品学习库
代码在线跑,知识轻松学
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
技术创作特训营·精选知识专栏
往期视频·千货材料·成员作品 最新动态
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档