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

margin(CSS语法)

margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。

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

表格单元格内的两端对齐

表格单元格内的两端对齐 前端入坑纪 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;

滚动时的渐显渐隐标题

} #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);

CSS calc计算属性

CSS calc计算属性 calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。 calc()语法 . margin: auto; } #main { border: 8px solid #B8C172; width: 75%; width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);CSS3 calc() test…… test…… test1…… test2…… test3…… footer

React 中合并单元格的正确写法

React 中合并单元格的正确写法 用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图 源码 react组件文件 import React, { Component } from 'react';/App.css';App { text-align: center; } td { border: 1px solid #AB3319; width: 30px;title { color: #444444; font-size: 20px; border-collapse: collapse;

Sass: @mixin vs placeholder vs @function

Sass: @mixin vs placeholder vs @function 学习 Sass 的时候总会发现这三个东西很像,因为他们都是用来统一代码来达到复用的目的的。这篇文章将用一个小例子来对比他们的不同之处。 例子 我们要做的就是两个一大一小的两个 div,一个宽高100px,另一个宽高 300px。 CSS 代码可以写成这样: .smallBox { width: 100px; margin: 10px;bigBox { @include box(300px, 300px);bigBox { @extend

走进浏览器内部—剖析浏览器是如何工作的(中)

走进浏览器内部—剖析浏览器是如何工作的(中) 趁热打铁,今天继续昨天的内容。分享有关浏览器的内容。可能我们即使了解浏览器的工作原理对工作帮助也不是很大,其实不言,如果了解浏览器的机制,我们就可以避免一些可能会影响应用性能的陷阱了。 在下图中,我们可以了解浏览器是如何解析样式表,然后生成 CSS 树的, CSS 树,每一个{}都可以看作一个 CSSRul 对象

又拍云 Node.js 实现文件上传、删除

又拍云 Node.js 实现文件上传、删除 Node.js 服务端 使用 Node.js + Express.js 实现 服务端 const express = require("express");update(value) .toString("base64"); axios({ url: upyunUrl + bucketname + item, method: 'DELETE', headers: { 'Authorization': authorization, 'Date': date } }). formData.append("file", uploadInput.files[0]) formData.append('policy', token.policy) formData.append("authorization", token.authorization) axios({ method: 'POST', url: upUrl, data: formData }).

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

记录一下我的小程序公共样式

记录一下我的小程序公共样式 基于 mpvue 如果需要原生,px转为rpx,可以自己转换 App.vue 样式 /* 全局样式*/ page { background-color: #fff; height: 1px;button { position: relative;ml10 { margin-left: 10px;mb15 { margin-bottom: 15px;bk { word-wrap: break-word;vh { visibility: hidden; content: ""; white-space: nowrap;middle { display: inline-block; transition: all 250ms; cursor: default; pointer-events: none; flex-wrap: wrap; flex-direction: column;

CSS布局&居中贴士

垂直居中实现 行内元素的垂直居中 设置父元素的高度height与行高line-height一致,则父元素内的行内子元素会垂直居中显示 给父元素设置display:flex;flex-direction:column; 子元素设置相对定位,子元素top:50

初学前端之实现页面简单的边框、表格和三角形

html html8.png 3 .css 首先还是如上面例子一样,先设置全局属性,把字体、两个表格居中,并且设置表格的外边框。如下: html9.png 然后这里我们发现有个问题,那就是对于表格而言,里面的每个单元格都有自己独立的边框,而在我们要求完成的样式中是公用的,所以需要让表格边框共用,就要用到border-collapse: collapsed;css 先设置全局属性 html17.png 想要边框不可见,使用transparent .

手风琴效果 transition使用

手风琴效果 transition使用 手风琴效果 *{ margin: 0; } ul{ list-style: none; width: 960px; height: 300px; border: 1px solid seagreen; margin: 90px auto; overflow: hidden; } ul li{ float: left; width: 160px; /*添加动画效果*/ transition: all 0.3s; } /*所有的li都变小*/ ul:hover li{ width: 60px; } /*当前的li变大*/ ul li:hover{ width: 600px;动画前.png 动画后.png

【CSS】多重边框

【CSS】多重边框 90507-106.jpg 要设置多重边框,最要用到的是box-shadow这个样式。 box-shadow 的作用是添加投影。 div { width: 300px; height: 300px; margin: 100px auto; border: 10px solid #036;好以上参数就行。box-shadow: 5px 5px 10px #888; } image.png 如果需要设置多重边框,可以用逗号分隔语法,这样就可以创建任意数量的投影了。box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf; outline-offset: -16px;

【CSS选择符】群组选择符 和 通用选择符

} 通用选择器不指定任何具体的标签类型,因此很难预测对使用各种HTML标签的网站有什么影响。 所以通用选择器里面的样式不要写得太过分,把一些基础的东西写在里面就行。比如规定margin、padding、font-size等。 滥用通用选择符,很可能会加大浏览器的渲染压力。 HTML与CSS 目录:HTML与CSS 上一篇:【CSS选择符】类选择符 和 ID选择符 下一篇:【CSS选择符】后代选择符