cnblogs-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

cnblogs

专栏成员

110

文章

143587

阅读量

47

订阅数

如何写好css系列之button

现代前端行业的发展，如果你在css的时候，还没有利用一些预编译工具，是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要，因为基础有boostrap，组件库有：easyui，elementui，iview，ionic等等。但我个人练习自己如何写好一个css框架，对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。一、与美术交流获取得这些信息 1. 按钮状态：普通状态、鼠标悬停、选中状态、禁用状态 2. 按

2018-01-17

1.1K0

如何写好CSS系列之表单(form)

表单模块可以分为两部分：一是表单的布局，也就是规范表单元素单元的排列位置；二是表单元素，如：输入框、单选、复选、列表组件、搜索组件等，由于列表组件、搜索组件不是单纯的css组件，所以暂且没有

2018-01-17

1.6K0

上下div高度动态自适应--另类处理方案

这段时间在工作中遇到一个看似较为棘手的问题。问题描述：查询报表页面分为上下两部分，上部分为条件输入区域，下部分为报表展示区域。客户要求做到默认满屏（但要动态适应不同的窗体大小，也就是浏览器窗体用户会手动改变其大小），但上部分条件输入区域有动态变化高度的现象。在遇到上述问题，您是否第一反应就是利用window的onresize事件，做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时，我们又应该如何呢。是否有统一的处理方案呢。今儿本人就把我自己的想法和测试提供出来，供大家参

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的范围内，因为水平坐标表示的是时间垂直坐标可以超过此范围，表示为运动距离

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

2018-01-17

7890

Css3新特性总结之边框与背景(二)

一、条纹背景利用background为linear-gradient函数实现，linear-gradient取值如下： <angle>：角度，渐变的方向 to left right top bot

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{

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

2018-01-17

8280

【垂直居中高级篇】你不知道的垂直居中方式

在Css中对元素进行水平居中是很简单的，如果他是一个行内元素，对它的父元素应用text-align:center；如果是一个块级元素，就对自身应用margin:auto。然而如果要对一个元素进行垂直居中，想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中，对当下流行的几种技巧不做讨论，原因如下：表格布局法：需要用到一些冗余的HTML元素行内块法：这个方法Hack味道过浓。一、基于绝对定位的垂直居中以下两种技巧都需要使用绝对定位 calc实现内容部分必须固定宽和高 tra

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：采用内部

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属性的值，这也就表明当

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;

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/> 文件

2018-01-17

1.1K0

深入理解及应用Position

position俗称定位，主要取值及作用如下： static 默认值。没有定位，出现在正常文档流中 absolute 绝对定位，相对于position为absolute、relative、fixed的第一个父元素进行定位 relative 相对定位，相对于其正常位置进行定位 fixed 绝对定位，相对于浏览器窗口进行定位 Position本不复杂，混淆应用比较难理解，主要规则如下：脱离文档流除 static属性值之外，其他值都会使元

2018-01-17

5990

没有更多了

社区活动

【纪录片】中国数据库前世今生

穿越半个世纪，探寻中国数据库50年的发展历程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态