摘要：
<template> <div class="load"> <div class="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></spa 阅读全文
随笔分类 - css
flex布局学习笔记
2018-07-08 14:07 by 路途遥远，Go~, 258 阅读, 收藏,
摘要：
前端笔试面试经常会问到：不定宽高如何水平垂直居中。最简单的实现方法就是flex布局，父元素加上如下代码即可： display: flex; justify-content: center; align-items :center; 。下面详细介绍下flex布局吧。 2009年，W3C提出了 Flex 阅读全文
div居中的几种方式
2018-07-08 13:53 by 路途遥远，Go~, 1361 阅读, 收藏,
摘要：
摘自：https://www.cnblogs.com/ones/p/4362531.html DIV居中的几种方法 1. 1 body{ 2 text-align:center; 3 } 缺点：body内所有内容一并居中 2. .center{ position: fixed; left: 50%; 阅读全文
三栏布局的5种解决方案及优缺点
2018-07-08 13:50 by 路途遥远，Go~, 445 阅读, 收藏,
摘要：
摘自：https://www.cnblogs.com/chengzp/p/layout.html 三栏布局的5种解决方案及优缺点 假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。 这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到 阅读全文
旋转的正方体
2016-08-24 16:29 by 路途遥远，Go~, 322 阅读, 收藏,
摘要：
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>backface-visibility_CSS参考手册_web前端开发参考手册系列</title><meta name="author" cont 阅读全文
css 正方体
2016-08-24 16:20 by 路途遥远，Go~, 414 阅读, 收藏,
摘要：
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>transform-style_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content= 阅读全文
鼠标放上去，不同的cursor光标类型
2016-08-24 14:08 by 路途遥远，Go~, 2229 阅读, 收藏,
摘要：
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>cursor_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘 阅读全文
发光边框
2016-08-24 10:45 by 路途遥远，Go~, 451 阅读, 收藏,
摘要：
.active{ margin: 0.37rem 0;//边框粗细及颜色 border: 2px solid #00ffff;//圆角矩形 border-radius: 5px;//位置及晕染大小 box-shadow: 0 0 15px #00ffff; //兼容性 -webkit-box-sha 阅读全文
减去border边框
2016-08-18 16:40 by 路途遥远，Go~, 281 阅读, 收藏,
摘要：
width: 100%; border: 1px solid transparent; box-sizing: border-box; 阅读全文
伪类共用样式缩写形式
2016-08-18 15:53 by 路途遥远，Go~, 324 阅读, 收藏,
摘要：
.top::before , .top::after{ content: ""; position: absolute; width: 200%; left: 0; height: 0; border-top: 1px solid #cccccc; transform-origin: left to 阅读全文
css 字体样式
2016-08-09 15:03 by 路途遥远，Go~, 3584 阅读, 收藏,
摘要：
[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。 解释： 所谓英文 Family Name，为字体文件的一个元数据，常见名称如下： 示例： [强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量 阅读全文
css 去除标签默认样式
2016-08-09 14:12 by 路途遥远，Go~, 921 阅读, 收藏,
摘要：
p,ul,ol,li,dl,dt,dd { list-style-type: none; margin: 0; padding: 0;} 阅读全文
伪类写border， transform: scale3d() 及兼容性
2016-08-09 14:05 by 路途遥远，Go~, 2627 阅读, 收藏,
摘要：
.top::before { content: ""; position: absolute; left: 0; width: 200%; height: 0; border-top: 1px solid #cccccc; transform-origin: left top; transform: 阅读全文
css 字数超过一行显示省略号
2016-08-09 14:02 by 路途遥远，Go~, 894 阅读, 收藏,
摘要：
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; 阅读全文
display:flex 多栏多列布局
2016-08-02 10:57 by 路途遥远，Go~, 4502 阅读, 收藏,
摘要：
转自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况：火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，比较适合移动端开发使用， displa 阅读全文
css 滑动按钮样式
2016-08-02 10:48 by 路途遥远，Go~, 1012 阅读, 收藏,
摘要：
<div class="pub_switch_box"> <input type="checkbox" id="pub_switch_a1" class="pub_switch" /> <label for="pub_switch_a1"></label> <input type="checkbox 阅读全文
关于伪类元素:before和:after
2016-08-02 10:16 by 路途遥远，Go~, 13582 阅读, 收藏,
摘要：
关于伪类元素:before和:after CSS中存在一些比较特殊的属性，称之为伪类，它们之中最常用的就是定义链接的伪 :link：未被访问状态 :visited：已被访问状态 :hover：鼠标悬停状态 :active：活动状态 除了它们，还有一些不被常使用的伪类，有:focus，:first-c 阅读全文
浙公网安备 33010602011771号