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

子元素设置了margin-top,父元素跟随下移问题

子元素设置了margin-top,父元素跟随下移问题 问题描述: 在页面布局的时候,本来想在子元素上设置margin-top,使得子元素和父元素隔开一定的距离,想象中的效果如下图1;结果却不尽如人意,如图2,margin像是加在了父元素上。 使用的代码如下: HTML CSS *{ padding:0px; margin: 0px; height: 200px; height: 100px; background-color: blue; margin-top: 10px;

CSS3实现伪类hover离开时平滑过渡效果

CSS3实现伪类hover离开时平滑过渡效果 由于hover伪类添加的动画效果,仅当鼠标放在元素上时会被触发,而当鼠标离开时,效果会中断,会显得很生硬。 大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦,CSS3便可以帮你解决这些问题。 离开时效果生硬 div{ width: 100px; margin-top: 200px; } div:hover{ transform: scale(2); transition: all 1s linear;

纯css实现波浪动画【转】

纯css实现波浪动画【转】 前言:之前在博客上看到一位大神用css实现的水波动画,真是受益匪浅,原来本以为要会svg、canvas等技术,原来根本不需要,只需css简短的十几行代码就可以达到效果。关键是大神的这种思路,非常之得我们学习,不多说了,直接上代码。 效果图 HTML部分: CSS部分: . border-radius: 45%; } @keyframes rotate { 50% { transform: translate(-50%, -73%) rotate(180deg);

css3实现wifi信号逐渐增强效果

css3实现wifi信号逐渐增强效果 效果图 image.png 下面是实现代码: wifi信号 *{ margin: 0; padding: 0; } .box { width: 240px; height: 240px; box-sizing: border-box; position: relative; margin: 100px auto; } .wifi-symbol { width: 200px; height: 200px; margin-left: 18px; box-sizing: border-box; overflow: hidden; transform: rotate(45deg); } .wifi-circle { border: 10px solid #ccc; border-radius: 50%; position: absolute; } .first { width: 260px; height: 260px; top: 0; left: 0

web前端开发中浏览器兼容问题(一)

/*IE下再理解为5px*/ } display: inline; height: auto; } 5.页面的最小宽度问题 min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。 为了让这一命令在IE上也能用,可以把一个 放到 标签下,然后为div指定一个类, 然后CSS这样设计: #container{ min-width: 600px;

web前端开发中浏览器兼容问题(七)

web前端开发中浏览器兼容问题(七) 29.在IE6中list项目间出现空行 ul{ width: 200px; list-style: none; } li a{ background: #95CFEF; display: block; margin-bottom: 1px; width: 400px; height: 160px; margin: 30px 0 0 30px; float: left; width: 300px; } 显示区别: 当子元素高度超出父元素时,IE6和IE7 FF 结果不同 32.最低高度设置margin-height IE6不兼容 #left,#right{ padding: 5px; width: 70px; } #right{ min-height: 75px;

vue轮播图

vue轮播图 一、安装饿了么团队开发的vue专用的轮播图插件:vue-swipenpm install vue-swipe 二、在index.js文件中引用vue-swipe require('vue-swipe/dist/vue-swipe.css'); import { Swipe, SwipeItem } from 'vue-swipe';my-swipe { height: 200px; font-size: 30px; text-align: center;slide1 { background-color: #0089dc;slide2 { background-color: #ffd705;slide3 { background-color: #ff2d4b; } vue-swipe的github地址:https://github.com/ElemeFE/vue-swipe

圆环式百分比进度条

圆环式百分比进度条 效果图展示 image.png 下面是实现代码(本篇文章没有做兼容处理) *{ margin: 0; box-sizing: border-box; height: 200px; width: 100px; height: 160px; border: 20px solid #a4ccfb;progress-left { border-top: 20px solid #09c; } @keyframes run1 { 0% { transform: rotate(45deg); } 100% { transform: rotate(225deg);var num = document.getElementById("num"); } num.innerHTML = i; } setInterval(addNum,100);

如何实现一行多列?

multi_column { -webkit-column-count: 3; // 表示列于列之间的间隔 } 第一列 第二列 第三列 3. position: absolute 绝对定位法 Title h3{height: 100px;我是左边 我是右边 我是中间 4. float 属性 Title #left,#right{ width: 200px; background-color: red} 我是左边 我是中间 我是右边 6. display:inline-block Title .font-size: 16px;center{width: calc(100% - 300px);7. display:table-cell Title p{margin: 0;

简易时钟动画

var oHour=document.getElementById("hour"); 当得到这三个dom对象时需要进行转动用到transform:rotate(度数) oSecond.style.transform="rotate("+ second * 6+"deg)"; oMinute.style.transform="rotate("+ minute*6 +"deg)"; 这样只能转动一次 我们需要开一个定时器把run这个函数放进去 setInterval(run,1000); } #clock { width: 200px; border-radius: 50%; background: #ff0000; var oDial=document.getElementById("dial"); function run() { var now=new Date();

两种方式实现CSS双飞翼布局

两种方式实现CSS双飞翼布局 双飞翼布局,就是两端固定宽高,中间自适应的三栏布局 先来张图,左边和右边的灰色块是固定宽高的,中间绿色的区域是宽高自适应 双飞翼布局 方式一:通过flex弹性布局来实现 看代码 //HTML结构,div2是中间的自适应区域 . //使用border-box,盒模型好计算,妈妈再也不用担心我算不清块宽高了 } .div3{ //给两端的div固定的宽 width: 200px;div1{ left: 0;

两种方式实现CSS双飞翼布局

两种方式实现CSS双飞翼布局 双飞翼布局,就是两端固定宽高,中间自适应的三栏布局 先来张图,左边和右边的灰色块是固定宽高的,中间绿色的区域是宽高自适应 方式一:通过flex弹性布局来实现 看代码 //HTML结构,div2是中间的自适应区域 . //使用border-box,盒模型好计算,妈妈再也不用担心我算不清块宽高了 } . height: 100%;div3{ //给两端的div固定的宽 width: 200px;div1{ left: 0;

事件及如何阻止事件冒泡

height: 300px; background-color: red; height: 200px;html部分: js部分: document.getElementById("box2").onclick = function() { alert("我是box2"); } document.getElementById("box1"). } document.body.onclick = function() { alert("我是body"); } else { //IE阻止冒泡 e.cancelBubble();onclick = function(e) { //获取event对象 var e = e || window.event; // 阻止冒泡 if(e.stopPropagation()) { //非IE的 e.stopPropagation();

css实现无限轮播-css(5)

css实现无限轮播-css(5) 主要知识点: animation 纯css实现无间隙轮播图效果,鼠标悬停后可暂停 demo 请在chrome下预览(未写兼容性) html文件 第一页 第二页 第三页 第四页 第一页 css主要内容 .carousel-box{ width: 300px; height: 200px; /*等于a内容宽高*/ margin: 10px auto; overflow: hidden;inner{ animation-play-state: paused;} 97%,100%{top:-800px} } . width: 1500px;} @keyframes left { /*a内容宽的倍数*/ 0%,3%{left:0;

CSS居中问题的各种解决方案

} ul li { display: inline-block; } 多个块级元素(flex) 设置需要水平居中的块状元素的父元素display为flex ,并且justify-content属性为center即可 ul { display: flex; } ul li { } 垂直居中 单行行内元素 将行内元素的height和line-height设置为一致即可 div { height: 200px; } 未知高度的块级元素 使用CSS translate,将块级元素设置绝对定位,top为50%,transform: translateY(-50%); transform: translateY(-50%); margin-left: -75px;

less变量

less变量 一:引入 我们知道,原生的css是没有变量的概念的,但是less有 二 : less变量的定义和使用方式 2.1 :普通的变量 定义方式: @变量名:变量值 使用方式:属性名:@变量名 小例子 @green : green; h1{ color: @baise; // 属性名 } 2.3 : 作为URL的变量 定义方式:@属性名:“属性值” 使用方式:@{属性名} 小例子header{ background: url("@{imgURL} 640.jpg"); height: 500px;class{ @var : 1;brass { three: 3;

圣杯布局和双飞翼布局的理解

middle { width: 100%;right { width: 150px; } 此时页面效果如下:middle、left、right都设置左浮动,middle的width为100%自适应,所以占据一整行,left、right被挤到下一行;清除浮动使#footer不受影响。 3、将左列和右列放在对应的位置与middle在同一水平位置。把left的左边距设置为负的middle的宽度,left才会移动到最左边与middle在同一行。 . } #container . float: left;main-inner { margin: 0 220px 0 200px;

css盒模型

css盒模型 什么是盒模型? 目前盒模型分为两种,分别是符合w3c标准的盒模型与IE盒模型,这两种盒模型在网页布局中是有差异的,如果想进行网页的排版就必须了解这两种盒模型;首先我们来了解一下标准的盒模型如下图: 图 -1 从图 -1:来看我们可以很清晰的了解盒模型的基本构造包括:content,padding,border,margin组成;并且content部分不包含其他部分; 图 -2 图 -2:是IE盒子

canvas— —刮刮乐

canvas— —刮刮乐 今天,结合上一篇文章的抽奖小游戏,用canvas来写一个小游戏——刮刮乐。首先,用canvas做一个画布,宽高各为200px。然后再把一个span标签定位到画布上。 效果如下所示 接下来获取一下canvas标签,定义一个数组,之后用canvas画一个灰色的正方形把这部分给盖住。 效果如下 用canvas创建一个透明的圆,当鼠标移动时,清除canvas上的灰色图层,显示下面的文字(

React简单封装ECharts饼图

} 更新 componentDidUpdate() { this.iniChart(); } 传数据 import Pie from '. const data = [ {value: 2, name: "JavaScript"}, {value: 1, name: "Java"}, {value: 1, name: "HTML/CSS"} ] export default class ComponentBody extends React.Component{ render(){ return( ) } } 结果 完整代码见https://github.com/axuebin/react-echarts-demo/blob/master/src/pie.js 原文地址~