css教程
哀悼日网站变灰色方法
很多网站会在特别的日子把网站变灰色，以表哀悼，很多小白还不会，我的站长站分享给大家一段CSS把网站变灰色的方法。只需把以下CSS加入到网站header标签内，或CSS文件内即可。<style type="text/css">body *{-webkit-filter: grayscale(100%); /* webkit */...
全套@media响应式布局代码方案分享
// 320@media screen and (min-width: 320px) { html { font-size: 15px; }}// 360@media screen and (min-width: 360px) { html { font-size:15px; }}// 375 iphone 678@media screen and (min-width: 375px) { html...
less响应式布局方案分享
分享一套作用的less响应式布局方案，因为less不支持函数方法，所以只能使用计算方法，来实现自动换算终端分辨率比例的功能，下面这套是我的站长站自用的方案，分享给大家。// 默认大小，放在最上面html { font-size: 50px;}// 我们此次定义的划分的份数 为 1...
css开发第一个字符制作圆形文字图标效果
css开发第一个字符制作圆形文字图标效果，非常简单，先固定一个圆形span标签宽高为，圆角 50%，然后设定行高，让字符垂直居中，设定 overflow: hidden，限制字符溢出，然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中，然后设定 text-inden...
:before和:after伪元素使用方法
文本内容：日常开发中我们常常用到:before和:after伪元素在指定标签前和后增加内容，非常方便，例如：p:before{ content:'内容'；} p:before{ content:'内容';} 如果是想利用:before和:after伪元素插入图标，我们可以用默认的字符...
利用Sass/Less快速将px单位转换rem/em/vw单位教程
在响应式开发中，px单位明显不适用，最好使用rem/em/vw单位更合适，一个个的手动将PX单位修改换算成rem/em/vw单位又非常麻烦，这里我的站长站推荐利用Sass或Less自动化将全部px单位快速的转换成rem/em/vw单位方法。一、Sass方法因为Sass拥有@function函数的...
CSS3不倒翁动态效果代码
HTML代码<div class="santa"><div class="santa-body"><div class="santa-head"><div class="santa-ear"></div><div class="santa-ear"></div><div class="santa-hat&qu...
CSS3旋转动画效果分享
定义 dom，容器中包含 9 个元素：<div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span&...
CSS如何选择第一个和倒数第一个元素
前端新手会遇到不知道如何选择列表中的第一个和倒数第一个元素，其实这非常简单。以后所有关于CSS选择的问题，都可以直接搜索CSS选择器的手册，里面有所有的CSS选择解决方法。今天主要介绍CSS如何选择第一个和倒数第一个元素，这里就需要用到:first-child和...
less自定义变量方法
在less开发中，less和其他编程语言一样，都有变量的概念，学会less自定义变量可以节省很多开发时间。如何自定义less变量使用符号@ 例如：@blue:#5B83AD;@FontSize:16px;@之后的变量名随意自取，：后面就是变量的值如何使用less变量color:@bluefont-size:@fontS...