CSS3
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克 原创
普及：<canvas> 元素用于在网页上绘制图形。这是一个图形容器，您可以控制其每一像素，必须使用脚本来绘制图形。 注意：IE 8 以及更早的版本不支持 <canvas> 元素。 贴士：全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special <!-- more --> 尤雨溪个人主页炫彩三角纽带...
花式填坑13期 | 如何高效开发企业级电商的前端？ 原创
电商前端项目作为互联网行业中的典型代表，应用最广、发展最显成熟，但在实际开发中也会遭遇各种问题。比如，更适合电商企业的前端开发方式有哪些、如何保证高效的前端开发等等。 慕课网开展的花式填坑活动，每期1个主题，1位大牛嘉宾。用户可围绕当期话题进行提问，嘉宾将在规定时间内针对问题进行详细解答。并且，小伙伴们也可以发表自己的见解与嘉宾展开讨论。 以下内容精选在花式填坑第13期。 Q：企业级的电商平台都包...
回顾css3的基础知识总结
css3的兼容性 -webkit 为chrome和Safari的兼容前缀 -moz 为Firefox的兼容前缀 -ms 为IE的兼容前缀 -o 为opera的兼容前缀 1，边框 border-radius添加圆角边框 border-radius:50%;为一个圆 box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] border-image:...
CSS3 animate,transform,and transiti
animate CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyf...
使用 VSCode 编辑器来编译 Sass 原创
VSCode 是继 Sublime Text3、Atom 后另一个让我爱不释手的编辑器，其颜值和插件生态圈与 Atom 不相上下，但比后者用起来更加丝滑流畅（Atom 需要4G+内存和SSD 才能逆天），所以自然成了我目前首选的编辑器。 前端项目自然少不了和 Sass 打交道，VSCode 提供了丰富的相关插件来帮助我们处理 Sass 相关任务。我用的是 Easy Sass 这款插件，目前最新版本...
常见轮播效果及其实现原理 原创
常见轮播效果及其实现原理 说明： 本项目只做最基础的原理分析与最简单的应用场景。 1. 简单做法：css定位 + js滑动动画 思路： 在同一个父容器内， 1. 通过改变父容器的`left` 值实现---视图切换， 2. 通过补充边界视图的过渡状态，外观上实现---无缝滚动。 核心代码：custom-carsoul.html || simple-slide.html //css #containe...
响应式网页开发你不知道的那些事
简介 响应式网页设计通过使用弹性网格和布局、响应式图片、CSS media query等技术手段，使页面能够自动切换分辨率、图片尺寸及相关脚本功能，以适应不同设备，来满足用户在各种设备环境下的需求。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向...
css垂直居中的3种方法
1、文本内容设置垂直居中。 单行文本, 则可设置 line-height 等于父元素高度。 居中代码： .text{ line-height: 50px; } 2、行内块级元素设置垂直居中。 居中需要试用到 display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。 代码： <!DOCTYPE html> <htm...
如何成为一个大牛前端工程师？ 原创
关于书籍： HTML、CSS 类别书籍，都是大同小异，在网上搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。 Javascript 的书籍 推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。这里推荐几本 Javascript 书籍： 初级读物：《JavaScript高级程序设计》：一本非常完整的经典入...
css中的注意项，可能会帮助到大家哦！
CSS样式层叠表 1、link与@import的区别（5点） （1）、link为XHTML的标签，可以引进CSS样式表，除了引进CSS文件还可以引进其他的文件如.js或.rss文件;@import为CSS中的标签，只能引进CSS文件。 （2）、加载顺序不同：link引进的CSS时同时也被加载，而@import引进的CSS要下载完才加载。 （3）、兼容性问题：@import是CSS2.1才出来的不被...
未定义宽度的div如何随内容居中（弹窗随内容大小变化）
未定义宽度前代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{...
html5 + css3快速记录笔记
1.高度可控的分割线（注册 | 登录） 注册<span><span>退出登陆 span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid #333;font-size:0;} 2.文字大小12px ，padding-left：22px，可以让li和图片对齐 3.background-clip:conter...
less学习手册（小结）
/*变量 @test_width:300px；用@开头 混合 .box{ .box2 将box2的属性全部给box1 } 参数 .text(@text){ border:solid yellor @text; } .text(20px) 混合--默认带值---传值带括号，不传值不需要 .text(@txt:30px){ left:@txt; } .box_rodius 需要兼容-webkit- -...
17-7-15 响应式web设计---媒体查询@media
定义和使用 使用@media，可以针对不同媒体类型定义不同的样式 @media 媒体类型and (媒体特性) {样式} 媒体类型 主要有三种Screen (电脑显示器)和 All(所有设备) 和 Print(打印机)为最常见的三种媒体类型 最大宽度max-width 是媒体类型小于或者等于指定的宽度时，样式生效 最小宽度min-width 是媒体类型大于或者等于指定的宽度时，样式生效 body{ ...
一张思维导图搞定CSS3全部新特性【king】 原创
最近这张图火了，让我火遍了大江南北，震惊了整个CSS圈 一张思维导图搞定CSS3全部新特性（图片太大，切片上传）原图下载地址 由king老师历时一个月，精心收集与整理的CSS3全部新特性的素材，包括国外资源、辅助工具、项目素材、实战案例...就不一一列举了，好不好看了就知道，兄弟姐妹们，顶起哈~ 山哥出品，必属精品 Powered By King...
热门手记
-
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战等等
295浏览 5推荐 0评论 -
如何成为一个大牛前端工程师？
1319浏览 9推荐 1评论 -
回顾css3的基础知识总结
144浏览 2推荐 0评论 -
常见轮播效果及其实现原理
235浏览 1推荐 0评论 -
使用 VSCode 编辑器来编译 Sass
388浏览 7推荐 0评论