Springboot使用LayUI将Ajax发送请求获取的返回数据用ECharts图表显示 后端使用Springboot，前端框架使用LayUI，前端页面一个日期控件，一个下拉框控件，实现选择日期，以及选择下拉框，点击提交，layui发送ajax请求到后端，请求数据返回后，在控件下方用echarts图表显示出来。HTML代码：<form class="layui-form" action="/"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">选择日期</label> <div class="layui-input-inline"> <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input date_selected"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">选择企业</label> <div class="layui-input-inline"> <select name="company_name" lay-filter="company_name" class="com_selected"> <option value=""></option> <option value="0">选项一</option> <option value="1">选项二</option> <option value="2">选项三</option> <option value="3">选项四</option> </select> </div> </div> <div class="layui-inline view_history" style="margin-left: 70px;"> <div class="layui-input-inline"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即查看</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> </form>Javascript代码：<script> layui.use(['form', 'layedit', 'laydate', 'element', 'echarts', 'jquery'], function () { var form = layui.form , $ = layui.jquery , layer = layui.layer , layedit = layui.layedit , laydate = layui.laydate , element = layui.element , echarts = layui.echarts; //日期 laydate.render({ elem: '#date' }); //监听提交 var ndData = null; form.on('submit(demo1)', function (data) { var date_user = $(".date_selected").val(); var name_user = $(".com_selected").find("option:selected").text(); $.ajax({ url: "/history/getlist", type: "GET", data: { date: date_user, name: name_user }, dataType: "JSON", async: false, success: function (res) { /** * Echarts显示 */ var echartsRecords = echarts.init(document.getElementById('EchartZhu'), 'walden'); var optionRecords = { tooltip: { trigger: 'axis' }, legend: { data: ['油烟浓度', '颗粒物', '非甲烷总烃'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一'，'周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', }, dataZoom: [ { type: 'inside', show: true, top: '90%', realtime: true, start: 85, end: 100 } ], series: [{ name: '油烟浓度', type: 'line', data: res } ] }; echartsRecords.setOption(optionRecords); // echarts 窗口缩放自适应 window.onresize = function () { echartsRecords.resize(); } } }); return false; }); }); </script> 这里有一个要注意的地方就是form.on监听提交的方法里面一定要有 return false来禁用表单跳转，不然的话，点击提交以后，iframe就会跳转，我这里是变成了首页，也就是iframe里面变成了另一个刚打开的系统首页对于Echarts的引入，个人不建议使用LayUI集成的，因为我用了集成的ECharts总有各种小毛病出现，什么 EchartsTheme.js找不到等等，我当时已经将EchartsTheme.js复制到每一个可能的文件夹下都还是这样抱错。最后我是直接在要显示ECharts的页面引入，而不是在一开始的整个LayUI框架首页引入。请求API返回的是登录页刚开始，我写好接口以后，尝试着自己创造链接，没有从前端页面获取用户选择的情况下测试下接口行不行。我发现浏览器上登录系统后，再从输入链接的话是能够返回数据的。但是，我要是清楚数据，或者说没有登录的情况下去访问，系统回跳转到登录页（PS：用Postman测试的时候也是返回的登录页的HTML代码）。在我这里是因为，在Security的配置中设置了除了登录页以及静态资源外都要登录后访问，于是我修改了security的配置文件，加了一行代码 web.ignoring().mvcMatchers("/history/**");@Override public void configure(WebSecurity web) throws Exception { web.ignoring().mvcMatchers("/lib/**", "/css/**", "/js/**"); web.ignoring().mvcMatchers("/history/**"); }放行该API路径后，使用postman已经layui中用ajax发送http请求都可以获取数据，而不用先登录。（可能不安全，大家看着办）

移动光猫吉比特GS3101 改桥接 获取超级管理员账号 前段时间，装了200M中国移动宽带，有配一个光猫。师傅说不可以不使用光猫拨号，说什么绑定了mac，一大堆的。总之就是移动或者说那个安装师傅怕麻烦，不给用户自己用路由器拨号。再说，移动送的光猫这么垃圾的，用来做路由拨号，不合适，而且只有一个是千兆口，其他都是百兆的，200M带宽用百兆网口有什么意义，肯定要改的。1、登录光猫后台用浏览器登录设置页面输入盒子背面提供的账号密码登入（这个账号是什么权限都没有，只能查看设置不能修改，但是只要保持登录即可）2、进入Gateway在浏览器，新建标签页，输入 http://192.168.1.1/cgi-bin/getGateWay.cgi 页面提示：Family GateWay Yes如果提示 No 重新打开网址即可新版GS3101必须登录盒子(也就是执行第一步)才能跳转这个页面，否则为登录界面3、macOS使用终端连接盒子如果是windows则打开cmd（win+R输入cmd回车），进入终端后输入命令：telnet 192.168.1.1如果地址不是192.168.1.1，记得改成你自己的盒子地址，通常移动盒子地址都是192.168.1.1telnet账号：admin telnet密码：s2@We3%Dc#再输入 cd /tmp4、查询超级账号名在第三步进入了tmp目录的操作窗口中执行：cat ctromfile.cfg | grep 'user'一般按 Entry0 1 2 区分账号 （后面测试得出0对应超级账号）5、查询超级账号对应的超级密码同样才上一步的操作窗口中进行，输入代码：cat ctromfile.cfg | grep 'passw'6、用超级账号跟密码登录光猫得到密码后登入光猫测试看看，就会发现可以修改路由模式为桥接了。7、修改路由模式为桥接模式将连接名称更改为后缀是 VID_41 的，模式选择 Bridge，IP Bridge 和 PPPoE Bridge 都可以选8、在路由器中进行拨号如果不知道账号密码的，在第4或者第5步的操作窗口中输入代码：cat ctromfile.cfg | grep '拨号账号'回车后看到中间的 PASSWORD 就是 就是拨号账号密码。用超级账号登录以后可以看到拨号账号，一般是格式为 手机号@139.gd。重要操作在上面那些操作搞定以后，其实是已经将路由模式改为桥接模式了，但是呢，还存在一个问题，那就是如果光猫断电了，没错，是断电，也就是重启后，会自动恢复到路由模式！这是因为移动那边存在远程管理问题，是不希望我们进行桥接的。那我们需要怎么做呢？只需要把宽带设置页面的 TR069 那个连接给删掉，如下图，最下面有个删除（要注意是删除TR069这个连接方式） 如果宽带设置页面的删除按钮是灰色的，也就是无法点击的状态，那么就 F12 或者 ⌘+⌥+i 或者 右键网页检查(inspect) 找到那个按钮的代码，将 disable 删掉，回车后就可以删除了。删除TR069以后哪怕是断电也是不会恢复到路由模式的。还有就是，保险起见，到远程管理-->认证那个页面将认证密码记住，后面如果需要添加回路由模式或许有用。

React的基本使用 1、引入资源使用React需要引入三个js文件，分别是: react.js、react-dom.js、babel.min.js、涉及到PropType的还需要添加 prop-types.js引入的三个文件 script 类型都是 text/javascript2、使用React2.1、创建虚拟DOM使用babel脚本是 script 的类型 type="text/babel"var element = React.createElement('h1',{id:'myTitle'},'hello') // 纯js创建，一般不用 var element = {title}2.2、渲染虚拟DOMReactDOM.render(param1, param2)2.3、JSX创建react虚拟DOM（元素）对象var ele = Hello JSX!1、要注意的是它既不是字符串，也不是HTML/XML标签2、它最终产生的就是一个JS对象3、使用总结babel的作用，浏览器不能直接解析jsx代码，需要babel转译为纯js代码才能运行只要用了 jsx，都要加上 type="text/babel" ， 声明需要babel来处理3.1、如何将一个数据的数组转换为一个标签的数组？使用数组的Map（）const names = ['jquery','zepto','angular','react','vue'] const ul = ({ names.map((name) => {name}) })3.2、组件的使用1、组件名必须首字母大写2、虚拟DOM元素只能有一个根元素3、虚拟DOM元素必须有结束标签3.2.1、render()渲染组件标签的基本流程1）React内部会创建组件实例对象2）得到包含的虚拟DOM并解析为真实DOM3）插入到指定的页面元素内部3.3、状态有关1）初始化状态：constructor(props){ super(props) this.state = { stateProp1:value1, stateProp2:value2 } }2) 读取某个状态的值this.state.statePropertyName，比如上面的 this.state.stateProp13) 更新状态this.setState({ stateProp1:value3, stateProp2:value4 })4) 将新增方法中的this强制绑定为组件对象this.handleClick = this.handleClick.bind(this)3.4、input取值react中有一个属性类似HTML中的ID或者说class，即 ref，比如:<input type="text" ref="content">// 获取input的值const iuput = this.refs.content第二种方式：<input type="text" ref="{input" ==""> this.input=input} /> // 这也是后面react推荐的 代码有误，未修改获取input的值： const text = this.input.value去空格， const text = this.input.value.trim()把获取到的text存到 props中： this.props.add(text)

IDEA自动生成serialVersionUID 在IDEA中打开Preferrences->Editor->Inspectations，在右侧输入框中，输入UID进行搜索（人工找太慢了）。然后勾选 Serializable class without 'serialVersionUID'。此时，右侧的 Security处应该是 Warning 和 In All Scopes。回到编辑器中，新建一个实体类，将光标移动到实体类名上，macOS系统按 option+enter， Windows系统按 alt+enter，部分快捷键可能不一样，按实际情况。然后选择 add 'serialVersionUID' field

JAVA时间的12小时与24小时制 问题场景：由于业务需要，需要转换北京时间与UTC时间，两者相差8小时差，也就是比如现在是北京时间上午8点，那么UTC时间就是午夜12点。从中国联通泰利特平台接口获取数据时需要使用的是UTC时间，测试时能够获取，但是过了一会以后无法获取时间，接口返回数据为空。问题分析：编码的时候是有两台电脑，一台MacBook和一台Windows10系统的，测试的时候是用的windows电脑，正式代码是迁移到MacBook上面跑的。因为我自己将windows电脑的时间个性化了（也就是在时间那里加入中文）导致原本是24小时制的，显示的时候是12小时制。刚好在windows上测试的时候，用来转换的时间是没有考虑到不是24小时制的情况，就出现了如下情况：泰利特平台数据库是每1分钟更新一次数据，现在是北京时间上午9点，当非24小时制转换时，java代码获取到的是9：00，减去8小时时差就是同一天的凌晨1就会请求获取非合适时间获取数据。解决方案：Date date=new Date(); //转换成时间格式12小时制 SimpleDateFormat df_12=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); //转换成时间格式24小时制 SimpleDateFormat df_24=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); System.out.println("12小时制时间::"+df_12.format(date)); System.out.println("24小时制时间::"+df_24.format(date));输出结果为：12小时制时间::2017-12-07 03:55:04 24小时制时间::2017-12-07 15:55:04

request.getcontextPath()详解 request.getContextPath()：是在开发Web项目时，经常用到的方法，是为了解决相对路径的问题，可返回站点的根路径。比如：要生成一个文件放在服务器上得一个目录下,可以使用request.getContextPath()+/dir,组成一个完整得目录结构！当使用Tomcat作为Web服务器，项目一般部署在Tomcat下的webapps的目录下。具体来说主要用两种部署的路径：（1）将web项目中的webRoot下的文件直接拷贝到webapps/ROOT下（删除ROOT下的原有文件）；（2）在Tomcat下的webapps中创建以项目名称命名（当然也可以用其他的名称）的文件夹，并将webRoot下的文件直接拷贝到该文件夹下。对于第一部署方法，request.getContextPath()的返回值为空（即："",中间无空格，注意区分null)。对于第二部署方法，其返回值为：/创建的文件夹的名称。假定你的web application 名称为news,你在浏览器中输入请求路径：http://localhost:8080/news/main/list.jsp则执行下面向行代码后打印出如下结果：1、System.out.println(request.getContextPath());打印结果：/news2、System.out.println(request.getServletPath());打印结果：/main/list.jsp3、System.out.println(request.getRequestURI());打印结果：/news/main/list.jsp4、ystem.out.println(request.getRealPath("/"));打印结果：F:\Tomcat 6.0\webapps\news\testrequest.getContextPath()可以返回当前页面所在的应用的名字;request.getSchema()可以返回当前页面使用的协议，http 或是 https;request.getServerName()可以返回当前页面所在的服务器的名字;request.getServerPort()可以返回当前页面所在的服务器使用的端口,就是80;实际应用中，一般用来解决jsp测试和生产环境路径不同的问题：% String appContext = request.getContextPath(); String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + appContext; %

Java循环语句中断 return 语句的作用return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行return 返回一个值给调用该方法的语句，返回值的数据类型必须与方法的声明中的返回值的类型一致，可以使用强制类型转换来是数据类型一致return 当方法说明中用void声明返回类型为空时，应使用这种格式，不返回任何值。break语句的作用只能在循环体内和switch语句体内使用break语句。当break出现在循环体中的switch语句体内时，其作用只是跳出该switch语句体。当break出现在循环体中，但并不在switch语句体内时，则在执行break后，跳出整个循环体,后面的都不执行。（就比如说两个for语句，第一个for语句里面有一个break执行了，则这个for循环后面的多不再执行，哪怕那个break是在for里面的if里面执行的，直接转到第二个for循环中）在死循环结构中，当达到某一条件时,应用break语句跳出该死循环.continue语句作用continue语句的一般形式为：continue;其作用是结束本次循环，即本次循环不执行,接着执行下一次循环。注意：执行continue语句并没有使整个循环终止。在while和do-while循环中，continue语句使得流程直接跳到循环控制条件的测试部分 ，然后决定循环是否继续进行。在for 循环中，遇到continue后，跳过循环体中余下的语句，而去对for语句中的“表达式3”求值，然后进行“表达式2”的条件测试，最后根据“表达式2”的值来决定for循环是否执行。在循环体内，不论continue是作为何种语句中的语句成分，都将按上述功能执行，这点与break有所不同public class Test{ public static void main(String[] args){ testBreak(); testContinue(); testReturn(); } public void testBreak(){ for(int i=0;i<10;i++){ if(i%2==0){ System.out.println("i="+i); }else{ System.out.println("执行了break语句,跳出当前循环!"); break; } } } public void testContinue(){ for(int i=0;i<10;i++){ if(i%2==0){ System.out.println("没有执行continue语句输出i="+i); }else{ System.out.println("执行了Continue语句,跳出当前循环!"); continue; } } } public void testReturn(){ for(int i=0;i<10;i++){ System.out.println("执行了return语句,直接跳出了当前的testReturn方法!"); return; } } }运行结果：i=0 执行了break语句,跳出当前循环! 没有执行continue语句输出i=0 执行了Continue语句,跳出当前循环! 没有执行continue语句输出i=2 执行了Continue语句,跳出当前循环! 没有执行continue语句输出i=4 执行了Continue语句,跳出当前循环! 没有执行continue语句输出i=6 执行了Continue语句,跳出当前循环! 没有执行continue语句输出i=8 执行了Continue语句,跳出当前循环! 执行了return语句,直接跳出了当前的testReturn方法!for循环的语句执行顺序：for(sta1, sta2, sta3){ sta4; }上面的代码当中：1、当进入for循环时，先执行sta1，2、再执行sta2，如果sta2判断为真，则执行sta43、再执行sta34、又执行sta2，sta2为真，则执行sta4,如此重复，最后由sta2决定是否执行循环。

CSS3学习笔记 Background属性background-color 背景颜色 可用英文单词 或者 RGB(X,X,X)background-image 背景图片， background-image: url(xxxx.png);background-repeat 是否重复，比如，当图片不够大时，选择repeat则会用多张图片填满，边缘显示可能不完整，如果设置为 no-repeat 就只显示那张图片，不会出现多张同样的。background-position 这是设置图片的位置，分为 水平方向 和 垂直方向<br/>水平方向有 left center right<br/>垂直方向有 top center bottom<br/>用法： background-position: right top; // 显示在右上角 先 水平 再 垂直 <br/>当然 right 跟 top 可以替换成 像素 如 200px 200px 距离左边200像素 上边200像素。连写顺序：background: background-color background-image background-repeat background-position字体属性font-size: 20px;font-style: normal; // Italy 斜体 normal 是正常color: red;font-family: "楷体";font-weight: bold bolder lighter // 粗 加粗 细线连写顺序：font: font-style font-weight font-size font-family// font-size 跟 font-family 必须得有，而且必须得放在最后两个行内元素可以多个标签放在同一行，但不能设置宽高（其实不是不能，而是设置了但没效果）有这些元素： span u b i s ins strong del em a块级元素块级元素都是单独占一行的，可以设置宽和高有这些元素： div p h ul ol dl li通过设置 display 属性，可以让标签，既能够设置宽和高又能够在同一行（行内块级元素） display: inline-block; // 还可以是 block inlinea标签的字体颜色是不会从父级元素继承下来的，要想设置其颜色要直接指定，比如这个a标签有class或者id，就直接给它的class或者id设置属性h标签的字体大小也不会从父级元素中继承下来。如果 div不设置宽和高，那么这个div的宽会 从父级元素直接继承下来 ，但不会继承高度，也就是说高度为0（记住宽可以继承，高不可以继承）CSS初始化 *{margin: 0; padding: 0;}让一个div居中，（仅仅是水平居中） margin: 0 auto; 字体的居中用 text-align: center一个class可以被多个标签使用，一个标签也可以有多个class但是 一个个标签只能有一个id，一个id也只能被一个标签使用。通配符在进行选择时，会遍历页面上的所有标签，并给其设置相应的属性（所以一般情况下不建议使用）标签选择器子元素选择器（用大于号 > 进行选择）子元素选择器只作用于第一代子元素，也就是直接子元素<div class="father"> <p class="son1">abc</p> <p class="son2">def</p> <div class="son"> <p class="son4">gfh</p> </div> <p class="son3">jkl</p> </div>.father > p 则是 选择 father这个父div下的直接 p 元素（也就是son1 son2 son3 三部分）后代选择器 （父元素与子元素用 空格 隔开）还是上面的代码 如果是 .father .son p{样式} 则会选择所有的 p 标签也就是说，后代选择器，作用于 N（自然数） 代子元素。<br/><br/><br/><br/><br/><br/>CSS 3圆角效果border-radius: 10px; 设置圆角不同浏览器有不同的内核渲染，为了兼容要这样写：-webkit-border-radius: 50%; // chrome和Safari -moz-border-radius: 50%; // Firefox -ms-border-radius: 50%; // ie -o-border-radius: 50%; // opera border-radius: 50%; // 一般一个矩形分四个角，左上，右上，左下，右下。border-top-left-radius: 10px; // 左上角10px圆角 border-top-right-radius: 10px; // 右上角10px圆角 border-bottom-left-radius: 10px; // 左下角10px圆角 border-bottom-right-radius: 10px; // 右下角10px圆角四个属性可单独设置。另一种设置圆角的方法：参数值为1个：四个角都是该圆角属性border-radius: 10px 8px; // 左上角和右下角为10px 右上角和左下角为8px border-radius: 10px 8px 9px; // 左上角为10px 右上角和左下角为8px 右下角为9px border-radius: 10px 8px 9px 7px; // 左上角为10px 右上角为8px 右下角为9px 左下角为7px盒子阴影box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];假设扩展半径设置为10px;则阴影会向上向下向左向右增加10px； （可以有负值）阴影模糊半径设置后，阴影没那么生硬，会模糊。值越大，模糊面积越大。(没有负值)x轴偏移量是指阴影会超出背景图片横向多少px。 y则超出背景图片纵向多少。x 和 y可以有负值，x负的会向左，y负会向上。（正的是右下）如果要让阴影出现在盒子里面，则在 box-shadow: 作为第一个参数或者放在最后，其他位置无效。 有inset时，x和y正值为左和上。为边框应用图片使用 border-image, 语法：切割图片的宽度，也就是四个 70 那里，是根据 border: 70px solid red; 里面的70来设定的，如果里面是 60，则border-image上的也是设置60。颜色之RGBAcolor：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。渐变色彩第一个参数：指定渐变方向，可以用“角度”的关键词或“英文”来表示：图片中少了 to bottom left (从右上角到左下角) 和 to bottom right (从左上角到右下角)​​ 第一个参数省略时，默认为“180deg”，等同于“to bottom”。​​ 第二个和第三个参数，表示颜色的起始点 和 结束点，可以有多个颜色值。​ 比如background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);效果如下图：文字与字体text-overflow:ellipsis; (clip 为剪切，会显示边界前的，后面的是断的) 控制文字超出边界的部分以什么形式展示。要实现超出边界（溢出）的文字显示为省略号，则还需要强制使文字在同一行显示 white-space: nowrap; 以及溢出的文字隐藏起来 overflow: hidden;即，这样写：text-flow: ellipsis; overflow: hidden; white-space: nowrap;嵌入字体：@font-face{ font-family: "字体名"; src= url("字体在服务器上的路径"); }注意：这里设置以后，标签样式中的，font-family: "";必须跟上面的一样。这样即使电脑本地没有该字体，浏览器一样可以显示。给文字设置阴影text-shadow: X-Offset Y-Offset blur color;X-Offset: 是指阴影在x轴方向的偏移距离，为正值时，阴影在右边。负值反之。<br/>Y-Offset: 是指阴影在y轴方向的偏移距离，为正值时，阴影在下边。负值反之。 <br/>blur: 阴影模糊的程度，值越大越模糊。不能是负值。color: 就是阴影的颜色。背景大小 background-sizebackground-size: auto | <百分比> | <长度值> | cover | contain取值说明：1、auto 默认值。 不改变图片大小，将【以图片原来的大小显示】。2、百分比： 设为 100%一个值的时候，图片将完整的显示在盒子当中。 两个值时，将以盒子的宽高乘以相应的百分比以后显示。3、长度值就是设置相对应的长度。如果设置的宽高跟盒子的宽高一样，那效果跟百分百一样的。4、cover 图片会被等比缩放填 【满整个容器】5、cantain 将图片缩放至 【某一边贴合容器】css3属性选择器html代码：<a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a>css代码：a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }效果图：<br/>结构性伪类选择器-root:root{ background: orange; }       相当于 <br/>html{ background: orange; } 可以修改页面背景颜色。 按照字面意思其实就是根选择器。-not:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。<br/>想给表单中除submit按钮之外的input元素添加红色边框<br/>input:not([type="submit"]){border:1px solid red;}其他的例子： div:not([class="nav"]){border: 1px solid red;}-emptyempty 选择器表示的就是空。用来选择 没有任何内容 的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。p:empty{ display: none; } // 隐藏完全没有内容的p标签-target:target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。来个例子： <br/>html代码：<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div>css代码：.menuSection{ display: none; } #brand:target{ display:block; }效果图一开始 content for brand是不显示的，点击brand以后才显示。 href 里面的#后面的值要跟标签的 id 值相同-first-child顾名思义就是选择父元素的第一个子元素的元素E，记住是子元素而不是后代元素额外补充：子元素与后代元素的区别后代元素表达方式：例：#main p{ color:red; } 后代元素则是 父元素后面接空格再接子元素子元素：表达方式：例：#main>p{ color:red; } 即子元素使用大于号 > 进行连接后代元素包括子元素，孙子元素，重孙子元素.........假设 ul里面有6个li标签，则选用 ol>li:first-child{color:orange;} 则序号1（仅仅是数字1）会变橙色。其他不变-last-child跟first-child相反的，也就是最后一个。-nth-child:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。HTML代码：<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ol>css代码：ol > li:nth-child(2n){ background: orange; }效果图：-nth-last-child:nth-last-child(n)选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。-first-of-type (last-of-type 跟这个相反):first-of-type选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。-nth-of-type(n):nth-of-type(n)选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。-nth-last-of-type(n):nth-last-of-type(n)选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。-only-child:only-child选择器选择的是父元素中只有一个子元素。 也就是说，匹配的元素的父元素中仅有一个子元素。 也就是作用于子元素的。html代码：<div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div>css代码：.post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }效果图： 看到没？css里面是对p标签使用的。即对子元素使用，会自动选择出只有一个子元素的父标签。CSS3选择器:enabled在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。:disabled:disabled选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性，即 disabled: disabled;::selection::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：::selection{ // 设置网页中字体被选择时，背景颜色为灰色，字体颜色为粉色 background: #ccc; color: pink; }:read-only:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了readonly="readonly";设置处于只读状态元素的样式：textarea[name="comment"]:read-only{ width: 50px; height: 20px; background: red; }CSS3变形旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。div{ // 设置div 绕着原点逆时针旋转45度， deg相当于度 -webkit-transform: rotate(45deg); transform: rotate(45deg); }扭曲 skew()skew(x,y) 同时向x，y轴两个方向扭曲（注意所有的skew()都是不会旋转，是会改变外形的）skew(x) 只向x轴扭曲。 正值时，是left那条线，逆时针对x轴产生角度扭曲。相当于把y轴正半轴当x轴，逆时针产生角度。如果是负值，则是顺时针。skew(y) 只向y轴扭曲。 正值时，是bottom那条线，顺时针(负值则逆时针)对y轴产生角度扭曲。也就是相当于把x轴正半轴当y轴，与x轴正半轴形成角度。transform: skew();skew(45deg) skew(45deg , 45deg) skew(0, 45deg)translate()translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。一样的有 同时向x轴y轴移动，只向x轴移动，只向y轴移动。transform: translate(10px)过渡属性 transistion-property在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。transition-property:指定过渡或动态模拟的CSS属性transition-duration:指定完成过渡所需的时间,也就是从旧属性过渡到新属性花费的时间长度transition-timing-function:指定过渡函数transition-delay:指定开始出现的延迟时间 (多个值逗号 , 隔开)transition-property特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。用一个简单的例子来说明这个问题：假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。transition-timing-functiontransition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：KeyframesKeyframes 被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } }在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和@keyframes定义的动画名称完全一致（区分大小写），比如上面的 changecolor 动画名,其实和css中的： div:hover{animation-name: changecolor} 里面动画名一样。如果不一致将不具有任何动画效果。animation-duration跟上面的transition-duration作用是一样的，用来指定动画播放时间长。animation-timing-function 跟 transition-timing-function 作用一样，也是那几个函数。animation-delay 设置动画开始的延迟时间。animation-iteration-count属性主要用来定义动画的播放次数。animation-direction 属性主要用来设置动画播放方向，主要有两个值，一个是 normal 一个是 alternateanimation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。CSS3多列布局columnscolumns语法： columns: || 实现类似报刊，杂志的分栏 <br/>举例： 实现分2栏，没栏200px columns: 200px 2; 没有列数的话，会根据文本长度以及列宽定列数。column-gapcolumn-gap主要用来设置列与列之间的间距, 语法：column-gap: normal || length: 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。normal: 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。column-rulecolumn-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。column-rule:|| 属性值 column-rule-width column-rule-style column-rule-color 属性值说明 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) column-spancolumn-span 是分列元素的子元素能跨越多少列。column-span: none | all 可以配合 nth-child(n) 使用，来设置哪个子元素要跨列伸缩布局创建一个flex容器.flexcontainer{ display: -webkit-flex; display: flex; }项目的显示Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; // 也可以设为 row 行显示 flex-direction: column; }Flex项目移到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。(上一个图是水平，上图是垂直).flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; // 把flex-start改为flex-end就是移动到底部 justify-content: flex-start; }Flex项目移动到左边flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; // 把row改为column就是竖着移动到左边 flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }Flex项目移动到右边.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; // 其实就是上面的移到左边的start改成end justify-content: flex-end; }Flex项目的水平居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }如果需要使用上面中间垂直，或者左右居中，就删除相应的属性就行。媒体类型随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示： 值设备类型 ALL所有设备 Braille盲人用点字法触觉回馈设备 Embossed盲文打印机 Handheld便携设备 Print打印用纸或打印预览视图 Projection各种投影设备 Screen电脑显示器 Speech语音或音频合成器 Tv电视机类型设备 Tty使用固定密度字母栅格的媒介，比如电传打字机和终端 说白了就是通过设置媒体类型，让不同你的web在不同设备上尽量最可能的显示，这就需要不同的设备具有不一样的css文件。常用引用方式有： link @import @medialink:<link rel="stylesheet" type="text/css" href="style.css" media="screen" />@import:一种 是在样式中通过@import调用另一个样式文件；另一种方法 是在标签中的中引入，但这种使用方法在IE6~7都不被支持method 1:@importurl(reset.css) screen; @importurl(print.css) print;method 2:<head> <style type="text/css"> @importurl(style.css) all; </style> </head>@media@media是CSS3中新引进的一个特性，被称为媒体查询。（1）在样式文件中引用媒体类型：@media screen {选择器{/你的样式代码写在这里…/}}（2）使用@media引入媒体类型的方式是在标签中的中引用。<head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>media queries的使用方法@media 媒体类型and （媒体特性）{你的样式}最大宽度 max-width跟名字差不多，意思就是最大的宽度是多少，换句话说就是小于等于。@media screen and (max-width:480px){ .ads { display:none; // 意思是当屏幕宽度小于或等于480px时或者是电脑屏幕时，广告部分就隐藏起来 } }最小宽度 min-width意思就是最小的宽度是多少，换句话说就是@media screen and (min-width:480px){ .ads { display:none; // 意思是当屏幕宽度大于或等于480px时或者是电脑屏幕时，广告部分就隐藏起来 } }Resposive设计维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。流体风格流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。弹性图片img{ max-width: 100%; }Resposive设计--技巧大胆的毫无保留的丢弃：尽量少用无关紧要的div<br/>不要使用内联元素inline<br/>尽量少用JS或flash<br/>丢弃无用的绝对定位和浮动样式<br/>丢弃任何冗余结构和不使用100%设置<br/>哪些东东能帮助Responsive确定更好的布局呢？保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。Resposive设计--meta标签最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。个meta标签被称为可视区域meta标签，其使用方法如下。<meta name="viewport" content="" />在content中的属性主要包括以下属性值，用来处理可视区域。在实际的项目开发中，为了让resposive设计在智能设备中显示正常，也就是web的屏幕自适应大小，显示在屏幕上，可以通过重置meta来控制，告诉它设备的宽度或者视图的宽度，也就是禁用设备默认的自适应的效果。<meta name="viewport" content="width = device-width, initial-scale = 1.0" />自由缩放属性resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。resize: both | horizontal | vertical | inherit // `both` 宽高 都能够拉伸； `horizontal`：允许水平拉伸； `vertical`：允许垂直拉伸； inherit： 从父元素中继承拉伸属性。 none当然是水平跟垂直都不给啦。外轮廓属性外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。（换句话说也就是比如一个按钮当你点击它的时候，它周围有一个光环一样）outline: outline-color | outline-style | outline-width | outline-offset | inheritoutline-color: 是设置轮廓的属性的。outline-sytle: 在实际应用中可以将这个属性忽略掉，一般设为noneoutline-width: 在实际应用中也可以将这个属性忽略掉，一般设为mediumoutline-offset: 定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。最后一个是继承父元素的outline效果。生成内容使用 :before 或者 :after 配合 content：能实现插入功能；在h1的前面插入文字： h1:before{ content: "我是被插到h1前面的"; color: red; }