CSS
why_su
那天的日记天飘着雨。
展开
-
CSS学习(三)—— device-loop
学习地址: https://github.com/hakimel/css/tree/master/device-loop 通过案例理解position:relative和position:absolute: https://segmentfault.com/a/1190000006924181#articleHeader3不管是块级元素还是行内元素,应用了position:ab...原创 2018-08-10 10:22:10 · 263 阅读 · 0 评论 -
Less简单了解
地址(づ ̄3 ̄)づ╭❤~less需要编译成css运行,①这种写法,一旦行数多起来,看起来不明晰.box1{}.box1 .box2{} 使用less 简写为嵌套形式:.box1{ .box2{ }}如果要添加 :hover 的话,需要在前面添加 &.box1{ .box2{ &:hover{ ...原创 2019-01-15 15:11:07 · 193 阅读 · 0 评论 -
学习【尚硅谷HTML5前端视频】主讲人李立超(中篇,下篇)
视频地址ヾ(✿゚▽゚)ノ1.电脑中的 1个像素的大小,相当于手机的4个像素的大小。也就是说,电脑中12px的长度,在手机中默认乘以4,为48像素 1em = 1font-size , 1em 是相对于自身的字体大小来计算的。 颜色 rbg(255,255,255) rgb(100%,100%,100%) 值在 0-255之间,用十六进制表示: #红色绿色蓝色 #...原创 2019-01-09 16:43:37 · 4046 阅读 · 0 评论 -
学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)
这位老师讲解的是真心好 地址(。◕ˇ∀ˇ◕)。1,这里使用 UTF-8 编码。使用谷歌欧朋浏览器显示正常,但使用火狐,Edge,IE就是乱码,使用Sarifi浏览器也是乱码这是为神马呢?因为谷歌欧朋浏览器默认解码是UTF-8,火狐IE(在中文系统)默认解码是GB2312,Sarifi浏览器默认解码是ISO-8859-1解决方法:告诉浏览器编码格式<meta ch...原创 2019-01-04 14:04:40 · 8781 阅读 · 0 评论 -
学习【CSS权威指南】(一)
不要使用 <font>行内元素 内不能包含 块级元素<em><p>这里的p标签是不能在这里的</p></em><p><em>这样才正确</em></p>要在<head>标签中引用<link rel="stylesheet" type="text/css...原创 2018-11-23 16:27:14 · 315 阅读 · 0 评论 -
CSS世界(读书笔记一)
1 , 对 CSS2.1的支持从 IE8开始的。 2, 元素都有内外两个盒子。display: inline-block; 可以理解为有两个盒子,外面的盒子是inline(能和图文在一行显示),里面的盒子是 block (能设置width/height)。 所以 display:block;其实是 display: block-block;的 简写,display: table;可以...原创 2018-08-20 10:38:42 · 623 阅读 · 1 评论 -
CSS学习(二)—— cloudy-spiral
学习地址: https://github.com/hakimel/css/tree/master/cloudy-spiralperspector属性的 动画演示:http://www.fangyexu.com/tool-CSS3-Perspector.html深入理解CSS变形transform(3d): https://www.cnblogs.com/xiaohuochai/p/53514...原创 2018-08-08 17:07:29 · 297 阅读 · 0 评论 -
CSS学习(一) —— checkwave
学习地址: https://github.com/hakimel/css/tree/master/checkwave 目录结构: 代码如下: index.html&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;原创 2018-08-08 12:13:55 · 247 阅读 · 0 评论 -
Top Pens Of 2013(098)—— Responsive progress meter
2013年前100:https://codepen.io/2013/popular/pens/ 第098:https://codepen.io/oliverturner/pen/fwpaF学后有感:对于 html的 class的名字是自己随便命名的吗?演示效果: 代码如下: index.html<!DOCTYPE html><html lang="...原创 2018-08-15 08:52:31 · 157 阅读 · 0 评论 -
Top Pens Of 2013(099)—— Fixed Image Backgrounds
2013年前100:https://codepen.io/2013/popular/pens/ 第100:https://codepen.io/dropside/pen/bxhke学后有感:暂时还搞不懂 box-sizing: border-box; 的“具体”作用。具体详解有该博客: https://blog.csdn.net/qq_37453240/article/details/7...原创 2018-08-14 14:43:47 · 290 阅读 · 0 评论 -
Top Pens Of 2013(100)—— Direction aware hover pure CSS
2013年前100:https://codepen.io/2013/popular/pens/ 第100:https://codepen.io/FWeinb/pen/GrpqB 成品: 该如何实现? 5个正边形,初始安排在上下左右方向,使用overflow:hidden 可以将其隐藏 将c看做 1, 得到 a 的值 是 1 * sin45° = 0.7071 将 小方块 ...原创 2018-08-14 11:07:09 · 180 阅读 · 0 评论 -
CSS学习(四)—— transition, animation, transform
学习地址: https://github.com/hakimel/css/tree/master/flipside CSS动画简介: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.htmltransition的作用在于,指定状态变化所需要的时间。 transition: 1s;表示持续1秒...原创 2018-08-10 15:57:21 · 202 阅读 · 0 评论 -
学习CSS3 (一)
地址(╬ ̄皿 ̄)=○#( ̄#)3 ̄) 层叠样式表 cascading style sheets1. 字体自定义字体:将 .ttf字体文件 保存在 font 目录下。 使用 @font-face指定字体的名字和路径,注意只能写在外部,不能写在选择器里面<style type="text/css"> @font-face { ...原创 2019-01-25 10:57:05 · 630 阅读 · 0 评论