整体思路是:通过裁切(clip)产生两个半圆展示出静态的进度条,而后通过旋转(rotate)角度的变化产生动态效果。 先来回顾两个基础知识点 (1)css的一个不常见的属性: clip: rect(top, right,…
CSS实现Tab布局
一、布局方式 1、内容与tab分离 <div class="container"> <div class="tab-content"> <div id="item1" class="item…
用一个div画出关闭图标
今天实现一个 用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布局。css样式如下:…
前端优化
1.JavaScript压缩和模块打包 模块打包则用于将不同脚本打包在一起并放进同一文件。更少的 HTTP 请求和单个文件解析都可以减少加载时间。 使用 Webpack 打包 CSS 文件以及合并图片。这些特性都可以有助…
CSS页面布局
实现三栏布局,中间自适应(margin负值法) <!--放第一行--> <div class="middle">middle</div> <div class="left">…
最近很火的百度MIP之 zblog改造
很多人都问过我,咖啡你的MIP主题模板到底怎么改的。我就和zblog那些开发者交流了下。zblog的MIP改造非常简单。今天就免费给大家献上改造方案。好了,直接进入正题!模板文件MIP规范自己改,不多说。模板目录下的in…
flex属性详解
在拜读了阮一峰的flex布局教程和HaoyCn有关flex属性的回答后整理成此文章,以便加深印象。 flex属性是flex-grow,flex-shrink,flex-basis三个属性的简写形式。 flex布局包括外部…
滑动效果的原理及实践一个滑动小插件
本文转载自blog 转载请注明出处 目录 前言 基本原理 html结构 实践 小结 前言 移动端,滑动是很常见的需求。很多同学都用过swiper.js,本文从原理出发,实践出一个类swiper的滑动小插件ice-skat…
CSS中常见的长度单位
px – 像素 px 是 CSS 中最常用的长度单位,可以用来指定字体大小,元素的宽度、高度、边框、内边距,外边距的大小等等, 它是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度…
关于一些Vue的文章。(1)
原文链接我的blog,欢迎STAR。 今天分享的一篇文章是关于vuex的源码解析的,链接vuex源码解析,在现在所做的项目里的每个组件,至少都有一个辅助函数,或者是....mapGetters,或者是...mapActi…
前端基础知识学习记录(一)
前端基础知识学习记录(一) 1、CSS position 属性 通过使用 position 属性,可以选择四种不同类型的定位,会影响元素框生成的方式。position 属性值的含义: static:元素框正常生成。块级元…
CSS Flexbox学习笔记
本文记录了我在学习前端上的笔记,方便以后的复习和巩固。 开始使用Flex <ul> <li></li> <li></li> <li></li&…