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

box(英文单词)

box是英文词汇,英音[bɔks],解释为盒,箱状物;包厢;哨房。

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

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

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

angular6入门笔记

} else if (value = 80 value = 70 value {{myScores | nameLevel}} import { Component, OnInit, Input} from '@angular/core';/app.routes' import { NgModule, ModuleWithProviders } from '@angular/core' import { RouterModule } from '@angular/router' let rootRouteModule:ModuleWithProviders = RouterModule.forRoot(rootRouterConfig) @NgModule({ imports: [ rootRouteModule ] }) export class AppModule { } route goto-list 2.9关于路由的routerLinkActive goto-list goto-detail .

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

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

记录一下我的小程序公共样式 基于 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 实现水平居中的方法总结

} 块级元素的特点:可设置元素的宽度,在不设置宽度时, 元素的宽度会自动填满其父元素宽度,并独占一行 1.1 margin: auto 居中元素设置宽度,并且设置 margin: auto 可实现水平居中 . /*兼容代码*/ } 问题: 需要解决 display: inline-block 在IE 下的兼容性问题 3. 利用定位实现水平居中(已知宽度) 相对定位: 相对定位就是将元素偏离元素的默认位置,但是并没有脱离文档 left: 50%;

前端知识——关于JavaScript的标签属性的修改

,对象,模型理解为福建省,广东省,浙江省;节点理解成每个人;节点属性理解为每个人身上各自的特性:性格,教育程度,高矮胖瘦,恐龙或者是青蛙! 这样说,你总该明白了吧! 那么我们要获取他们每个人身上的特性,该如何获取呀,请看下面的代码: var a = { name: "guodan", age: 18, } console.log(a.age); box.id = "goudan" console.log(box); box.setAttribute("goudan","123456") console.log(box);

【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】图片动画特效(相框)

(转)mac 清理xcode

(转)mac 清理xcode 原文地址:https://blog.csdn.net/cuihaiyang/article/details/56892799 自测可以清理,但是第一次重新启动模拟器会比较慢。而且运行起来以后,就会多出来差不多5G空间,主要是 image.png 下面是原文内容: 128G存储空间已经剩下没多少了,必须得清理一下。 image 一层层查找发现~/Library/Developer目录占了15G, Xcode8占用了12G,拿它开刀。 image 1. 清理~/Library/Developer/CoreSimulator/Devices

Retina屏的移动设备实现真正1px的线的解决方案

width: 100%; transform: scaleY(0.5); margin-bottom: 20px; border: 1px solid #000; width: 200%; -webkit-transform: scale(0.5); transform-origin: left top; } 第二种有点小缺陷是 用不了,第二种使用会比较简单方便, 第一种使用起来比较会比较费劲。所以用第二种做了一个简单Demo。 效果: 1px.png 是不是瞬间看起来感觉棒棒哒! 真正手机看效果更好! 参考链接:http://jinlong.github.io/2015/05/24/css-retina-hairlines/

用Python发一个高逼格的朋友圈【附代码】

png', 'PNG') index +=1 if __name__ =='__main__': file_path ="1.jpg" # 把目标图片 input image 放到代码所处的文件夹里 image = Image.open(file_path) image = fill_image(image) image_list = cut_image(image) save_images(image_list) 读更多的好书,拍更美的照片,写更酷的代码,遇见更有趣的人,愿望是实现从IT菜鸟到全栈工程师的蜕变。

CSS Flex布局常见应用

box{ width: 500px; height: 250px; } 2、居左居右布局[上下居中] 【某前端面试题】要求:间距为20像素,上下居中,两个子元素居左,一个子元素居右,父级元素宽度不固定,只能使用flex布局。 效果图: demo.png 分析: 父级元素使用flex布局,上下居中使用align-items控制; 第三个子元素居右采用:margin-left:auto 实现。 效果预览 主要代码: //dom结构 //样式设计 . align-items: center;

[前端][css]float left布局换行不正常问题

[前端][css]float left布局换行不正常问题 最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的 image.png 结果出现了这样的情况 image.png 页面的html是这样的 css . padding: 10px; box-sizing: border-box;block div { background-color: pink; width: 100%; } #special { height: 280px;

【算法】YOLOv1,v2,v3的区别

【算法】YOLOv1,v2,v3的区别 1.损失函数(各分量之间的系数) 损失函数: image 三个版本损失函数系数详情: versions coord obj class noobj yolov1 1 0.5 1 5 yolov2 5 1 1 1 yolov3 1 1 1 gt相关 2.网络输出形式 v1: num_cell * num_cell*(5 * num_box+num_class ) 需要注意的是上述式子中5表示:当前 cell 所有 box 的四个坐标xywh + 当前 cell 所有 box 的confidence,以及当前 cell 所对应的一个 box 的类条件概率(这

CSS学习笔记一——盒子模型,定位,z-index

CSS学习笔记一——盒子模型,定位,z-index 盒子模型 结构:content + padding + border + margin 基本分类 标准盒子 width / height = content(即width 和height只等于内容的宽高) 标准盒子模型.jpeg IE盒子 width / height = content + padding + border (即width 和height包括了content + padding + border) ie盒子模型.   box-sizing: border-box; /* 阈值 */ } 但是兼容性非常不乐观 position: -webkit-sticky;

浮动

浮动 浮动定位是css排版中非常重要的手段。浮动的框可以左右移动,直到外边缘碰到包含框或另一个浮动的边框。因为浮动框不在文档的普通流中,所以文档流中的块框表现的像浮动框不存在一样。float的属性: none 不浮动 默认 left 左浮动 文本或图像会移至父元素的左侧 right 右浮动 文本或图像会移至父元素的右侧 普通文档流的css样式如下: #box{ width:650px;