设置body背景图片

body { margin:0px; background-image: url('../../static/images/beijing1.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; }

通过animate.min.css 设置动画效果

1、<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css"> 2、标签中class设置动画效果： <div class="hongxing"> <div id="haohaoxuexi" class="animated fadeInLeftBig">好好学习</div> <div id="hongxingxing" class="animated rotateIn"> <img src="../../static/images/hongxing2.png" width="200px;" height="200px;"> </div> <div id="tiantianbiancheng" class="animated fadeInRightBig">天天编程</div> </div> 3、css中设置参数 #haohaoxuexi{ -webkit-animation-duration: 5s; } #hongxingxing{ -webkit-animation-duration: 15s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; } #tiantianbiancheng{ -webkit-animation-delay: 5s; }

关于iframe的宽高比，让视频图像能按比例显示

这个设置方式是css2的，但相对比较简单有效。 //这个规则规定了iframe的父元素容器的尺寸，这里要去设置它的宽高比是25：14// .shipin { position: relative; width:100%; height:0; padding-bottom:56%;//这里设置高度为宽度的56% } //设定iframe的宽度和高度，让iframe占满整个父元素容器 .shipin iframe{ positon:absolute; width:100%; height:100%; left:0; top:0; } 说明：这种写法能起作用，是利用了padding属性的一个有趣的百分比特性： The percentage is calculated with respect to the width of the generated box's containing block ,even for 'padding-top' and 'padding-bottom'.

iconfont.cn 阿里巴巴字体图标库

1、网上搜索albaba字体图标库 2、首页直接输入搜索需要的图标，英文汉语拼音都可以 3、添加到购物车中，进入购物车 4、添加项目，加入到项目中 5、可以选择直接下载，也可以通过css引入。

将web页面设置为灰色

在CSS页面中增加一下代码，也可以对body标签。 html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

前端利器：FastStone Capture是一款经典好用的屏幕截图软件

FastStone Capture可以捕获BMP、GIF、JPEG等众多格式的图片，软件还具有屏幕录像的功能，方便用户录制精彩的瞬间。FastStone Capture为用户提供了多种捕捉方式如：活动窗口、指定窗口/对象、矩形区域、手绘区域、整个屏幕、滚动窗口等。软件还可以截取滚动页面，方便用户截图以及用户可向图像中加入标题、边框和水印、文本、线条、图形等内容，并可调整图像颜色，进行多种特效处理。感兴趣小伙伴快来下载使用吧! FastStone Capture功能介绍 取色器 现在网上各式各样的取色器应该不少了，包括之前一直用的蓝色经典推荐的ColorSPY ， Firefox 下还有一个专门的取色器扩展ColorZilla ，这些都是很好的软件。 屏幕放大镜 这确实是一个不错的功能，特别是现在我们已经习惯用DIV 来对页面定位，DIV 之间的对齐不像 表 格那样容易控制，有时为了调整几个象素的偏差，不得不对着屏幕盯很久。 屏幕录像机 屏幕录像机功能可以录制屏幕动作，将窗口/对象、矩形区域或全屏区域的屏幕录制为高清晰 WMV 视频。 截屏 包括了全屏截取，当前活动窗口截取，截取选定区域，多边形截取和截取滚动页面等，基本上常用的都有了。 图像浏览/ 编辑 FastStone Capture (FSCapture) 还包括快速浏览/ 编辑图像的功能，可以点击主窗口的“ 打开” 图标快速打开一幅图片，进行简单的缩放、裁切、旋转、加文字等轻量级的操作。