500px | 易学教程

神奇的background——绘制图形

阅读更多关于神奇的background——绘制图形

相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片，这时候通常就拿起ps就是切切切。不说这种方式麻烦，有ui给你切好的情况已经不错，没有的就有自己动手。还可能有需要切一整张超大图的情况。作为一个“优秀”的前端，本着自己动手丰衣足食的理念，下面给大家介绍用 background 来绘制这些特的图片。先来看看平时会出现的遇上这种情况，通常处理就是切得下面的图片再通过一下css得到 <div class="box"></div> <style> .box{ width: 500px; height: 500px; background: url('imgurl'); background-size: 20%; } </style> 当然现在不切图，直接用css来做 .box{ width: 500px; height: 500px; background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0, linear-gradient

flex.css声明式布局

阅读更多关于 flex.css声明式布局

flex.css能完美的运行在移动端的各种浏览器，甚至能运行在ie10+的各种PC端浏览器中 flex和data-flex flex.css 有两个版本，一个是flex.css一个是data-flex.css，这两个版本其实是一样的，唯一的区别是，一个是使用flex属性设置，一个是使用data-flex属性设置。react 不支持flex属性直接布局，所以data-flex.css实际上是为了react而诞生的官方地址：https://github.com/lzxb/flex.css npm安装： npm install --save flex.css 使用说明：   <div flex="main:center cross:center"

使用jquery完成抽奖图片滚动的效果

阅读更多关于使用jquery完成抽奖图片滚动的效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jquery案例之抽奖</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script></head><body><div style="border-style:dotted;width:160px;height:100px"> <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/></div><div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"> <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/></div><input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size

margin属性

阅读更多关于 margin属性

---恢复内容开始--- css盒子由内容边缘（Content edge）包围形成的是内容盒（Content Box），类推还有内边距盒（Padding Box）、边框盒（Border Box）、外边距盒（Margin Box）。其中内容盒、内边距盒、边框盒的背景由 background 属性决定，而外边距盒的背景是透明的。盒子的外边框margin属性：盒子的外边距margin 指的是当前盒子与其他盒子之间的距离，环绕在盒子周围的空白区域，属于不可见的区域，不会影响到可见框的大小，但是会影响到盒子的位置。 margin属性可以用来指定盒子外边框的大小，有两种方法设置外边距：第一种单独属性分别设置四个方向的外边距，第二种是使用简写属性同时设置多个方向的外边距（注意顺序），margin 属性接受任何长度单位，可以是像素px、英寸in、毫米mm或 em。关于 margin 属性，有几点可能跟我们的直觉不相符：如果 margin 的值是百分比，则是相对于父元素的内容盒宽度来计算的，即使 margin-top 和 margin-bottom 也是如此。因此即使父元素的高宽不相等，子元素的 margin 元素指定了相同的百分比值，则子元素各个方向的 margin 计算值都是相等的。 margin-top 和 margin-bottom 值对行内非替换元素（non-replaced

flex弹性盒子布局

阅读更多关于 flex弹性盒子布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</title> <style> *{ padding: 0; margin: 0; } body{ background-color: red; } .container{ width: 100%; min-height: 500px; background-color: yellowgreen; display: flex; } .container .left{ width: 200px; height: 500px; background-color: purple; } .container .right{ width: 150px; height: 500px; background-color: blue; } .container .center{ flex-grow: 1; height: 500px; background-color: orange; } </style></head><body><div class="container"><div class="left"></div> <div class="center"> </div> <div class="right"></div></div></body

用像素显示不同css

阅读更多关于用像素显示不同css

//小于500px的时候执行下面样式 @media screen and ( max - width : 500 px ) { . abc { width : 900 px } } //大于500px的时候执行下面样式 @media screen and ( min - width : 500 px ) { . abc { width : 900 px } } 来源： CSDN 作者： hql1024 链接： https://blog.csdn.net/hql1024/article/details/103203078