CSS
关注
分享
扫一扫
文章平均质量分 58
thingir
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
SASS用法
一、基本用法变量：使用 $ 开头$blue: #1875e7; div { color: $blue;}如果变量要嵌入字符串：必须写在#{}中。$side: left;.Rounded { border-#{$side}-radius: 5px;}二、计算功能$width: 30;div{ width:$width * 10%;}三、嵌套div{ &:after{ }}四、关于注释// 注释 单行注释只保留在scss源文件中，编译后省略；/原创 2021-12-29 10:46:22 · 465 阅读 · 0 评论 -
CSS - 元素背景模糊
一、backdrop-filter 用法backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。backdrop-filter: none;/* 指向 SVG 滤镜的 URL */backdrop-filter: url(commonfilters.svg#filter);/* <filter-function> 滤镜函数值 */backdrop-fil原创 2021-11-18 10:06:21 · 722 阅读 · 0 评论 -
pointer-events 解决透明层遮挡不可滑动问题
参考于这篇pointer-events 解决透明层遮挡不可滑动问题pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all透明层设置 .goto-app{ background-color:transparent; overflow: auto; pointer-events:none; }...原创 2021-08-23 17:14:47 · 929 阅读 · 0 评论 -
CSS-关于定位position：fixed
position:fixed原本是相对于视窗的定位，确因为父级元素中有transform而改变定位位置，是相对于有transform属性的父级，而不是视窗了所以在写定位的时候要避免其父级有transform的属性原创 2020-07-20 09:49:11 · 450 阅读 · 0 评论 -
CSS-关于伪类
伪类要写content:"",否则无效原创 2020-07-14 10:05:21 · 132 阅读 · 0 评论 -
Bootstrap 手风琴菜单
<!DOCTYPE html><html><head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><link rel="stylesheet" href="css/boot转载 2017-01-20 13:31:47 · 1693 阅读 · 0 评论 -
CSS3 table — 自适应布局表格
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>演示：纯CSS实现自适应布局表格</title> <style type="text/css"> body { font-family: arial; background:#fff; } table { border: 1转载 2017-01-20 13:32:57 · 13863 阅读 · 0 评论 -
CSS布局——display:table-cell; 与display:table;
“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。使用案例：<style>.container {display: table;}.row {display: table-row;}.cell {dis转载 2017-01-20 13:39:45 · 484 阅读 · 0 评论 -
CSS布局 — 圣杯布局 与 双飞翼布局
一、圣杯布局 圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了，但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，它主要讲述了网页中关于最佳圣杯的实现方法。所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，它可以随着容器宽度的变化而自适应宽度。 在这篇文章中，作者指出了当转载 2017-01-20 13:41:19 · 269 阅读 · 0 评论 -
CSS3 之 渐变
1.线性渐变 .linear{ background:#f1f1f1; background: -moz-linear-gradient(top, #f8f8f8 0%, #ddd 100%);/*firefox*/ background: -webkit-gradient(linear, left top, lef转载 2017-01-20 14:54:57 · 343 阅读 · 0 评论 -
CSS3 Boxshadow
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .icon-img { display: inline-block;转载 2017-01-20 15:01:47 · 472 阅读 · 0 评论 -
CSS单位 px、em和rem
PX特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未转载 2017-01-20 15:03:01 · 243 阅读 · 0 评论 -
CSS 技巧
CSS中的一些小技巧原创 2017-01-20 15:18:24 · 520 阅读 · 0 评论 -
CSS 高级布局技巧
CSS高级布局技巧转载 2017-01-20 15:24:38 · 373 阅读 · 0 评论 -
兼容IE7+的rgba()的方法
CSS： //一般的高级浏览器都支持 background: rgba(255,255,255,0.1); //IE8下 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);第二句话的意思就是当上一行的透明转载 2017-01-20 13:13:55 · 1476 阅读 · 0 评论 -
判断窗口高度
// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;// 获取窗口高度if (window.innerHeight)winHeight转载 2017-01-20 13:10:10 · 631 阅读 · 0 评论 -
欢迎使用优快云-markdown编辑器
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.left{ width:0; height:0; border:20px solid; border-color: transparent tra转载 2017-01-20 10:53:21 · 212 阅读 · 0 评论 -
CSS背景图拉伸自适应尺寸，全浏览器兼容
背景图片自适应分辨率浏览器大小自动拉伸全屏代码 代码如下:<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"><img style="position:fixed;" src="http://xxxx.com/bg.jpg" height="100%" width="100%" /><转载 2017-01-20 10:55:29 · 1277 阅读 · 0 评论 -
CSS3 Transform
在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。语法：transform ： none | <transform-function> [ <transform-function> ]*//也就是:transform: rotate | scale | skew | translate |matrix;转载 2017-01-20 10:58:27 · 736 阅读 · 0 评论 -
CSS3 Transition
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” 语法:transition ： [<’transition-property’> || <’transition-duration’> || <’transi转载 2017-01-20 11:01:25 · 217 阅读 · 0 评论 -
CSS3 Animation
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation； 在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是”Keyframes”,我们把他叫做“关键帧”。 Keyframes具有其自己的语法规则，他的命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有转载 2017-01-20 11:06:16 · 210 阅读 · 0 评论 -
CSS3 Text-overflow
网页制作中一定碰到过内容溢出的问题，比如说文章列表很长，而其宽度又受到限制，此时超出宽度的内容就会以（…），以前实现这样的效果都是由后台程序截取一定的字符数在前台输出，另外一种方法就是使用js截取一定的字符数来实现。可是这两种方法都有其不足之处，比如说中文 和英文的计算字符宽度的问题，这个值不好计算，所以造成截取字符数不好控制，从而其通用性也差。语法： text-overflow ： clip |转载 2017-01-20 11:10:54 · 288 阅读 · 0 评论 -
CSS3 Box-sizing
box-sizing是CSS3的box属性之一。遵循CSS的Box model原理，为了能更好的学习和理解这个Box-sizing属性，我们有必要先了解一下CSS中Box model的原理。 CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实转载 2017-01-20 11:14:53 · 253 阅读 · 0 评论 -
CSS3 @font-face
@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。HTML Code:Neues Bauen Demo通过@font-face来定义自己的Web Font: @font-face { font-family: 'NeuesBauenDemo';src: url('../fonts/neues_bauen_demo-webfo转载 2017-01-20 11:16:01 · 270 阅读 · 0 评论 -
CSS3 Background
CSS3中给Background新追加的属性：《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》CSS2中的Background属性： background: background-color || background-image || background-repeat || background-at转载 2017-01-20 11:19:12 · 335 阅读 · 0 评论 -
让你相见恨晚的Photoshop 技巧
1.小抓手的组合用法全局拖拽——即使放大到很大比例仍然能瞬间让视图到达画布的任意位置。 方法为：按住空格键将鼠标变成小抓手后，再按住一个“Z”，然后按下鼠标——这时你会发现视图瞬间回到了全局，鼠标则变成了一个小方框，这个小方框就是你当前所能显示到的区域，拖动鼠标挪到想要去的地方，然后撒手，走你～2.通过形状新建参考线（Photoshop CC 2014.2）在上面提到过，通过选区边界的吸附特性来快转载 2017-01-20 11:25:24 · 486 阅读 · 0 评论 -
浮动布局：Flexbox
属性 ▋ 水平方向 justify-content：flex-start：左对齐；flex-end ：右对齐；center ：居中对齐；space-between：水平方向平均分布（如下图）； space-around：中心点向两边方向均匀分布（如下图）； ▋ 垂直方向 align-items： flex-start：顶部对齐； fl转载 2017-01-20 11:31:35 · 1861 阅读 · 0 评论 -
CCS3属性之text-overflow:ellipsis;的用法和注意之处
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法：text-overflow：clip | ellipsis默认值：clip适用于：所有元素clip： 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。 ellipsis： 当对象内文本溢出时显示省略标记（…）。在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候转载 2017-01-20 13:07:32 · 433 阅读 · 0 评论 -
iframe横向滚动条的问题
在主页面加 iframe scrolling="yes" 或 "auto"去掉子页面里的<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">横竖都去掉<iframe scrolling="no">想到设置b转载 2017-01-20 13:09:25 · 8018 阅读 · 1 评论 -
[前端技术]CSS秘密花园:色调
《CSS Secrets》是@Lea Verou最新著作问题为灰度图像添加色调（或已经转换为灰度的图像）是让一组风格非常不同的图像得到视觉上的和谐的一种流行而且优雅的方式。通常情况下，这样的效果是通过:hover或其它的交互来静态地添加和删除的。过去，我们使用一个图像编辑程序来创建两个版本的图像，然后写一些简单的CSS代码来完成它们之间的切换。这种方法是可行的，但是它添加了额外的H转载 2017-01-20 10:40:09 · 920 阅读 · 0 评论