分类： 网页制作
CSS实践：占位符交互、使用mix-blend-mode混合元素
占位符交互
具体效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。……
CSS实践：使用视口单位定义字号
一般来说，构建响应式面板是使用媒体查询根据不同型号的屏幕尺寸，修改元素的字号就能渲染出不同大小的面板，当然前提是使用相对单位em或者rem。比如说:
@me……
CSS实践：hover伪类与延时实现下拉列表
实现一个鼠标经过按钮来展示下拉菜单的交互效果：
<button class='btn'>菜单</button>
<ul class='panel'>
<li class='panel-item……
CSS实践：增加CSS选择器优先级、全局调整盒模型
增加CSS选择器优先级
在平常开发中，会有不少几率遇到需要增加CSS选择器优先级的场景。如何实现才会更好，比如说需要增强下面这个CSS选择器优先级：
.bar { ……
CSS实践：计算选中标签元素、多行文本溢出省略
CSS计算选中标签元素
这是一种社交平台的常见需求，比如说在掘金平台中让用户选择感兴趣的标签，通常都是用JS来处理已经选择了的标签数量。今天给出一个css……
CSS3高级技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）
1-1. 设置input 的placeholder的字体样式
设置input占位符的样式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
……
@media screen and标签：响应式网页结构css写法，实现页面布局自适应
响应式的web页面结构设计越来越流行，其中CSS3 Media Queries是入门基础知识。
Media Queries的其作用是使用表达式来判断设备的分辨率，并输出相应的样式。换……
Html：表格Table自适应宽度，指定列固定宽度，其他列均分宽度
做表单界面时，我想到最好的方法应该是，标题栏所在的列宽度固定，内容栏所在的列宽度自适应且要均分，这样整体表格看起来才美观有序。
要做到这一点，目前只……
css3中的width:100vh以及calc(100vh + 10px)
vh/vw
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;
vmax: 相对于视窗的宽度或高度中较大……
网站变灰的CSS代码（支持IE、FIREFOX和CHROME）
网站变灰的CSS代码方法1：支持IE
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona……
CSS中的关系选择器
关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、~，还 有+等，这些都是非常常用的选择器。
后代选择器：选择所有合乎规则的……
CSS链接使用伪类的顺序
顺序为：link-visited-hover-active
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {colo……
CSS基础夯实：定位（position）、浮动和布局（居中与flex...）
编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。PC端常见的网页布局形式有……
css 弹性盒子（flex布局）的起边和终边详解
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
……
css 利用animation和transform 设置鸭子表
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>表</title>……
css 利用animation和transform 设置复仇者魔方效果
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
……
css弹性盒子：flex-grow、flex-shrink完整规则详解
开始学习 flex-grow 时，相信大家都是从这样一个经典例子入门的：
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个……
HTML行内元素、块状元素、行内块状元素三者的区别
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)dis……
css图片和文字在父元素垂直居中，且在中线对齐排列的几种方式
一，用flex的副轴来垂直居中对齐
1.副轴（由上到下）设置居中对齐（align-items: center;）即可
1 <!DOCTYPE html>
2 <html lang="en">
3 &l……
css 利用flex居中对齐的参考代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 ……
CSS transform、transition和animation基本用法
transform
CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
注意： inline元素是不支持 transf……
CSS选择器层叠、优先级、冲突、继承、以及属性值计算过程
1. 选择器分类
1.1 常规选择器
通配符选择器
元素选择器、伪元素选择器
类选择器、伪类选择器
属性选择器
ID选择器
*{
/* 通配符选择器 */
margin……
CSS ::marker自定义项目符号和数字的某些样式
使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色，大小或类型很简单。
感谢CSS ::marker，我们可以更改内容以及项目符号和数字的某些样式。
浏……
网页布局：12列网格布局
12列网格布局最早是由960.gs提出的网格布局系统(//960.gs/)：
12列网格布局在设计系统和CSS Framework中经常使用，比如业内经典的Bootstrap(//getbootstrap……