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

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画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形 各图形的html代码均为 ,替换class名称即可 圆形 .circle { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 50%; background: coral; } 蛋形 .egg { width: 126px; height: 180px; background-color: #eee; box-shadow: 0px 2px 5px #ccc; display: block; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; } 心形 .heart { width: 100px; height: 90px; position: relative; } .heart:

Grid布局入门

Grid布局入门 Grid Line 分界线:组成网格结构,它们是垂直或者水平 Grid Track 网格的列或者行 Grid Cell 网格的一个单元 Grid Area 四个网格线包围的总空间 父容器 display .container { display: grid | inline-grid | subgrid; gird-template-columns: 40px 50px auto 50px 40px;container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; aside" "footer footer footer footer"; grid-row-gap: 15px;item { grid-column: / | / span ;

监听 scroll 使元素产生吸顶效果

监听 scroll 使元素产生吸顶效果 一、判断滚动像素值 1.1 window.scrollY(别名:pageYOffset) 返回文档 top: 50px; 目前这个属性兼容性不是很好,暂不建议在生产环境中使用(2018年09月12日16:54:54)。 参考 position - CSS:层叠样式表 | MDN CSS中position属性介绍(新增sticky)

【CSS】画三角形

【CSS】画三角形 270924-106.jpg 用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。 image.png HTML代码: CSS代码: div { width: 0; border-top: 70px solid red; border-top: 50px solid transparent; height: 100px; background: #15A892; border-top: 20px solid #1574A8; border-right: 20px solid #E94E65; border-bottom: 20px solid #E9D24E; border-left: 20px solid #A81574;

Rem 布局

Rem 布局 在阅读本文之前,先需要了解 设备像素、设备独立像素、CSS-像素、桌面浏览器上的-viewport、移动浏览器上的-viewport。 rem 是 css 的长度单位,它是相对于 元素的 font-size 的相对值。假设 html { font-size: 20px;"50px": a/2*s*n+"px"},e.exports=t["default"]}]); export default win.flex = (normal, baseFontSize, fontscale) = { const _baseFontSize = baseFontSize || 100;metaEl) { metaEl = doc.createElement('meta');

移动端手机rem适配js代码

移动端手机rem适配js代码 (function (doc, win) { var docEle = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEle.clientWidth;clientWidth) return; if(clientWidth =750){ docEle.style.fontSize = '50px';//这里是1rem=20px } }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

用css写一个对话框

用css写一个对话框 要实现的对话框效果 首先分析一下对话框的组成:大致可以分两部分,左边的矩形和右边的三角形。矩形实现起来简单,那么三角形呢? 三角形的实现首先要从div说起 1.首先画一个div,给它设置宽高和背景颜色。再加上四条边的边框 Document . border-top: 50px solid pink; border-left: 30px solid ghostwhite ; border-bottom: 20px solid transparent; background-color:#cdcdcd ;

千变万化的div

千变万化的div 是HTML里再普通不过的一个元素了,但是如果加上各种属性的配合,那么它将会发出奇效,创造出千变万化的形状。下面我们就来感受下 的魅力.注:以下所以样式均由一个 完成效果图请点击 平平无奇的正方形与长方形 正方形与长方形没什么好介绍的,因为这个是本色演出。 1. 正方形 . border-radius: 100px / 50px; border-color: #4caf50 transparent; left: -18px; width: 20px;

CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布局&双飞翼布局

CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布局 双飞翼布局 css布局考察的知识点比较综合,基本就是使用上了所有css的基础技巧,以下是一些比较常见的场景总结。 水平居中 方法一: 定宽 + margin: 0 auto 我是子元素 ./*Flex布局*/ display: -webkit-flex;child { display: table-cell;方法三: 图片宽高自适应,使用line-height,text-align,vertical-align,max-width,max-height .

vue2.0组件间传值的方法汇总

/children2' export default { name: "parent", components:{ Children1, Children2 }, data(){ return { toChildren:'', getChildren:'' } }, methods:{ getChildrenData(data){ this.getChildren = data;/eventBus/bus' export default { name: "children", props:['getData'], //子组件自定义一个属性 data(){ return { toBrother:'' } }, methods:{ dataToBrother(){ bus.$emit('toBrother',this.toBrother) } } } h1{ height: 50px; color: darkred; } bus.js import Vue from 'vue' export default new Vue

phaser游戏开发笔记

/config' export default class extends Phaser.State { init () { this.stage.backgroundColor = config.colorOrange } preload () { this.load.image('logo', './states/Boot' import GameState from './states/Game' import WinState from './states/Win' import LoseState from '.

2018-07-28

2018-07-28 自适应导航栏 HTML logo 首页 新闻 国内动态 国外动态 公司介绍 招揽人才 社会人才 学校人才 登录 css . background-color: skyblue; line-height: 60px; width: 50px;rightTitle{ float: right; flex布局使导航标签横向排布*/ } ul{ list-style: none; /*ul 默认margin-left:40px; /* 默认padding-left: 40px; padding: 0 20px;hoverTitle1 li{ padding: 0;hoverTitle{ /*鼠标悬浮显示*/ display: block; width: 200%;

关于 Flex 中的 flex-grow、flex-shrink、flex-basis

关于 Flex 中的 flex-grow、flex-shrink、flex-basis 在使用 flex 布局的时候难以理解的是 flex-grow、flex-shrink、flex-basis 几个属性的用法,下面通过几个例子来演示。 flex-basis flex-basis 用于设置子项的占用空间。如果设置了值,则子项占用的空间为设置的值;如果没设置或者为 auto,那子项的空间为width/height 的值。 flex-basis 对于子项1,flex-basis 如果设置默认是auto,子项占用的宽度使用width

Html之表格

Html之表格 timg.jpg 表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格. height: 190px; padding-left: 10px; } thead { border: 1px solid #D2E9F6; background-color:#D2E9F6 ;

五分钟做出立体3d文字,你敢挑战吗?

五分钟做出立体3d文字,你敢挑战吗? 成品图 步骤一:文本创建 首先我们打开Adobe Photoshop CC创建995x670px的画布创建字体Hello Zcool字体为“Vivaldi” 目前

基于nuxt和iview搭建OM后台管理系统实践(3)-阿里oss上传组件的封装

地址; // 文件 components/upload.vue export default { head: { script: [{ src: "http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js" }]//引入sdk }, /*省略样式代码*/ 步骤2:获取上传token,后端提供接口,因token有时效性故每次上传操作时需向后端请求; // 文件 components/upload.vue import axios from "~/plugins/axios"; _this.$emit('uploadedUrl',results.name); } }, editUrl() { if (this.editUrl !file { display: none;demo-upload-list:hover .

神奇的border属性

border-top-width: 50px; border-right-width: 150px; border-bottom-width: 80px; } image.png 高度等于 border-top-width + border-bottom-width 宽度等于 border-left-width border-right-width image.png 已border-top 和border-left的所画直线的交叉点为四个角的连接点。 最进在读CSS权威指南和JQuery的源码 有一起的小伙伴吗? 欢迎加入QQ群:598303111 99 和 100分差的不只是1分 而是一个境界 magazine-unlock-01-2.3.933-_b37f85ba140647ce9693d.jpg

<<CSS权威指南3>>=>实现元素底部不动但高度增加

= 实现元素底部不动但高度增加 读到第七章水平格式化,简述原文 水平格式化的七大属性是:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right,这七个属性加在一起的宽度必须是包含块的宽度。 上述七个属性中只有margin-left,margin-right,width,可以设置为auto 我顺势就联想到了left、right这些,垂直格式化的规则和上述一样。 1.实现元素底部不动但高度增加 .

CSS实现三角形

CSS实现三角形 我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角。此外,我们经常用的tooltip,一般也有个三角形,指明方向。初次接触还以为是个图片,审查元素才发现几行CSS代码就可以实现。 我查看了下Bootstrap的源代码,是由一个叫 caret 的类实现的,如下所示: .caret { display: inline-block; border-top: @caret-width-base dashed; border-bottom: 50px solid green;