echarts基础页面备份 Echarts官网,选择你喜欢的样式,直接copy到原文中即可 Bar(Line和Pie的bean类参考Bar按照自己的需求写) BarDao BarService 将assets文件夹拖到web目录下 web.xml index.jsp index.js index.css(会直接公布源码,感兴趣可以仔细看) 请点击这里,git已发布 (下载1.5和sql就行,剩下的两个不要下载), Java爬虫项目(一 爬取)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA Java爬虫项目(二 展示)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA Java爬虫项目(三 爬虫)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA
四:使用Echarts可视化,从51job网站爬取的招聘信息
1.效果图(我将公开源码,可支持二次开发,中间的数据是获取数据库,并且实现自滚动的)
2.首先了解一下Echarts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>职业仓</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <!-- 引入主题 --> <script src="https://www.runoob.com/static/js/wonderland.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> 3.项目结构
4.项目源码
package cn.xyecy.bean; public class Bar { private String name; //x轴,名称 private int num; //y轴,数量 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getNum() { return num; } public void setNum(int num) { this.num = num; } } package cn.xyecy.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import cn.xyecy.bean.Bar; public class BarDao { /** * @author wen * * 查询所有数据 * @return 存放所有数据的线性表 */ public ArrayList<Bar> query() { ArrayList<Bar> barArr = new ArrayList<Bar>(); try { //JDBC方式连接MySQL数据库 Class.forName("com.mysql.jdbc.Driver"); Connection conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/job51?characterEncoding=utf8", "root", "123456"); PreparedStatement stmt = conn.prepareStatement("SELECT * FROM bar"); ResultSet rs = stmt.executeQuery(); //将test表中的数据存储到线性表中 while(rs.next()) { Bar bar = new Bar(); bar.setName(rs.getString("name")); bar.setNum(rs.getInt("num")); barArr.add(bar); } //关闭连接 conn.close(); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } return barArr; } } package cn.xyecy.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.xyecy.bean.Bar; import cn.xyecy.dao.BarDao; import net.sf.json.JSONArray; public class BarService extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //创建DAO BarDao barDao = new BarDao(); //从数据库里取数据 ArrayList<Bar> barArr = barDao.query(); //设置服务器响应时向JSP表示层传输数据的编码格式 resp.setContentType("text/html; charset=utf-8"); //ArrayList对象转化为JSON对象 JSONArray json = JSONArray.fromObject(barArr); //控制台显示JSON System.out.println(json.toString()); //返回到JSP PrintWriter writer = resp.getWriter(); writer.println(json); writer.flush(); //关闭输出流 writer.close(); } }
在WEB-INF目录下创建lib包,同时导入所需的jar包
这里我之后会将所需的文件上传到云端供大家下载,链接都会写在文章末端,具体项目结构文章开始有说,请仔细看<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <!-- 注册servlet --> <servlet> <servlet-name>barService</servlet-name> <servlet-class>cn.xyecy.servlet.BarService</servlet-class> </servlet> <servlet-mapping> <servlet-name>barService</servlet-name> <url-pattern>/bar.do</url-pattern> </servlet-mapping> </web-app> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <%@page import="java.sql.*" %> <!DOCTYPE> <head> <%-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">--%> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> <meta name="renderer" content="webkit"> <title>岗位信息展示</title> <link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> <link rel="stylesheet" href="assets/css/index.css"/> <!-- 使用单文件引入的方式使用ECharts.JS --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/echarts.min.js"></script> <script src="assets/js/index.js"></script> <script src="assets/js/map/shandong.js"></script> <%-- 分页插件的引入--%> <script type="text/javascript" src="assets/js/jqPaginator.js"></script> <script type="text/javascript"> $(function() { var $this = $("#scroll_table"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); }, 200); }).trigger("mouseleave"); function scrollNews(obj) { var $self = obj.find("tbody"); var lineHeight = $self.find("tr:first").height(); $self.animate({ "marginTop": -lineHeight + "px" }, 600, function() { $self.css({ marginTop: 0 }).find("tr:first").appendTo($self); }) } }) </script> </head> <body> <!--头部--> <div class="header"> 岗位信息展示 <a href="javascript:;" class="a-access"> <button class="button type1"> 退出 </button> </a> </div> <!--主体--> <div class="main clearfix"> <div class="main-left"> <div class="border-container"> <div class="name-title">学历偏向(暂时静态)</div> <div id="radar"></div> <span class="top-left border-span"></span> <span class="top-right border-span"></span> <span class="bottom-left border-span"></span> <span class="bottom-right border-span"></span> </div> <div class="border-container"> <div class="name-title">学历需求与岗位数量(实现中)</div> <div id="graduateyear"></div> <ul class="three-pie clearfix"> <li> <div id="sexrate"></div> </li> <li> <div id="householdrate"></div> </li> </ul> <span class="top-left border-span"></span> <span class="top-right border-span"></span> <span class="bottom-left border-span"></span> <span class="bottom-right border-span"></span> </div> </div> <div class="main-middle"> <div class="border-container" id="scroll_table"> <% //Java语句 try { Class.forName("com.mysql.jdbc.Driver"); // 加载驱动 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/job51", "root", "123456"); ////获取Connection对象 if(con != null){ Statement stmt = null; ResultSet rs = null; String sql = "SELECT *FROM jobs;"; //查询语句 stmt = con.createStatement(); rs = stmt.executeQuery(sql); %> <table class="table table-kingdargen"> <thead> <tr> <th><%out.print("序号");%></th> <th><%out.print("岗位");%></th> <th><%out.print("公司名称");%></th> <th><%out.print("工作地点");%></th> <th><%out.print("薪资");%></th> </tr> </thead> <tbody id="kbTable"> <%-- //这是一个循环，读取数据库中的数据--%> <% while (rs.next()) {%> <tr> <td><%out.print(rs.getInt("job_id"));%></td> <td><%out.print(rs.getString("job_name"));%></td> <td><%out.print(rs.getString("company_name"));%></td> <td><%out.print(rs.getString("work_addr"));%></td> <td><%out.print(rs.getString("salary"));%></td> </tr> <%-- //循环结束--%> <%}%> </tbody> </table> <% }else{ out.print("Connection fail！"); } }catch (Exception e) { //e.printStackTrace(); out.print("Connection Exception！"); } %> <%-- 添加分页导航层--%> <%-- <div class="col-md-6" style="text-align: center;margin-top: 20px;">--%> <%-- <ul id="pagination"></ul>--%> <%-- </div>--%> <span class="top-left border-span"></span> <span class="top-right border-span"></span> <span class="bottom-left border-span"></span> <span class="bottom-right border-span"></span> </div> </div> <div class="main-right"> <div class="border-container"> <div class="name-title">学历要求(暂时静态)</div> <div id="courserate"></div> <span class="top-left border-span"></span> <span class="top-right border-span"></span> <span class="bottom-left border-span"></span> <span class="bottom-right border-span"></span> </div> <div class="border-container"> <div class="name-title">岗位发布数量</div> <div id="changedetail"></div> <span class="top-left border-span"></span> <span class="top-right border-span"></span> <span class="bottom-left border-span"></span> <span class="bottom-right border-span"></span> </div> <div class="border-container"> <ul> <div class="name-title">发布时间</div> <div id="professionrate"></div> </ul> <span class="top-left border-span"></span> <span class="top-right border-span"></span> <span class="bottom-left border-span"></span> <span class="bottom-right border-span"></span> </div> </div> </div> </body> $(function(){ function loadData(option) { $.ajax({ type : 'post', //传输类型 async : false, //同步执行 url : 'bar.do', //web.xml中注册的Servlet的url-pattern data : {}, dataType : 'json', //返回数据形式为json success : function(result) { if (result) { //初始化xAxis[0]的data option.xAxis[0].data = []; for (var i=0; i<result.length; i++) { option.xAxis[0].data.push(result[i].name); } //初始化series[0]的data option.series[0].data = []; for (var i=0; i<result.length; i++) { option.series[0].data.push(result[i].num); } } }, error : function(errorMsg) { alert("加载数据失败"); } });//AJAX }//loadData() /*标准*/ var radar = echarts.init(document.getElementById('radar')); option = { title: { text: '' }, tooltip: {}, legend: { data: ['第一推荐', '第二推荐','第三推荐'], x:"center", y:'bottom', textStyle:{ color:"#fff" } }, color: ['#4c95d9', '#f6731b', '#8cd43f'], radar: { name:{ textStyle: { //设置颜色 color:'#fff' } }, indicator: [ { name: '无要求', max: 5000}, { name: '中职及以下', max: 5000}, { name: '专科', max: 5000}, { name: '本科', max: 5000}, { name: '研究生', max: 5000}, { name: '硕士', max: 5000} ], center: ['50%','50%'], radius: "58%" }, series: [{ name: '', type: 'radar', itemStyle : { normal : { splitLine: { lineStyle: { } }, label: { show: false, textStyle:{ }, formatter:function(params) { return params.value;} }, } }, data : [ { value : [240, 1000, 2800, 3500, 5000, 1900], name : '第一推荐' }, { value : [500, 1400, 2800, 3100, 4200, 2100], name : '第二推荐' }, { value : [600, 1400, 1800, 2100, 3200, 1100], name : '第三推荐' } ] }] }; radar.setOption(option); /* 飞鸟尽*/ var graduateyear = echarts.init(document.getElementById('graduateyear')); option = { title : { text:"", x:'center', y:'top', textStyle: { color:'#fff', fontSize:13 } }, tooltip : { trigger: 'axis' }, grid: { left: '3%', right: '8%', bottom: '5%', top:"13%", containLabel: true }, color:["#72b332",'#35a9e0'], legend: { data:['学历需求(静态)','岗位数量'], show:true, right:'15%', y:"0", textStyle:{ color:"#999", fontSize:'13' }, }, toolbox: { show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['3月','4月','5月','6月'], splitLine:{ show:true, lineStyle:{ color: '#2d3b53' } }, axisLabel:{ textStyle:{ color:"#fff" }, alignWithLabel: true, interval:0, rotate:'15' } } ], yAxis : [ { type : 'value', splitLine:{ show:true, lineStyle:{ color: '#2d3b53' } }, axisLabel:{ textStyle:{ color:"#999" } }, } ], series : [ { name:'学历需求(静态)', type:'line', smooth:true, symbol:'roundRect', data:[1168,1189,1290,1300] }, { name:'岗位数量', type:'line', smooth:true, symbol:'roundRect', data:[2335,3010,6234,0] } ] }; graduateyear.setOption(option); /*==*/ var sexrate = echarts.init(document.getElementById('sexrate')); var total = { name: '==' }; option = { title: [{ text: total.name, left: '48%', top: '34%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }, { text: total.value, left: '48%', top: '44%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }], tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, color:['#70a3ff','#ff7f4e'], legend: { orient: 'vertical', x:'center', bottom:'5%', selectedMode:false, formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value ; for(var i = 0; i < option.series[0].data.length; i++){ if(name==oa[i].name){ return name + " "+oa[i].value+" "+ (oa[i].value / num * 100).toFixed(2) + '%'; } } }, data: ['test1','test2'], show:true, textStyle:{ color:'#fff', fontWeight:'bold' }, }, series : [ { name: 'PK', type: 'pie', selectedMode: 'single', radius: ['45%', '55%'], center: ['50%', '40%'], data: [ {value: 2629, name: 'test1'}, {value: 2507, name: 'test2'} ], label: { normal: { show: false, position: "outer", align:'left', textStyle: { rotate:true } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label:{ show: true, formatter: '{b} {c}' } } } } ] }; sexrate.setOption(option); var householdrate = echarts.init(document.getElementById('householdrate')); var total = { name: '==' }; option = { title: [{ text: total.name, left: '48%', top: '34%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }, { text: total.value, left: '48%', top: '44%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }], tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, color:['#4f9de7','#4acf79'], legend: { orient: 'vertical', x:'center', bottom:'5%', selectedMode:false, formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value ; for(var i = 0; i < option.series[0].data.length; i++){ if(name==oa[i].name){ return name + " "+oa[i].value+" "+ (oa[i].value / num * 100).toFixed(2) + '%'; } } }, data: ['test1','test2'], show:true, textStyle:{ color:'#fff', fontWeight:'bold' }, }, series : [ { name: 'FK', type: 'pie', selectedMode: 'single', radius: ['45%', '55%'], center: ['50%', '40%'], data: [ {value: 2629, name: 'test1'}, {value: 2507, name: 'test2'} ], label: { normal: { show: false, position: "outer", align:'left', textStyle: { rotate:true } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label:{ show: true, formatter: '{b} {c}' } } } } ] }; householdrate.setOption(option); /* =====-=*/ var courserate = echarts.init(document.getElementById('courserate')); option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', right: '0', y:'middle', textStyle:{ color:"#fff" }, formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value+oa[5].value; for(var i = 0; i < option.series[0].data.length; i++){ if(name==oa[i].name){ return name + ' '+oa[i].value; } } }, data: ['无要求','中职及以下','专科','本科','研究生','博士'] }, series : [ { name: '学历要求', type: 'pie', radius : '65%', color:['#27c2c1','#9ccb63','#fcd85a','#60c1de','#0084c8','#d8514b'], center: ['38%', '50%'], data:[ {value:234, name:'无要求'}, {value:335, name:'中职及以下'}, {value:310, name:'专科'}, {value:234, name:'本科'}, {value:135, name:'研究生'}, {value:234, name:'博士'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, itemStyle: { normal: { label:{ show: true, position:'outside', formatter: '{b}' } }, labelLine :{show:true} } } ] }; courserate.setOption(option); /* =======*/ var professionrate = echarts.init(document.getElementById('professionrate')); option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', right: '0', y:'middle', textStyle:{ color:"#fff" }, data: ['3月','4月','5月','6月'], formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value + oa[2].value; for(var i = 0; i < option.series[0].data.length; i++){ if(name==oa[i].name){ return name + ' '+oa[i].value; } } } }, series : [ { name: '发布时间', type: 'pie', radius : '60%', center: ['35%', '50%'], data:[ {value:2335, name:'3月'}, {value:3010, name:'4月'}, {value:6234, name:'5月'}, {value:0, name:'6月'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, itemStyle: { normal: { label:{ show: true, position:'outside', formatter: ' {b}' } }, labelLine :{show:true} } } ] }; professionrate.setOption(option); //bar图 var changedetail = echarts.init(document.getElementById('changedetail')); option = { //工具箱组件:下载为图片 toolbox:{ feature:{ saveAsImage:{} } }, tooltip : { show : true }, legend : { data : [ '岗位数量' ] }, xAxis : [ { type : 'category', axisLabel:{ textStyle:{ color:"#fff" }, alignWithLabel: true, interval:0, rotate:'0' } } ], yAxis : [ { type : 'value' } ], series : [ { name : '岗位数量', type : 'bar' } ] }; //加载数据到option loadData(option); //设置option changedetail.setOption(option); }) // //分页导航栏设置 // //初始化页面 // $(function(){ // initpage(); // }) // //分页设置 // function initpage() { // var totalpage = "${pages}"; // totalpage = parseInt(totalpage); // if (totalpage == 0) // { // return; // } // var currentpage = "1"; // currentpage = parseInt(currentpage); // $.jqPaginator( // '#pagination', // { // totalPages : totalpage, // visiblePages : 5, // currentPage : currentpage, // wrapper : '<ul class="pagination lastspan"></ul>', // first : '<li class="first"><a href="javascript:void(0);">首页</a></li>', // prev : '<li class="prev"><a href="javascript:void(0);">«</a></li>', // next : '<li class="next"><a href="javascript:void(0);">»</a></li>', // last : '<li class="last"><a href="javascript:void(0);">尾页</a></li>', // page : '<li class=""><a href="javascript:void(0);">{{page}}</a></li>', // onPageChange : function(num) { // search(num); // } // }); // } /* Create by gaojiye */ @charset "utf-8"; /*通用样式ͨ*/ body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd { margin:0; padding:0; } ul, li{ list-style: none; } a:link, a:visited, a:active { text-decoration: none; } body{ background: #040f3c; } .header{ height: 80px; position: relative; padding-top: 13px; font-size: 36px; color: #00ffff; text-align: center; background: url(../bg.png) top center no-repeat; } .header a.a-access{ position: absolute; right: 3%; top: -18%; } .main{ padding: 0 30px 30px; } .main-left, .main-right{ float: left; width: 28%; padding: 0 10px; } .main-middle{ float: left; width: 44%; padding: 0 10px; } .border-container { position: relative; margin-top: 15px; padding: 10px; border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 0 50px rgba(255,255,255,.1),0 0 5px rgba(0,0,0,.3) } .border-container span.border-span { display: block; position: absolute; width:15px; height: 15px; opacity: .5 } .border-container span.top-left { top: -2px; left:-2px; border-top: 2px solid #54dcf2; border-left: 2px solid #54dcf2; } .border-container span.top-right { top:-2px; right:-2px; border-top: 2px solid #54dcf2; border-right:2px solid #54dcf2; } .border-container span.bottom-left { bottom: -2px; left: -2px; border-bottom: 2px solid #54dcf2; border-left: 2px solid #54dcf2; } .border-container span.bottom-right { bottom: -2px; right: -2px; border-bottom: 2px solid #54dcf2; border-right: 2px solid #54dcf2; } .name-title{ font-size:16px; font-weight: bolder; color: #00ffff; } #radar{ height: 275px; } #dormitorydetail{ height: 135px; } #graduateyear{ height: 192px; } .three-pie{ border-top: 1px solid rgba(255,255,255,.1); margin: -10px; margin-top: 10px; } .teacher-pie{ border-bottom: 1px solid rgba(255,255,255,.1); margin: -10px; margin-bottom: 0; } .three-pie li, .teacher-pie li{ float: left; width: 50%; border-right: 1px solid rgba(255,255,255,.1); } .teacher-pie li .name-title{ padding-left:10px ; padding-top:10px ; } .three-pie li:last-child, .teacher-pie li:last-child{ border-right: none; } #sexrate, #nationarate, #householdrate{ height: 266px; } #mapadd{ height: 304px; } .number-show{ position: absolute; top: 20%; right: 5%; } .number-show span.span-name{ font-size:14px ; color:#fffd51 ; } .number-show span.span-number-show{ font-size:18px ; color:#54b5b5 ; font-style: italic; } .number-show li{ line-height: 25px; } #teacherrate, #courserate, #professionrate{ height: 200px; } #agelist{ height: 130px; } #changedetail{ height: 229px; } .table-kingdargen{ margin-top: 6px; text-align: center; margin-bottom: 0; } .table-kingdargen>thead>tr>th{ border-bottom: 1px solid #0f4075; padding: 2px 8px; text-align: center; color: #419aff; font-size: 12px; font-weight: normal; border-top: 1px solid #0f4075!important; } .table-kingdargen tbody tr td{ padding: 1px 8px; font-size: 12px; border: none; color: #fff; } .table-kingdargen tbody tr:nth-child(2n){ background: #1d2a42; } .table-kingdargen tbody tr:hover{ background: #1d2a42; } .table-kingdargen tbody tr td:nth-child(2){ color: #e9aa00; } .table-kingdargen tbody tr td:nth-child(3){ color: #53bf18; } .table-kingdargen tbody tr td:nth-child(4){ color: #f9504a; } .table-kingdargen tbody tr td:nth-child(5){ color: #12f0e9; } #juniorservice{ height: 190px; } #edubalance{ height: 203px; } @import url("https://fonts.googleapis.com/css?family=Raleway"); * { box-sizing: border-box; } .copyright { position: absolute; bottom: 0; } .copyright a { text-decoration: none; color: #16a085; } .copyright a:hover { text-decoration: underline; } .button { position: relative; padding: 0.5em 1.5em; border: none; background-color: transparent; cursor: pointer; outline: none; font-size: 18px; margin: 1em 0.8em; } .button.type1 { color: #00ffff; } .button.type1.type1::after, .button.type1.type1::before { content: ""; display: block; position: absolute; width: 20%; height: 20%; border: 2px solid; transition: all 0.6s ease; border-radius: 2px; } .button.type1.type1::after { bottom: 0; right: 0; border-top-color: transparent; border-left-color: transparent; border-bottom-color: #566473; border-right-color: #566473; } .button.type1.type1::before { top: 0; left: 0; border-bottom-color: transparent; border-right-color: transparent; border-top-color: #566473; border-left-color: #566473; } .button.type1.type1:hover:after, .button.type1.type1:hover:before { width: 100%; height: 100%; } 5.数据库
6.项目源码
算了吃饭去,下午继续弄,你先一下7.其他文章
一:Jsoup+HttpClient爬取51job(前程无忧)网的岗位招聘信息
二:echarts展示mysql数据库中的数据
三:使用webmagic爬取51job网站的招聘信息8.其他的基础的文章
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
