大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

CSS(层叠样式表)

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。[2] 

css实现边框动画

css实现边框动画 1、css实现边框动画 效果如图: body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before

css权重

css权重 1、什么是css权重?css6大基础选择器 css权重指的是css6大基础选择符的优先级,优先级高的css样式会覆盖优先级底的css样式,优先级越高说明权重越高,反之亦然。 css6大基础选择器: a)、id选择器(#box{}) b)、类选择器(.

用Vue.js写一个 自适应_等比缩放_无缝切换轮播

imgsWrp { display:flex; background-position:center center } 这次轮播li里不是直接套图片img了,使用了我之前《自适应缩放图文列表》同样的原理,所有的图片都是设置div.imgsInner的背景。然后,用padding撑开div.imgsInner。ul里的li,使用的flex布局就不多赘述了,相关的文章资料好大一坨呢! JavaScript 结构 var vm = new Vue({ el: "#app", data: { imgsArray: [], lens:0 }, beforeCreate:function(){ axios.get('imgslist.json') .

论省略号...的4种写法

line-height: 20px;prg2 { display: -webkit-box;prg3的省略号,是目前比较合理的。javascript的方式,灵活简便,唯独增加了些许js的代码量。毕竟不是使用的css属性。 JavaScript 结构 // 立即执行函数,将shortLine函数挂到window上,这样就可以直接调用了 (function (w) { var shortLine = function (pragrafsClass, number) { // 获取需要展现省略号的那些段落的class元素 var prgs = document.getElementsByClassName(pragrafsClass);

2018年网络开发者应该关注什么

以使CSS变量成为全局范围。然后,在按钮样式的上下文中使用该变量。 :root { --button-bg-color: #FF00FF; display: inline-block; height: 24px; } 可以选择Element然后getComputedStyle使用元素调用获取用于使用JavaScript 设置样式的变量的值- 将变量名称作为String传递给getPropertyValue方法。 let element = document.querySelector('.getPropertyValue("--button-bg-color") // returns #FF00FF

Webpack操作指南

bundle.js', path: path.resolve(__dirname, 'release') } 执行打包命令 npm run dev webpack打包输出几个bundle文件并不是由模块依赖树决定,而是根据打包配置文件中的output决定。即使src/index.js文件引入了src/print.js文件,仍会将后者打包输出为单独的bundle。 清理打包文件 安装依赖 npm install clean-webpack-plugin --save-dev 编辑打包配置文件 webpack.dev.config.js const CleanWebpackPlugin = require('clean-webpack-plugin');

HTML页面加载速度优化

若压缩需要指定任务顺序,则需要引入run-sequence,return runSequence( 'task1-name','task2-name','task3-name'); var pngquant = require('imagemin-pngquant'); 参考文章 Web前端性能优化——如何提高页面加载速度 gulp-imagemin、gulp-tinypng-compress、gulp-tinypng-nokey图片压缩优化详解及对比 彻底理解浏览器缓存机制 web性能优化之:no-cache与must-revalidate深入探究 HTTP响应头之ETag 浏览器同域名请求的最大并发数限制

移动端开发就不需要学习CSS了?

item { float: left; border-top: 1px solid #fff; } 实现效果: flex上下划分效果 中间那条竖空白间隙错位了,为什么?按照预期我们上面块左侧宽度66.6%,下面块左侧宽度33.3% + 33.3%,两个宽度应该相等才对。 然而我们忽略了flex一个重要特性,子元素会自动占满父元素剩余空间,这时子元素宽度计算受flex控制,下面块的3个子元素宽度计算并非一定是相等的,会有些许差异,此时66.6% !

css响应式设计

css响应式设计 首先明白一个需求:某网站在大屏幕上时布局如下: 屏幕 1024px 屏幕大小为768px到1024px时实现布局如下: 小于768px时实现如下布局: 实现这几种效果就是响应式布局了。说下实现方式使用css @media分为三种情况: 1.当@media screen and (max-width:768px)时,及屏幕大小小于768时为一种css样式, 2.当 @media screen and (min-width:768px)and(max-width:1024px)时,及屏幕宽度在768和1024时为一

聊一聊CSS文本两端对齐

同时给这个元素添加一个伪元素after,伪元素内容为空即可。 第一次纯手机手戳,有误或者不完善之处敬请谅解,欢迎评论指出。 [ 转载请注明出处,禁止用于盈利 ]

面试题基础篇(html,css)--001

使用哪种HTML.或XHTML规范。(重点:告诉浏瓷器按照何种规范解析页面) 4. 为什么利用多个域名来存储网站资源会更有效? 外部样式表,引入一个外部css文件 内部样式表,将css代码放在 标签内部 内联样式,将css样式直接定义在HTM元素内部 6. CSS中可以通过哪些属性定义,使得一个DOM元素不显示在测览器可视范围内?

从零开始react项目构建

从零开始react项目构建 react项目构建使用脚手架:create-react-app 配置:antd UI框架配置和less配置 一、命令行依次输入如下的命令 npm install -g create-react-app create-react-app my-app cd my-app npm start 创建完成后文件的结构如下: 二、public文件 public/favicon.ico html的ico 图标,在index.html中会有引入; 可以使用图片,通过线上ico图标制作出,. 5.组件内引用 -import Button from 'antd-mobile/lib/button';

使用CSS绘制一个海绵宝宝

使用CSS绘制一个海绵宝宝 其实使用CSS绘制图案对图案的设计要求远比对CSS的掌握需求要高的多,理论上基本图形+遮罩+基本变换可以画出来的图都是可以用CSS画的,这个海绵宝宝是从dribbble上面找的,自己又用sketch重新画了一遍,然后又用CSS比对着绘制的,重点是border-radius、boder画三角形和overflow:hidden做遮罩,渐变和内阴影可以使图案更有层次感,整个过程还是挺有趣的。 在

vscode之必备插件推荐

vscode之必备插件推荐 工欲善其事,必先利其器 Auto Close Tag 自动闭合标签 Auto Rename Tag 自动完成另一侧标签的同步修改 Path Intellisense 自动提示文件路径,支持快速引入文件 Open HTML in Default Browser 右键:在浏览器中打开 Live Server vscode不是IDE

如何在Angular中使用better-scroll插件

@Component({//欢迎加入全栈开发交流圈一起学习交流:864305860 selector: 'app-listscroll', templateUrl: './listscroll.component.html', styleUrls: ['./listscroll.component.css'] }) export class ListscrollComponent implements OnInit { @ViewChild('scroll') scrollEl: ElementRef; @Input() private height: number; // 初始化 setTimeout(() = { this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true});

Vue webpack打包后,css样式发生改变或不起作用

webpack2要求必须写-loader; 没写style-loader则build文件会生成,但你会发现页面中js不起作用; 没写css-loader则会直接报错:’You may need an appropriate loader to handle this file type.’ style-loader只是没起作用而不报错就意味着它的作用是将样式插入到DOM元素中;结合网上的答案以及观察预览页面发现:style-loader会在页面的header标签里生成内部的 ;

h5页面适配iPhone X的方法

h5页面适配iPhone X的方法 项目接近尾声,测试时突然想起还有iphoneX需要适配,虽然页面都是自适应,但是由于iPhone X的特殊性,还是需要特殊对待。因为这个h5项目嵌入在原生项目中,适配就会有有种方式:1. //为底下圆弧的高度 34px } 2.媒体查询 @media screen and (device-width:375px) and (device-height:812px){ //在这里做iPhone X的判断 // #app { //margin-top: 88px;

CSS动画相关(打字动画、逐帧动画、环形路径平移)

animation: typing 4s steps(15), caret 1s steps(1) infinite;这里用h1标签包裹文字,设置一个默认宽度15ch,ch表示数字“0”的宽度,对于等宽字体来说,我们用ch单位来表达这个标题的长度,实际上就是字符的个数。这样写死宽度是不合理的,万一字符变多了还得改,于是设置标题宽度这我们得用到一点JS。 let text = document.getElementById('text'); } @keyframes spin { to { transform: rotate(1turn);

VS Code 中常用的 PHP 编程插件(2018)

VS Code 中常用的 PHP 编程插件(2018) 工欲善其事,必先利其器 侵删 前言 visual studio code是Microsoft开发的一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。 插件 Beautify(特别推荐) #用来格式化html js css代码 Bracket Pair Colorrizer(特别推荐) #用来区分括号 Chinese(Simplified) Language(特别推荐) #中文语言包 Code Spell Checker #用于检测代码语法 PHP Debug #用