将自己每天看到的比较不错的教学视频和博客地址记录下来,时常温习!点击下面的链接即可快速查看详情!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
20170331
20170401
images
README.md

README.md

20170331

小tip: CSS3如何实现圆角的outline效果?

css outline实践研究

秋月何时了,CSS3 border-radius知多少?

教学视频- CSS 之深入 border

教学视频- 重拾CSS的乐趣

利用 outline 可以给一个元素设置 hover 样式,这样和使用 border 有什么不同之处呢? outline 不占据布局空间,也就是说它不影响元素的大小,如果是这样的话,那可是可以解决很多问题啊,比如一个图片默认没有边框,hover的时候有一个1px的边框,那么如果不做处理盒子会抖动一下。

不过 outline 没有圆角的效果,Firefox 是个例外,它有一个 -moz-outline-radius 属性,其实 outlineborder 用法是很像的。为了在不影响元素大小的情况下,给一个元素添加一个外边框,而且这个元素还拥有圆角,就不能再使用 outline 了,可以使用 box-shadowbox-shadow 经常使用的参数是前五个,水平偏移,垂直偏移,模糊半径,扩展大小,颜色。其实这个拓展大小就好像是给 box-shadow 加了一个 padding,利用 box-shadow: 0 0 0 5px red 就可以在不改变元素大小的情况下添加一个宽度为 5px,颜色为红色的边框。

还可以使用 outline 画出一个一个 + 的符号,用以下代码即可:

 div {

	margin: 0 auto;
	width: 48px;
	height: 48px;
	background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
	outline: 16px dotted #fff;
	outline-offset: -16px;
 }

 只需要将 outline-width 设置为元素宽高的 1/3outline-offset 设置为宽高的 -1/3outline-style 设置为 dotted 就可以完成这个效果。

20170401

视屏 - CSS 深入理解之 float 浮动

<div id="hwa-container">

        <img src="2.jpg" id="hwa-img">

        <div id="hwa-content">
            <p>content...</p>
            <img src="2.jpg">
        </div>

</div>

浮动两侧自适应布局:只需要给 #hwa-img 设置 float,给 #hwa-content 设置 display: table-cell(主要是为了触发 BFC,清楚浮动影响)。

右侧固定左侧自适应布局: 给 #hwa-content 设置 width: 100%float: left ,然后给 #hwa-container 设置 padding-right: 48px 这个 48px 的值就是 #hwa-img 的宽度,因为我们要用这个位置放置 #hwa-img,最后一步就是给 #hwa-img 设置 margin-right: -48px,让其能够填充到 #hwa-container 的右侧。

浮动与单侧尺寸固定的流体布局:为 #hwa-img 设置 float:left, 然后将 #hwa-contentmargin-left 设置一个大于 #hwa-img 宽度的值即可。

!!重点推荐 :

CSS布局奇淫巧计之-强大的负边距

负值之美:负margin在页面布局中的应用

理解 CSS 中的 BFC

20170402

慕课网 - CSS 3D特效

慕课网- 图片阴影

父级设置了 relative,子元素设置了 absolute,且均设置了 z-index 属性值的时候,父级对子元素的层级有限制(即不论子元素 z-index 值大小,层级不“正常”显示)。如果将父级的层级设置为:z-index:auto ,或者父级不设置 z-index 属性,则子元素的 z-index 不受父级限制,即正常显示。)

曲线阴影的原理如下:将元素的 afterbefore 设置为带圆角的矩形(宽度略小一点),将其 z-index 设置为处于元素之下,让其阴影露出来即可。

翘边阴影的原理如下: 将元素的 afterbefore 设置为对称的平行四边形(可以通过 skewrotate 获得),为它们设置好阴影并处于元素之下即可。

20170403

慕课网 - CSS3实现网页平滑过渡效果

虽然语义性较差,但是可以利用 input[type="radio"] 模仿点击切换功能。

博客园- RGBA与Opacity区别小解

概括的来说,rgbaopacity 的区别如下: opacity 会继承父元素的 opacity 属性,而 RGBA 设置的元素的后代元素不会继承不透明属性。

文章 - css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

文章 - 浅谈 CSS 清除浮动的 6 种方法

文章 - float, relative, absoulte

知乎 - 在 CSS 中,用 float 和 position 的区别是什么?

文章 - 标准W3C盒子模型和IE盒子模型

20170404

文章 - CSS3 动画属性 animation 的基本用法

文章 - 如何理解animation-fill-mode及其使用?

20170405

文章 - CSS3 Filter的十种特效

文章 - ubuntu12.04装配IE8(playOnLinux)

文章 - A Complete Guide to Flexbox

文章 - Quick Tip: Get to Know the CSS Object Fit and Position Properties

文章 - Finally! CSS Triangles Without Ugly Hacks

文章 - CSS Grid VS Flexbox: A Practical Comparison

文章 - Which tool to use? Flexbox or Grid?

文章 - Quick Tip: The Easiest Way To Show Browser Notifications

网站- 一键生成雪碧图

20170406

文章 - 学习Javascript闭包(Closure)

20170407

当文字颜色深于背景颜色时,可以为文字右下方添加亮色阴影,代码如下:

text-shadow: 1px 1px 0 rgba(255, 255, 255, .7);

当文字颜色浅于背景颜色,则可为文字左上方添加深色阴影来形成内浮雕效果,代码如下:

text-shadow: -1px -1px 0 rgba(0, 0, 0, .7);

20170408

margin 负值边距会影响文档流和浮动流的计算,不过这种计算是从左到右,从上到下的,也就是说对于一个元素而言,如果为其设置 margin-rightmargin-bottom 为负值 x,则文档流和浮动流会将元素的大小视为 width + x,而如果将其设置为 margin-leftmargin-top 则不会这样计算,它会将元素往上或者往左拉。

20170409

如果 input 标签没有被放在 form 标签中,那么你设置的 required 属性是无效的。

文章 - 如何动态修改 placeholder 的颜色?

20170411

文章 - VueJs: The Basics

文章 - VueJs: Components

文章 - Creating a Markdown Editor with VueJs and GitHub's API

20170412

文章 - 2017年要学习的3个CSS新特性

20170414

文章 - CSS——LESS

20170415

文章 - 纯CSS实现瀑布流布局

文章 - 《你不知道的 CSS》之等比例缩放的盒子

20170418

文章 - requestAnimationFrame The secret to silky smooth JavaScript animation!

文章 - 破解前端面试(80% 应聘者不及格系列):从 DOM 说起

20170419

文章 - 开始使用Web Workers

文章 - css3属性column知多少

文章 - IndexedDB简介与入门

文章 - CSS3 filter:drop-shadow滤镜与box-shadow区别应用


20170427

webpack: Cannot find module 'webpack/lib/node/NodeTemplatePlugin


20170502

bodyParser中间件的研究


20170504

node-http

20170505

NodeJS包教不包会 Git 教程

20170506

HTML's New Template Tag

20170514

Understand JavaScript Closures With Ease

JavaScript Variable Scope and Hoisting Explained

JavaScript Objects in Detail

20170516

【转载】CSS书写模式

理解Flexbox:你需要知道的一切

text-stroke实现文本描边效果

20170517

CSS进阶:提高你前端水平的 4 个技巧

What Makes For a Semantic Class Name?

20170524

Sass Guide

Building a Horizontal Timeline With CSS and JavaScript

Building a Vertical Timeline With CSS and a Touch of JavaScript

获取元素CSS值之getComputedStyle方法熟悉

20170605

精通 gulp 常用插件

20170817

JavaScript Promise 迷你书

20170819

Sass Basics

20170825

你所不知道的 CSS 动画技巧与细节

20170908

CSS Reference

HTML Reference

20170910

A Complete Guide to Grid

20170913

二叉树前序、中序、后序遍历相互求法

20170921

你真的了解word-wrap和word-break的区别吗?

20171021

加速nginx: 开启gzip和缓存 nginx proxy_cache 缓存配置

20171022

X-Forwarded-For 和 X-Real-IP 的区别?

20171109

Learn Vuex by Building a Notes App

Vue项目上传github并预览

20171112

React创建组件的三种方式及其区别

React 入门实例教程

20171113

获取各个网站 Favicon 的api接口