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

padding

Padding[1]  (填充)属性定义元素边框与元素内容之间的空间。padding 简写属性在一个声明中设置所有内边距属性。设置所有当前或者指定元素内边距属性。该属性可以有1到4个值。当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。单独使用填充属性是在一个声明中设置元素的所内边距属性。缩写填充属性也可以使用,一旦改变一个数值,则padding对应的距离都会改变。

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;

用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') .

又一个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;

滚动时的渐显渐隐标题

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

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

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

理解 CSS 中的 line-height 和 vertical-align

理解 CSS 中的 line-height 和 vertical-align 文章地址:https://github.com/afishhhhh/blog/issues/4 一个例子 image div { background: #eee; border: 1px solid #000; font-size: 50px; margin: 10px;

css3实现元素抖动效果

css3实现元素抖动效果 代码不多,不截图了,可自行尝试 说明 css部分比较冗余,是因为考虑到了适配情况。可酌情删减 -webkit-animation-name: shaky-slow; // webkit内核 -ms-animation-name: shaky-slow; // ie内核 animation-name: shaky-slow; // 原生 animation-duration: 4s; // 动画执行时间 animation-delay: 0s; // 动画等待时间 animation-iteration-count: infinite; // 动画执行次数,infinite为一直执行 animation-timing-function: ease-i

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

记录一下我的小程序公共样式 基于 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;

手风琴效果 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

解决div里面img图片下方有空白的问题

解决div里面img图片下方有空白的问题 0001.jpg 在开发的过程中,我发现插入一张图片后,下面想紧跟着一个带背景色的div,不管我怎么折腾他都有一条白边。后来研究了一下发现自己对img标签了解的真不够深入。 image.png html代码: header /* 插入一张banner图片 */ section CSS代码 * { margin: 0; } header { height: 76px; background: rgba(255, 204, 0, 1); background: #00B3FF;banner { font-size: 0;

一个button的成长过程

一个button的成长过程 html代码: Rabbit CSS代码: padding: 6px 16px; /* 设置背景渐变。 第一个#58a用来定义一个背景色,作用是如果不兼容渐变背景的浏览器,会把背景色显示成#58a */ border-radius: 4px; 如果我们要添加其他按钮,想使用同样的样式,只是颜色不同,可以直接在这个基础的button样式后面覆盖background-color属性即可。 html代码: Rabbit OK Cancel CSS代码: button { padding: .

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

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

【jQuery】京东banner轮播图

【jQuery】京东banner轮播图 微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip 动态图在简书上看不到,把代码拷下来本地看吧~ HTML代码 lt; border-radius: 50%; if(index imgNum-1) { index = 0; }, function(){ timeId = setInterval(function() { $arrowRight.click(); JavaScript jQuery总目录:jQuery目录 上一篇:【jQuery】淘宝banner轮播 下一篇:【JavaScript】解决IE8下,用js不能选择class的情况

【CSS】百度百科状态栏

font-family:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif; background-color:#f3f3f3; background:#24619c; border-top:1px solid #5895d5; border-bottom:1px solid #3b92e9; background:#459df5; display: flex; height: calc(100% - 1px);nav-content-box li { width: 120px;nav-content-box li:hover{ background:#19508b; } ul.nav-content-box li ul li a { color: #a2c9f0; } HTML与CSS 目录:HTML与CSS 上一篇:【CSS】省略号 下一篇:【CSS】图片动画特效(相框)