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

HTML

超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

表格单元格内的两端对齐

表格单元格内的两端对齐 前端入坑纪 49 许久未更,最近做了个表格。碰到了两端对齐的坑(以前看到过,后来忘了。果然好记性不如烂笔头),今天来分享下~ 好,详解如下! OK,first things first! github项目地址 性冷淡表格 HTML 结构 姓名 休泽 职业 修业 就是这么简单的一个表格,这里的span是整个效果的灵魂,mark CSS 结构 table { width: 300px; height: 30px; display: inline-block;

自适应缩放图文列表

margin: 0;imgWrp { width: 0; background-repeat: no-repeat; flex-flow: row nowrap; } li p { width: 70% } li以display:flex来展现,这样的话,里面的div和p这类子元素可以很好的控制,比float好用多了。 flex-flow控制子元素的方向和是否换行, justify-content: space-around;设定子元素的主轴排列方式,align-items: center;

又一个css3 loading 打转的圆

又一个css3 loading 打转的圆 前端入坑纪 52 上回写过一篇《一直打转的圆圈》的css3 loading 效果,用的是障眼法. 今天来分享真正的环形圆圈来做, 其实是border啦,哈哈 好,详解如下! OK,first things first! github项目地址 你就是个圆 HTML 结构 就是只用一个div, 任性不, O(∩_∩)O哈哈~ CSS 结构 body{ background-color: aliceblue;circle{ border: 8px solid rgba(218, 141, 218, 0.5); width: 100%; left: -8px;

让渐变成为滚动的进度条吧

bar{ height: 30px; infinite 可以让动画一直循环不停。 这里的 widtheft 2s linear infinite,仅仅是展示效果,请略过 3.@keyframes backgroundPosition 这个是条纹动起来的原理,简单说,便是背景的x轴上的位置,从0px走到60px。 好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福! 打开支付宝首页搜 625097528 领红包,领到大红包的小伙伴赶紧使用哦! 支持你我,扫一扫红包

css3 飘雪的日子

css3 飘雪的日子 前端入坑纪 54 用bing搜索的时候,看到它的雪花效果,那就地仿照一个咯~ 好,详解如下! OK,first things first! github项目地址 圣诞临近啦 HTML 结构 这么多class为snow的div,都是为了设置雪花背景和动画用的 CSS 结构 body{ background-color:black;snowWrp{ position: fixed; height: 100%;snow1 { animation-delay:10s;snow2 { animation-delay:20s; } @keyframes falling{ 0%{ top:-100%;

可以缩放的侧边栏

mainWrp { padding: 10px; background-color: lightcyan; z-index: 2; transition: transform 1s cubic-bezier(0.215, 0.610, 0.355, 1) } .shrik { transform: scale3d(.8) translateX(70%) } nav { position: fixed;

滚动时的渐显渐隐标题

} #titWrp { background-color: rgba(255, 255, 255, 0); } 对标题设置背景,后续都是操作这个背景的透明度 JavaScript 结构 var tit = document.querySelector('#titWrp') var doc = document.body || document.documentElement // 当滚动时,用节流函数来间隔时间段触发绑定的函数操作 window.addEventListener("scroll", _.throttle(function () { // 仅在小于100时,也就是滚动值100以内才执行对应的操作 if(doc.scrollTop 100){ var num = doc.scrollTop;

tab滑动切换内容效果

tab滑动切换内容效果 前端入坑纪 57 今天来分享个曾见到过的tab效果! 好,详解如下! OK,first things first! 点我查看实际效果 简约界面 HTML 结构 a1 a2 a3 a4 a5 a6 a7 a1_Content a2_Content a3_Content a4_Content a5_Content a6_Content a7_Content 所有滚动效果的div都外部嵌套两层div,最外层为屏幕的宽度,次外层为包裹所有内部div一起平铺开来的宽度 CSS 结构 html

环绕按钮动画———原生javascript手作

环绕按钮动画———原生javascript手作 前端入坑纪 58 今天来分享昨天和小伙伴聊到的一个效果 好,详解如下! OK,first things first! 点我查看实际效果 集齐7颗召唤神龙吧,骚年 HTML 结构 B1 B2 B3 B4 B5 B6 B7 ROT 所有的按钮都是包裹在div.roller 里,div.roller 的底色与底部条颜色相同,以制造凸的效果 CSS 结构 html, body { margin: 0; z-index: 99; transform: translateX(-50%) } .

给我一首诗的时间

给我一首诗的时间 前端入坑纪 59 今天来分享最简单版打字机效果 好,详解如下! OK,first things first! 点我查看实际效果 诗仙,你好 HTML 结构 通过canvas里面来模拟打字的效果,所以一个canvas容器是必须的 CSS 结构 html,body { margin: 0; font-size: 0; j = 0 } }else{ clearInterval(tik) } }, 170);

不使用cli搭建angular项目

@NgModule({ imports: [ BrowserModule ], declarations: [AppComponent], providers: [], bootstrap: [AppComponent], }) export class AppModule { } app.component.ts: import { Component } from '@angular/core';/src/main.ts') }, output: { path: path.resolve(__dirname, 'wwwroot'), filename: '[name].ts)$/, use: [{ loader: '@angular-devkit/build-optimizer/webpack-loader', options: { sourceMap: false } }, '@ngtools/webpack'] }, { test: /\./tsconfig.json', entryModule: '.

九种"姿势"让你提高Angular性能

九种"姿势"让你提高Angular性能 众所周知AngularJS是当今应用最广泛的Web应用程序框架,并且它的受欢迎程序在其期待已久的AngularJS 4.0到来之后不断上升。但是我们可以看到,几乎所有的Angular专家仍然在努力解决与AngularJS性能相关的各种问题,尽管它自己也做了很多的优化。 在对AngularJS的性能进行了大量讨论之后,现在是时候看看这九种可以提高AngularJS性能的姿势了。 1. 使用Ba

VUE-CLI 3 踩坑

tap(args = { args[0]['process.env'] = merge(args[0]['process.env'], test[process.env.NODE_ENV]) return args }) } } 链式操作 配置markdown npm install vue-markdown-loader markdown-it markdown-it-container --save 文件 vue.config.js const markdownRender = require('markdown-it')() module.exports = { chainWebpack: config = { config.module .rule('md') .nesting === 1) { // 1.获取第一行的内容使用markdown渲染html作为组件的描述 let demoInfo = tokens[idx].info.trim().

当时学会了,过后就忘,怎么办呢?

当时学会了,过后就忘,怎么办呢? 前有同学问过我这样一个问题,“总体来讲,都能听懂,但后面的学完,前面的都有些记不清楚了,怎么办呢?” 记得我当时是这样回复他的,“能听懂就好,因为肯定要忘,没有谁能把讲的东西全都从头到尾都记住。”人脑子不是机器,人能牢记一个东西,靠的是不断的重复,形成肌肉记忆,正所谓的,无它,唯手熟耳。 而你在学习的

【Vue17】单页应用和多页应用

【Vue17】单页应用和多页应用 多页应用 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档

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');

基于Flask的Markdown编辑器实践

提供接口。其中js代码处注意宽度设置与Bootstrap4的body相冲突,这里我们注释掉width字段,否则将无法直接提取html。如果是继承模板,引入js较多时,可以在js的顺序上优先保证editor.MD,上下文在最后继承 new_post.html: $(function () { editormd("fancy-editormd", { // width: "100%", 请不要添加 height: 640, syncScrolling: "single", path: "{{ url_for('static',filename='editormd/lib/') }}", saveHTMLToTextarea : true });

同构(Isomorphic) web 是什么鬼?

同构(Isomorphic) web 是什么鬼? 最近遇到一个需求,需要快速开发一个可适配多种终端的H5 app,要求有比较好的用户体验(说白了就是界面切换快),同时也需要支持SEO(Search Engine Optimization),说人话就是对各种爬虫友好:)凭我个人经验来说对于体验要求高的H5,前端应尽量采取SPA(Single Page Application)架构,但是通常SPA无法做SEO,虽然可以单独为SEO写一套页面,但是这个工

流行的前端web框架

:https://www.yiiframework.com/doc/ Yii中文网:https://www.yiichina.com/ Yii 是一个 快速、安全、专业和高性能的,适用于开发 WEB 2.0 应用的 PHP 框架。Yii 自带了很多丰富的功能,包括MVC,DAO/ActiveRecord,I18N/L10N,缓存,身份验证和基于角色的访问控制,脚手架,测试等,可显著缩短开发时间。 Material Design Lite github地址:https://github.com/google/material-design-lite 官方网站:https://getmdl.io/ 官方文档

移动端是怎么做适配的?

} 可以使用媒体查询查询不同尺寸时,应执行的样式内容。 @media(max-width:768px){ a{ . document.write(" html{ font-size: " + htmlWidth + "px} ") 这时,就可以使用rem的单位来进行书写宽度单位了。1em = 设备宽度(浏览器的宽度) 当设备尺寸变化的时候,页面的比例是没有变化的,可以很好的适不同移动端尺寸的效果。 使用示例 div{ width:0.5rem;