css3-css 能不能设置padding的颜色不通过背景颜色设置—

css的圆角矩形边框设置颜色，但是却不显示，但是字体颜色正常，背景颜色也正常

width: 308px; height: 112px; color: white; padding: 10px; margin: 10px; border-color: #FA0000 #FA0000 #FA0000 #FA0000; line-height: 65px; top: 80%; border-radius: 50px;

echarts折线图设置title背景色无效?

使用echarts折线图,给title设置样式的时候,发现backgroundColor不起作用,不知道是哪里出了问题,希望熟悉echarts的大牛能指点下,不胜感激! 我的代码效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576638105_803105.png) 想要实现的是箭头所指部分给加一个背景色,参考文档: https://www.echartsjs.com/zh/option.html#title.backgroundColor 我的配置项如下: ``` areaOption: { title: { text:'今天活动签到0人;昨天活动签到 100人', backgroundColor:'#649FFF', show:true, left: 'right',//这个太神奇了,设置标题居中的. padding:20, textStyle: { fontSize: 12, align: 'center', }, }, legend: { // 图例 data: ['正在举办的活动场数', '当天线上签到人数',] show:true, padding:20, left:20, data: [ { name:'正在举办的活动场数', icon:'circle', textStyle:{ color:'#666666', fontSize: 12, } }, { name: '当天线上签到人数', icon:'circle', textStyle:{ color:'#666666', fontSize: 12, } }, ] }, grid: { top: 60, right: 40, bottom: 20, left: 50, containLabel: true }, tooltip: { trigger: 'axis',//坐标轴触发 snap: true, //坐标轴指示器是否自动吸附到点上 confine: true,//是否将 tooltip 框限制在图表的区域内 axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985', shadowColor: '#42515d', formatter: '{value}' //显示x轴的值 }, }, //formatter: "{value}<br/> {a0} <br/>{b} : {c}次" }, xAxis: [ { type: 'category', boundaryGap: false, // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] data: [], axisLabel: {//刻度相关 interval: 0, rotate: 45, } } ], yAxis: [ { type: 'value', name: "正\n在\n举\n办\n的\n活\n动\n场\n数", nameLocation: "center", nameGap: 35, nameRotate: 0, nameTextStyle: { fontSize: 16, }, splitLine: { show: true, lineStyle:{ type:'dotted', opacity:0.2 }, }, minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 axisLabel: { formatter: function (v) { return parseInt(v); //0表示小数为0位，1表示1位小数，2表示2位小数 } }, axisPointer: { show: true, label: { show: true, precision: 0 //这个用来控制y轴小数点精度 } }, }, { type: 'value', name: "当\n天\n线\n上\n签\n到\n人\n数", nameLocation: "center", nameGap: 35, nameRotate: 0, nameTextStyle: { fontSize: 16, }, splitLine: { show: true, lineStyle:{ type:'dotted', opacity:0.2 }, }, minInterval: 1, axisLabel: { formatter: function (v) { return v.toFixed(0); //0表示小数为0位，1表示1位小数，2表示2位小数 } }, axisPointer: { show: true, label: { show: true, precision: 0 //这个用来控制y轴小数点精度 } }, } ], series: [ { name: '正在举办的活动场数', type: 'line', // smooth: true, yAxisIndex: 1, areaStyle: {normal: {opacity: 0.2}},//设置透明度 data: [], // data:[16,16,6,5,4,4,3,0,0,0,0,0], itemStyle: {normal: {label: {show: true}}}, //color: ['#E04445'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#649FFF' // 0% 处的颜色 }, { offset: 1, color: '#649fff' // 100% 处的颜色 }], globalCoord: true // 缺省为 false } ], connectNulls: true, // clip:false }, { name: '当天线上签到人数', type: 'line', // smooth: true, yAxisIndex: 0, areaStyle: {normal: {opacity: 0.2}},//设置透明度 data: [], // data:[35,15,8,12,11,6,3,0,0,0,0,0], itemStyle: {normal: {label: {show: true}}}, // color: ['#649FFF'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#E04445' // 0% 处的颜色 }, { offset: 1, color: '#ff494a' // 100% 处的颜色 }], globalCoord: true // 缺省为 false } ], connectNulls: true, } ] }, ```

mui框架中的九宫格的背景颜色怎么在自己的css中改变？改了没有效果呀？

## mui框架中的九宫格的背景颜色怎么在自己的css中改变？改了没有效果呀？还有就是新人礼券的部分有一个100元怎么才能显示出来 ``` <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="../css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="../初始化css.css"/> <link rel="stylesheet" type="text/css" href="1首页.css"/> <script type="text/javascript" src="../jquery-ui-1.12.1.custom/jquery-3.1.1.min.js" ></script> <script src="1首页.js" type="text/javascript"></script> </head> <body>  <header class="mui-bar mui-bar-nav bg"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">订蛋糕</h1> <a class="mui-icon mui-icon-more shezhi"></a> </header>  <div class="mui-content bg">  <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="../img/banner4.png"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="../img/banner1.png"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="../img/banner3.png"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="../img/banner4.png"> </a> </div> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="../img/banner1.png"> </a> </div> </div> </div>  <div class="mui-row"> <div class="mui-col-sm-3 sousuo-size3"> <button class="mui-btn btn"> <span class="mui-icon mui-icon-location"></span> 北京 </button> </div> <div class="mui-col-sm-9 sousuo-size9"> <div class="mui-content-padded"> <div class="mui-input-row mui-search sousuo"> <input type="search" class="mui-input-clear mui-icon mui-icon-search" placeholder="输入搜索"> </div> </div> </div> </div>  <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><img class="img" src="../img/限时抢购.png"/></span> <div class="mui-media-body ">限时抢购</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><img class="img" src="../img/当天可达.png"/></span> <div class="mui-media-body">当天可达</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><span class="mui-badge">100元</span><img class="img" src="../img/新人礼券.png"/></span> <div class="mui-media-body">新人礼券</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><img class="img" src="../img/全部商品.png"/></span> <div class="mui-media-body">全部商品</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><img class="img" src="../img/水果蛋糕.png"/></span> <div class="mui-media-body">水果蛋糕</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><img class="img" src="../img/奶油蛋糕.png"/></span> <div class="mui-media-body">奶油蛋糕</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><img class="img" src="../img/创意蛋糕.png"/></span> <div class="mui-media-body">创意蛋糕</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"><img class="img" src="../img/新品推荐.png"/></span> <div class="mui-media-body">新品推荐</div> </a> </li> </ul>  <div class="hang"></div>  <div class="brands"> <span class="text">品牌街</span> <span class="mui-icon mui-icon-arrowright tu"></span> </div>  <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div class="mui-scroll"> <a class="mui-active"> <img class="img-size" src="../img/E时三客.png"/> </a> <a class="a-size"> <img class="" src="../img/pinkme.png"/> </a> <a class="a-size"> <img class="" src="../img/七彩蛋糕.png"/> </a> <a class="a-size"> <img class="" src="../img/wink cake.png"/> </a> </div> </div>  <div class="hang"></div>  <ul class="mui-table-view mui-grid-view"> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <div class="brands-border"> <img class="mui-media-object" src="../img/产品1.png"> <div class="mui-media-body brands-text">挚爱</div> <p class="brand">黑天鹅</p> <p class="price">￥999</p> <span class="pingjia">309人评价</span> <span class="songda">最快4小时送达</span> </div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <div class="brands-border"> <img class="mui-media-object" src="../img/产品 2.png"> <div class="mui-media-body brands-text">甜蜜如心鲜奶蛋糕</div> <p class="brand">元祖食品</p> <p class="price">￥158</p> <span class="pingjia">3768人评价</span> <span class="songda">最快5小时送达</span> </div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <div class="brands-border"> <img class="mui-media-object" src="../img/产品 3.png"> <div class="mui-media-body brands-text">花澜甜心</div> <p class="brand">好利来</p> <p class="price">￥199</p> <span class="pingjia">578人评价</span> <span class="songda">最快4小时送达</span> </div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <div class="brands-border"> <img class="mui-media-object" src="../img/产品 4.png"> <div class="mui-media-body brands-text">裸蛋糕</div> <p class="brand">焙尔蒂</p> <p class="price">￥148</p> <span class="pingjia">新品上架</span> <span class="songda">最快5小时送达</span> </div> </a> </li> </ul> </div> <script src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init({swipeBack:true});//启动右滑关闭功能 </script> </body> </html> ``` ``` /*搜索部分*/ .btn{ background-color: #f1f1f1; border-style:none ; margin-top: 10px; margin-left: 10px; border-radius:5px ; width: 100%; height: 34px; } .sousuo input{ background-color: #FFFFFF; border: solid 1px #7d7d7d; border-radius: 5px; width: 96%; margin-left: 10px; } .sousuo-size3{ width: 20%; } .sousuo-size9{ width: 80%; } /*九宫格导航部分*/ .img{ width: 100%; } /*品牌街部分*/ .text{ display: inline-block; width: 92%; text-align: center; padding-left: 24px; } .tu{ display: inline-block; width: 6%; } /*分隔行*/ .hang{ width: 100%; height: 10px; background-color: #f9f9f9; margin-bottom: 20px; } /*横向滚动*/ .img-size{ width: 25%; } /*商品*/ .brands-text{ text-align: left; font-family: "微软雅黑"; font-size: 26px; color: #333333; } .brands-border{ border: solid 1px #e5e5e5; } .brand{ font-size: 20px; font-family: "微软雅黑"; color: #666666; text-align: left; } .price{ font-family: "微软雅黑"; font-size: 24px; color: #ff3939; text-align: left; } .pingjia,.songda{ font-family: "微软雅黑"; font-size: 20px; color: #cccccc; text-align: left; } ![图片说明](https://img-ask.csdn.net/upload/201708/25/1503639179_671193.jpg) ```

请问为什么“会员中心”和“去购物车结算”没有跟“搜索”对齐呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>传智商城下拉菜单</title> <style type="text/css"> body,ul,input,p,dl,dt,dd,h1{ margin:0; padding:0;} body{ min-width:755px; color:#6c6c6c; font-size:12px;} ul{ list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .left{ float:left;} .right{ float:right;} #top{ height:30px; line-height:30px; background:#f7f7f7; border-bottom:1px solid #eee; } #top ul{ margin:0 20px; } #top li{ float:left; padding:0 5px 0 0;} #top .line{ color:#ccc;} #top .top_nav{ max-width:1220px; margin:0 auto;} .right li{ cursor:pointer;} .right li span{ padding:0 9px;} #header{ width:1220px; margin:0 auto; padding-top:20px; overflow:hidden; } #header a{ width:240px; display:block; } #header #search{ width:500px; margin-top:15px; } #header #search input{ width:416px; height:30px; border:3px solid #e4393c; } #header #search .search_btn{ width:78px; height:36px; background:#e4393c; font-size:14px; font-weight:700; color:#fff; cursor:pointer; } #header #search p{ color:#999; font-size:12px; margin-top:5px; } #hear #info{ margin-top:18px; margin-left:20px; } #header #info input{ height:32px; border:1px solid #e3e3e3; background-color:#f7f7f7; color:#666; padding:0 10px; margin-right:12px; } .right .u100{ position:relative;} .right #u101{ width:95px; display:none; position:absolute; left:0; top:30px; background-color:#fff; border:thin; border-color:#eee; } .right #u101 a{ display:block; padding:0 10px; line-height:28px; color:#6c6c6c; } .right #u101 a:hover{ background:#f5f5f5;} </style> <script type="text/javascript"> function change(myId,mode){ document.getElementById(myId).style.display=mode; if(mode=='block'){ //设置下拉菜单所在div的边框 document.getElementById(myId).style.border="1px solid #eee"; document.getElementById(myId).style.borderTop="none"; //设置鼠标划过的li的边框及背景颜色 document.getElementById(myId).parentNode.style.backgroundColor="fff"; document.getElementById(myId).parentNode.style.border="1px solid #eee"; document.getElementById(myId).parentNode.style.borderBottom="none"; } else{ //当不显示下拉列表时，鼠标划过的li的边框及背景颜色 document.getElementById(myId).parentNode.style.backgroundColor=""; document.getElementById(myId).parentNode.style.border=""; } } </script> </head> <body>  <div id="top"> <ul class="top_nav"> <li>亲，请登录</li> <li>免费注册</li> </ul> <ul class="right"> <li> <li class="u100" onmouseover="change('u101','block')" onmouseout="change('u101','none')"> <span>我的商城</span> <div id="u101"> <a>已买到的宝贝</a> <a>我的足迹</a> <a>我的上新</a> <a>啦啦啦</a> <a>噢噢噢噢</a> <a>哈哈</a> </div> </li> </li> <li class="line">|</li> <li><span>购物车</span></li> <li class="line">|</li> <li><span>收藏夹</span></li> <li class="line">|</li> <li><span>卖家中心</span></li> <li class="line">|</li> <li><span>联系客服</span></li> </ul> </div> ![图片说明](https://img-ask.csdn.net/upload/202002/13/1581607145_511523.png) <div id="header"> <a class="left"><img src="../images/5_ (1).gif" /></a> <div id="search" class="left"> <input type="text" class="left" /> <input class="search_btn" type="button" value="搜索" /> <p>热门搜索：网页培训大学教材智能手机平板电脑</p> </div> <div id="info" class="left"> <input type="button" value="会员中心" /> <input type="button" value="去购物车结算" /> </div> </div> </body> </html> ``` ```

form中div设置浮动，div元素会向左浮动到哪个元素为止？？

html： ``` <div class="bj_bai"> <h3 id="login_caption">登录</h3> <form action method="get"> <input type="text" class="kuang_txt" placeholder="登录名"> <input type="password" class="kuang_txt" placeholder="密码"> <div> <input class="" type="checkbox"/> <span>记住我   </span> <a href="">忘记密码？</a> </div> <input type="button" class="btn_zhuce" value="登录"> </form> </div> ``` ``` CSS: .bj_bai{ float: left; width: 314px; height: 408px; padding-left: 50px; background: #FFF; } .kuang_txt{ width: 230px; height: 60px; border: 1px solid #dddddd; background: #faffbd;/*背景色*/ color: #b1a9a9;/*应该是密码的颜色*/ margin-bottom: 30px; line-height: 60px;/*行内块状元素可设置行高*/ padding-left: 4px; } .zhuce_kuang .zc .bj_bai div { float: left; width: 100%; line-height: 43px; } .zhuce_kuang .zc .bj_bai .btn_zhuce { width: 227px; height: 33px; background: #37b5f9; font-size: 14px; line-height: 33px; text-align: center; border: 0px; color: #fff; border-radius: 3px; cursor: pointer; } ``` ![图片说明](https://img-ask.csdn.net/upload/201609/24/1474707761_927193.jpg) ![图片说明](https://img-ask.csdn.net/upload/201609/24/1474706565_910758.jpg) 两种假设： 1.如果包含框是form，那么div浮动应该盖住用户名输入框； 2.如果包含框成了外部的div块，应该盖住登录标题的；我的感觉： 1.如果”登录“按钮宽度设置小一点的情况下，似乎div块脱离标准文档流，并且脱离form块，后面的块直接跟上向前； 2.如果”登录“按钮宽度设置大一点的情况下，”登录“按钮可以显示在div下面，似乎div块未脱离文档流，还处在form块中。所以感觉自己糊涂了，现在搞不清楚到底form中div设置浮动，div元素会向左浮动到哪个元素为止，遵从哪些原则？不知哪位大神能帮我解答一下，感激不尽~

footer标签宽度修改不了。

就是图中下面那块有背景颜色的，两边还是白色的。后来看了下好像是.contanter css设置的问题，可以在不该.contanter的情况下让fooler的背景颜色填充满下面吗？ html代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <title>My First Website</title> </head> <body> <header> <nav class="clearfix">  <div class="logo c1"><a href="index.html">FIRST</a></div> <div class="items c2"> <ul> <li><a href="http://www.baidu.com">baidu</a></li> <li><a href="http://www.bilibili.com/">bilibili</a></li> <li><a href="https://www.zhihu.com/">zhihu</a></li> <li><a href="#">about</a></li> </ul> </div> </nav> <div class="inner"> <h1>My First Website</h1> <div class="h1-sub"> 16.11.09 </div> </div> </header> <div class="content"> <div class="contanter"> <div class="story-item"> <h2><a href="story.html">第一个只用了html和css的网站</a></h2> <div class="summary">用了只是学了两三天的技能来实现一个网页的布局，看似简单却一点都不容易，margin的问题真的很多，div也是一个大问题，主要是要理解选择器之间的关系。 </div> <div class="info">16-11-10|作者：Chan|阅读：1</div> </div> </div> <footer> <div class="foot-item"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul></div> </footer> </body> </html> ``` css代码如下 ``` *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a{ text-decoration:none; } h1{ margin: 20px; color: white; } ul{ margin: 0; padding: 0; } .c1,.c2{ position: relative; float: left; } .c1{ width: 16.666666%; } .c2{ width: 83.333333%; } .clearfix:before { content: " "; display:table; } .clearfix:after { content: " "; display:table; } .logo{ font-size: 20px; padding: 18px; font-weight: 900; color: #ddd; } header{ min-height: 350px; background-color: #aaa; background-image: url('img/IMG_3052_1.jpg'); background-size: cover; } nav{ background-color: #333; } nav .logo.c1 a{ color: #ddd; } nav .logo.c1 a:hover { color: #eee; } nav .items ul{ float: right; padding-right: 20px; } nav ul li{ list-style: none; display: inline-block; } nav ul li a{ display: inherit; text-decoration: none; padding: 20px 10px; color: #fff; } nav ul li a:hover{ color: #eee; } /*nav end*/ .inner { width: 400px; margin: 150px auto ; margin-bottom: 0; position: relative; text-align: center; } .h1-sub{ font-weight: 900; text-align:right; padding: 20px; color: white; } .contanter{ width: 800px; margin: 0 auto; ; } .story-item h2{ font-size: 30px; margin: 10px 0; font-family: Microsoft Yahei; color: #444; } h2 a{ color:#444; } .story-item .summary{ font-size: 18px; font-family: Microsoft Yahei; width: 500px; font-weight: 100; color: #777; margin: 20px 0; } .info{ width: 700px; font-size: 15px; color: #aaa; margin: 20px 0; padding-bottom: 10px; border-bottom: 1px solid #aaa; } footer{ margin: 0 auto; background-color: #777; } footer .foot-item ul{ list-style: none; text-align: center; padding-top: 100px; } .foot-item ul li{ display:inline-block; padding: 20px; } ```

hexo博客无法显示背景图片

hexo框架写的博客，主题是next，本地预览可以看到背景，但是真实网站看不到，已经试过先hexo c之后再上传，还是没有用 hexo的配置文件 ``` # Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: subtitle: description: 这是一个搞着玩的博客，功能暂未完全完善，将就着看吧您内~！ keywords: author: 肖肖 language: zh-Hans timezone: # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: true relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 10 order_by: -date # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: branch: master ``` 然后是next的配置文件 ``` # =============================================================== # ========================= ATTENTION! ========================== # =============================================================== # NexT repository is moving here: https://github.com/theme-next # =============================================================== # It's rebase to v6.0.0 and future maintenance will resume there # =============================================================== # --------------------------------------------------------------- # Theme Core Configuration Settings # --------------------------------------------------------------- # Set to true, if you want to fully override the default configuration. # Useful if you don't want to inherit the theme _config.yml configurations. override: false # --------------------------------------------------------------- # Site Information Settings # --------------------------------------------------------------- # To get or check favicons visit: https://realfavicongenerator.net # Put your favicons into `hexo-site/source/` (recommend) or `hexo-site/themes/next/source/images/` directory. # Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory. # And if you want to place your icons in `hexo-site/source/` root directory, you must remove `/images` prefix from pathes. # For example, you put your favicons into `hexo-site/source/images` directory. # Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo. favicon: small: /images/favicon-16x16-next.png medium: /images/favicon.ico apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml # Set default keywords (Use a comma to separate) keywords: "Hexo, NexT" # Set rss to false to disable feed link. # Leave rss as empty to use site's feed link. # Set rss to specific value if you have burned your feed already. rss: footer: # Specify the date when the site was setup. # If not defined, current year will be used. since: 2019 # Icon between year and copyright info. icon: user # If not defined, will be used `author` from Hexo main config. copyright: # ------------------------------------------------------------- # Hexo link (Powered by Hexo). powered: true theme: # Theme & scheme info link (Theme - NexT.scheme). enable: true # Version info of NexT after scheme info (vX.X.X). version: true # ------------------------------------------------------------- # Any custom text can be defined here. #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a> # --------------------------------------------------------------- # SEO Settings # --------------------------------------------------------------- # Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog. # See: https://support.google.com/webmasters/answer/139066 # Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com ) canonical: true # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization. seo: false # If true, will add site-subtitle to index page, added in main hexo config. # subtitle: Subtitle index_with_subtitle: false # --------------------------------------------------------------- # Menu Settings # --------------------------------------------------------------- # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives). # Usage: `Key: /link/ || icon` # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive. # Value before `||` delimeter is the target link. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded. menu: home: / || home #about: /about/ || user #tags: /tags/ || tags #categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat # Enable/Disable menu icons. menu_icons: enable: true # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini # --------------------------------------------------------------- # Sidebar Settings # --------------------------------------------------------------- # Social Links. # Usage: `Key: permalink || icon` # Key is the link label showing to end users. # Value before `||` delimeter is the target permalink. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded. #social: #GitHub: https://github.com/yourname || github #E-Mail: mailto:yourname@gmail.com || envelope #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype social_icons: enable: true icons_only: false transition: false # Blog rolls links_icon: link links_title: Links links_layout: block #links_layout: inline #links: #Title: http://example.com/ # Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: /images/avatar.png # Table Of Contents in the Sidebar toc: enable: true # Automatically add list number to toc. number: true # If true, all words will placed on next lines if header width longer then sidebar width. wrap: false # Creative Commons 4.0 International License. # http://creativecommons.org/ # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero #creative_commons: by-nc-sa #creative_commons: sidebar: # Sidebar Position, available value: left | right (only for Pisces | Gemini). position: left #position: right # Sidebar Display, available value (only for Muse | Mist): # - post expand on posts automatically. Default. # - always expand for all pages automatically # - hide expand only when click on the sidebar toggle icon. # - remove Totally remove sidebar including sidebar toggle. display: post #display: always #display: hide #display: remove # Sidebar offset from top menubar in pixels (only for Pisces | Gemini). offset: 12 # Back to top in sidebar (only for Pisces | Gemini). b2t: false # Scroll percent label in b2t button. scrollpercent: true # Enable sidebar on narrow view (only for Muse | Mist). onmobile: true # --------------------------------------------------------------- # Post Settings # --------------------------------------------------------------- # Automatically scroll page to section which is under  mark. scroll_to_more: true # Automatically saving scroll position on each post/page in cookies. save_scroll: false # Automatically excerpt description in homepage as preamble text. excerpt_description: true # Automatically Excerpt. Not recommend. # Please use  in the post to control excerpt accurately. auto_excerpt: enable: true length: 0 # Post meta display settings post_meta: item_text: true created_at: true updated_at: false categories: true # Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: true min2read: true totalcount: false separated_meta: true # Wechat Subscriber #wechat_subscriber: #enabled: true #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg #description: ex. subscribe to my blog by scanning my public wechat account # Reward #reward_comment: Donate comment here #wechatpay: /images/wechatpay.jpg #alipay: /images/alipay.jpg #bitcoin: /images/bitcoin.png # Declare license on posts post_copyright: enable: false license: CC BY-NC-SA 3.0 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/ # --------------------------------------------------------------- # Misc Theme Settings # --------------------------------------------------------------- # Reduce padding / margin indents on devices with narrow width. mobile_layout_economy: false # Android Chrome header panel color ($black-deep). android_chrome_color: "#222" # Custom Logo. # !!Only available for Default Scheme currently. # Options: # enabled: [true/false] - Replace with specific image # image: url-of-image - Images's url custom_logo: enabled: true image: # Code Highlight theme # Available value: # normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: normal # --------------------------------------------------------------- # Font Settings # - Find fonts on Google Fonts (https://www.google.com/fonts) # - All fonts set here will have the following styles: # light, light italic, normal, normal italic, bold, bold italic # - Be aware that setting too much fonts will cause site running slowly # - Introduce in 5.0.1 # --------------------------------------------------------------- # CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844 # To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`): # Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS # --------------------------------------------------------------- font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default). host: # Font options: # `external: true` will load this font family from `host` above. # `family: Times New Roman`. Without any quotes. # `size: xx`. Use `px` as unit. # Global font settings used on <body> element. global: external: true family: Lato size: # Font settings for Headlines (h1, h2, h3, h4, h5, h6). # Fallback to `global` font settings. headings: external: true family: size: # Font settings for posts. # Fallback to `global` font settings. posts: external: true family: # Font settings for Logo. # Fallback to `global` font settings. logo: external: true family: size: # Font settings for <code> and code blocks. codes: external: true family: size: # --------------------------------------------------------------- # Third Party Services Settings # --------------------------------------------------------------- # MathJax Support mathjax: enable: false per_page: false cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML # Han Support docs: https://hanzi.pro/ han: false # Swiftype Search API Key #swiftype_key: # Baidu Analytics ID #baidu_analytics: # Duoshuo ShortName #duoshuo_shortname: # Disqus disqus: enable: false shortname: count: true # Hypercomments #hypercomments_id: # changyan changyan: enable: false appid: appkey: # Valine. # You can get your appid and appkey from https://leancloud.cn # more info please open https://valine.js.org valine: enable: true appid: appkey: notify: false # mail notifier , https://github.com/xCss/Valine/wiki verify: false # Verification code placeholder: 高冷的你说点什么吧( ´･･)ﾉ(._.`) avatar: mm # gravatar style guest_info: nick,mail,link # custom comment header pageSize: 10 # pagination size # Support for youyan comments system. # You can get your uid from http://www.uyan.cc #youyan_uid: your uid # Support for LiveRe comments system. # You can get your uid from https://livere.com/insight/myCode (General web site) #livere_uid: your uid # Gitment # Introduction: https://imsun.net/posts/gitment-introduction/ # You can get your Github ID from https://api.github.com/users/<Github username> gitment: enable: false mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway count: true # Show comments count in post meta area lazy: false # Comments lazy loading with a button cleanly: false # Hide 'Powered by ...' on footer, and more language: # Force language, or auto switch by theme github_user: # MUST HAVE, Your Github ID github_repo: # MUST HAVE, The repo you use to store Gitment comments client_id: # MUST HAVE, Github client id for the Gitment client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled # Baidu Share # Available value: # button | slide # Warning: Baidu Share does not support https. #baidushare: ## type: button # Share # This plugin is more useful in China, make sure you known how to use it. # And you can find the use guide at official webiste: http://www.jiathis.com/. # Warning: JiaThis does not support https. #jiathis: ##uid: Get this uid from http://www.jiathis.com/ #add_this_id: # Share duoshuo_share: true # NeedMoreShare2 # This plugin is a pure javascript sharing lib which is useful in China. # See: https://github.com/revir/need-more-share2 # Also see: https://github.com/DzmVasileusky/needShareButton # iconStyle: default | box # boxForm: horizontal | vertical # position: top / middle / bottom + Left / Center / Right networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit, # Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot, # Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine, # Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru needmoreshare2: enable: false postbottom: enable: false options: iconStyle: box boxForm: horizontal position: bottomCenter networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook float: enable: false options: iconStyle: box boxForm: horizontal position: middleRight networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ #google_site_verification: # Google Analytics #google_analytics: # Bing Webmaster tools verification setting # See: https://www.bing.com/webmaster/ #bing_site_verification: # Yandex Webmaster tools verification setting # See: https://webmaster.yandex.ru/ #yandex_site_verification: # CNZZ count #cnzz_siteid: # Application Insights # See https://azure.microsoft.com/en-us/services/application-insights/ # application_insights: # Make duoshuo show UA # user_id must NOT be null when admin_enable is true! # you can visit http://dev.duoshuo.com get duoshuo user id. duoshuo_info: ua_enable: true admin_enable: false user_id: 0 #admin_nickname: Author # Post widgets & FB/VK comments settings. # --------------------------------------------------------------- # Facebook SDK Support. # https://github.com/iissnan/hexo-theme-next/pull/410 facebook_sdk: enable: false app_id: #<app_id> fb_admin: #<user_id> like_button: #true webmaster: #true # Facebook comments plugin # This plugin depends on Facebook SDK. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable. facebook_comments_plugin: enable: false num_of_posts: 10 # min posts num is 1 width: 100% # default width is 550px scheme: light # default scheme is light (light or dark) # VKontakte API Support. # To get your AppID visit https://vk.com/editapp?act=create vkontakte_api: enable: false app_id: #<app_id> like: true comments: true num_of_posts: 10 # Star rating support to each article. # To get your ID visit https://widgetpack.com rating: enable: false id: #<app_id> color: fc6423 # --------------------------------------------------------------- # Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: false app_id: #<app_id> app_key: #<app_key> # Another tool to show number of visitors to each article. # visit https://console.firebase.google.com/u/0/ to get apiKey and projectId # visit https://firebase.google.com/docs/firestore/ to get more information about firestore firestore: enable: false collection: articles #required, a string collection name to access firestore database apiKey: #required projectId: #required bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill # Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ busuanzi_count: # count values only if the other configs are false enable: true # custom uv span for the whole site site_uv: true site_uv_header: 本站访问人数 site_uv_footer: 人次 # custom pv span for the whole site site_pv: true site_pv_header: 本站访问量 site_pv_footer: 次 # custom pv span for one page only page_pv: true page_pv_header: 本文阅读量 page_pv_footer: 次 # Tencent analytics ID # tencent_analytics: # Tencent MTA ID # tencent_mta: # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: false # Google Calendar # Share your recent schedule to others via calendar page # # API Documentation: # https://developers.google.com/google-apps/calendar/v3/reference/events/list calendar: enable: false calendar_id: <required> api_key: <required> orderBy: startTime offsetMax: 24 offsetMin: 4 timeZone: showDeleted: false singleEvents: true maxResults: 250 # Algolia Search algolia_search: enable: false hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" # Local search # Dependencies: https://github.com/flashlab/hexo-generator-search local_search: enable: true # if auto, trigger search by changing input # if manual, trigger search by pressing enter key or search button trigger: auto # show top n results per article, show all results by setting to -1 top_n_per_article: 1 # --------------------------------------------------------------- # Tags Settings # --------------------------------------------------------------- # External URL with BASE64 encrypt & decrypt. # Usage: {% exturl text url "title" %} # Alias: {% extlink text url "title" %} exturl: false # Note tag (bs-callout). note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style: simple icons: false border_radius: 3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 # Label tag. label: true # Tabs tag. tabs: enable: true transition: tabs: false labels: true border_radius: 0 #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! --------------------------------------------------------------- # Use velocity to animate everything. motion: enable: true async: false transition: # Transition variants: # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut post_block: fadeIn post_header: slideDownIn post_body: slideDownIn coll_header: slideLeftIn # Only for Pisces | Gemini. sidebar: slideUpIn # Fancybox fancybox: true # Progress bar in the top during page loading. pace: true # Themes list: #pace-theme-big-counter #pace-theme-bounce #pace-theme-barber-shop #pace-theme-center-atom #pace-theme-center-circle #pace-theme-center-radar #pace-theme-center-simple #pace-theme-corner-indicator #pace-theme-fill-left #pace-theme-flash #pace-theme-loading-bar #pace-theme-mac-osx #pace-theme-minimal # For example # pace_theme: pace-theme-center-simple pace_theme: pace-theme-minimal # Canvas-nest canvas_nest: true # three_waves three_waves: false # canvas_lines canvas_lines: false # canvas_sphere canvas_sphere: false # Only fit scheme Pisces # Canvas-ribbon # size: The width of the ribbon. # alpha: The transparency of the ribbon. # zIndex: The display level of the ribbon. canvas_ribbon: enable: false size: 300 alpha: 0.6 zIndex: -1 # Script Vendors. # Set a CDN address for the vendor you want to customize. # For example # jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js # Be aware that you should use the same version as internal ones to avoid potential problems. # Please use the https protocol of CDN files when you enable https on your site. vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: # Internal version: 2.1.5 # See: http://fancyapps.com/fancybox/ fancybox: fancybox_css: # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick fastclick: # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: # Internal version: 1.2.1 # See: http://VelocityJS.org velocity: # Internal version: 1.2.1 # See: http://VelocityJS.org velocity_ui: # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.2 # See: https://github.com/HubSpot/pace # Or use direct links below: # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css pace: pace_css: # Internal version: 1.0.0 # https://github.com/hustcc/canvas-nest.js canvas_nest: # three three: # three_waves # https://github.com/jjandxa/three_waves three_waves: # three_waves # https://github.com/jjandxa/canvas_lines canvas_lines: # three_waves # https://github.com/jjandxa/canvas_sphere canvas_sphere: # Internal version: 1.0.0 # https://github.com/zproo/canvas-ribbon canvas_ribbon: # Internal version: 3.3.0 # https://github.com/ethantw/Han han: # needMoreShare2 # https://github.com/revir/need-more-share2 needMoreShare2: # Assets css: css js: js images: images # Online contact daovoice: true daovoice_app_id: # 这里填你刚才获得的 app_id # Theme version live2d: enable: false model: z16 bottom: -30 version: 5.1.4 ``` 已经折腾了两天了，就差回档了，感觉回档也没有用，小白在此感谢各位大佬了然后我修改背景图片修改的是Blog\themes\next\source\css\_custom\custom.styl文件 ``` // Custom styles. // 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); } .site-meta { background: $orange; //天空的颜色，和我的眼镜是绝配 } // 鼠标样式 * { cursor: url(""),auto!important } :active { cursor: url(""),auto!important } // Custom styles. body { background-image: url(/images/background.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover； //改变背景色和透明度 .main-inner { padding: 25px; opacity: 0.85; border-radius: 10px; right: 0 !important; top: 0 !important; bottom: 0 !important; } } body .main { margin-bottom: 0px; } ```

FabricJS 在mac机器上对Canvas调整大小屏幕会闪烁

``` 我的HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Ionic App</title>  <script type="text/javascript" language='javascript' src="index.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #left { float: left; width: 20%; height: 100%; border: 0px solid red; padding: 0px; margin: 0px; } #center { float: left; width: 80%; height: 100%; border: 0px solid green; } #canvasWrapper { overflow: scroll; background: #FFFFFF; } #canvas{ border: 0px solid black; } </style> </head> <body id='body'> <div id='left'> <button onclick="init()">Init Canvas</button> <input type="file" onchange="chooseImage(event)"/><br/> <button onclick="zoomIn()">Zoom In</button> <button onclick="zoomOut()">Zoom Out</button><br/> </div> <div id='center'> <div id='canvasWrapper' tabIndex='0'> <canvas id="canvas" ></canvas> </div> </div> </body> </html> index.js代码: /*! index.js 使用FabricJS对钡条逻辑封装的*/ // 0 1 2 3 4 5 6 7 8 9 10 var zoomArray = [0.33, 0.4, 0.5, 0.66, 0.8, 1, 1.25, 1.5, 2, 2.5, 3]; //缩放的比例,都是对称的 var zoomIndex = 5; //当前的zoomIndex var canvasWrapper = null; //Canvas的包裹物,当外部的window大小变化时候需要对它的宽度和高度设置 var canvas = null; //Canvas var fCanvas = null; //中间的Fabric.Canvas var backgroundBase64 = null; var backgroundImage = null; //背景fabric.Image var backgroundImageWidth = 0 //Canvas的宽度,由图片的宽度决定 var backgroundImageHeight = 0; //Canvas的高度,由图片的高度决定 //Canvas的属性 var canvasAttrs = { imageSmoothingEnabled: false, enableRetinaScaling: false, stopContextMenu: true, //Menu禁用 fireLeftClick: true, //左按键启用 fireMiddleClick: true, //滚动键启用 fireRightClick: false, //右按键禁用 //selectionColor: '#CC00FF', //selection的颜色 selectionLineWidth: 2, //selection的线宽 selection: true, //selection启动 selectionBorderColor: '#FFFF00',//selection边框颜色 selectionFullyContained: true, //只有当selection全部包含Canvas.Object的时候才会被选中 selectionKey: 'ctrlKey' //使用ctrlKey进行多选 }; //图片属性,中间Canvas的背景图和坐下那个图 var imageAttrs = { left: 0, top: 0, selectable: false, //设置不能被选中,这样就可以作为背景图了 hoverCursor: "default", //设置它的鼠标形状 crossOrigin: 'Anonymous' }; /*! * OK选择文件 */ function chooseImage(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var imgBase64 = event.target.result; backgroundBase64 = imgBase64; //构造数据 var data = {}; var dataMap = {}; data['partitions'] = []; data['items'] = []; data['filters'] = {}; dataMap['data'] = data; dataMap["base64"] = backgroundBase64; loadData(dataMap); } reader.readAsDataURL(file) } /*! * OK这是上来执行的函数 */ function init() { __initFilterBackend(); __initCanvasWrapper(); __initCanvas(); } function loadData(dataMap) { if (dataMap == null) return; //图片的Base64编码。这个值肯定是有的 backgroundBase64 = dataMap['base64']; //加载背景图 fabric.util.loadImage(backgroundBase64, function(img) { //背景图 backgroundImage = new fabric.Image(img, imageAttrs); backgroundImageWidth = backgroundImage.width; backgroundImageHeight = backgroundImage.height; fCanvas.setWidth(backgroundImageWidth); fCanvas.setHeight(backgroundImageHeight); fCanvas.add(backgroundImage); }); } /*! * OK放大按钮触发 */ function zoomIn() { var oldZoom = zoomArray[zoomIndex]; ++zoomIndex; if (zoomIndex > (zoomArray.length - 1)) { zoomIndex = (zoomArray.length - 1); //直接return掉,因为zoomIndex > (zoomArray.length - 1)说明之前的zoomIndex已经是数组最后一个了 return; } __zoom(oldZoom); } /*! * OK缩小按钮触发 */ function zoomOut() { var oldZoom = zoomArray[zoomIndex]; --zoomIndex; if (zoomIndex < 0) { zoomIndex = 0; //直接return掉,因为zoomIndex < 0说明之前的zoomIndex已经是0了 return; } __zoom(oldZoom); } /*! * OK初始化Filter后端。使用Canvas2dFilterBackend,因为如果用new fabric.WebglFilterBackend()会报错 */ function __initFilterBackend() { fabric.filterBackend = new fabric.Canvas2dFilterBackend(); } /*! * OK初始化CanvasWrapper */ function __initCanvasWrapper() { //如果已经初始话好了就直接return if (canvasWrapper != null) return; var centerDiv = window.document.getElementById('center'); var width = centerDiv.offsetWidth; var height = centerDiv.offsetHeight; canvasWrapper = window.document.getElementById('canvasWrapper'); //这里通过style的width和height里设置加上px,并且这里我不设置style的maxWidth和maxHeight //因为如果设置了maxWidth和maxHeight后当我们对里面的Canvas进行缩小的时候,如果里面的Canvas变的太小,这样 canvasWrapper.style.width = width + 'px'; canvasWrapper.style.height = height + 'px'; } /*! * OK初始化Canvas */ function __initCanvas() { //如果已经初始化好了就直接return if (fCanvas != null) return; canvas = window.document.getElementById('canvas'); //这里不设置宽度和高度,通过导入图片的宽高来设置 fCanvas = new fabric.Canvas(canvas, canvasAttrs); //单纯设置canvas.backgroundColor内容无效,必须和下面的canvas.add一起才会起效果 fCanvas.backgroundColor = 'black'; } /*! * OK缩放的核心函数 */ function __zoom(oldZoom) { //记录一开始的left和top值 //var scrollLeft = canvasWrapper.scrollLeft; //var scrollTop = canvasWrapper.scrollTop; //以下是放大缩小操作,重新设置放大缩小的比例 var zoom = zoomArray[zoomIndex]; //在指定的点进行缩放 fCanvas.setZoom(zoom); //!Important,加入对Canvas大小的设置,这样可以让CanvasWrapper也能进行调整 fCanvas.setWidth(backgroundImageWidth*zoom); fCanvas.setHeight(backgroundImageHeight*zoom); //放大完后要重新设置transform //var vpt = fCanvas.viewportTransform; //console.log('-----' + vpt[4] + ' and ' + vpt[5]); //vpt[4] = 0; //vpt[5] = 0; //fCanvas.requestRenderAll(); /* oldleft newLeft * --------- = --------- * oldZoom newZoom */ //canvasWrapper.scrollLeft = (scrollLeft*zoom)/oldZoom; //canvasWrapper.scrollTop = (scrollTop*zoom)/oldZoom; } ```

HTML关于导航栏布局问题

``` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>碧桂园官网</title> <style type="text/css"> *{margin:0 auto;} header{ /*整个导航栏的高度设定*/ width:100%; height:90px; background: red; } header>img{ /*logo的位置*/ width:200px; height:90px; margin-left:100px; } header>div>ul>li>a{ /*导航栏超链接中字体去下划线、加粗、颜色、间隔*/ text-decoration:none; color:#999; font-weight:bold; border-right:dotted thin; padding-right:10px; padding-left:10px; font-size:15px; } .header_nav{ /*整个导航栏的位置*/ width: 100%; display:inline; position:absolute; padding-top:40px; padding-left:300px; } .header_nav ul li{ /*ul去点和横向排列*/ list-style:none; display:inline; } .header_nav>ul>li>ul{ /*二级菜单位置、隐藏*/ position:absolute; padding-top: 40px; display: none; } .header_nav>ul>li>ul>li>a{ /*二级菜单样式*/ font-weight: bold; color: black; text-decoration: none; } .header_nav>ul>li:hover>ul{ /*鼠标经过时显示二级菜单*/ display: block; } </style> <header> <img src="logo.PNG" alt="logo"/> <div class="header_nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于碧桂园</a> <ul> <li><a href="#">公司介绍</a></li> <li><a href="#">企业文化</a></li> </ul> </li> <li><a href="#">产品与服务</a></li> <li><a href="#">新闻中心</a></li> <li><a href="#">投资者关系</a></li> <li><a href="#">人力资源</a></li> <li><a href="#">社会责任</a></li> </ul> </div> </header> </head> <body> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201906/04/1559625035_544891.jpg) 我模仿碧桂园官网的导航栏自己做了一个但是在布局那里出现了一个问题，CSS样式中header nav这个样式（我注释是整个导航栏的位置）我用了width：100%的话，浏览器窗口缩小时导航栏时不会变的，但是在全屏时他右边会有一段空白，像图①那样但是我如果不用width：100%的话，浏览器窗口缩小后导航栏就会被挤在浏览器边缘右边那里了，像图②那样。请问应该要怎么设置才能让浏览器全屏的时候右边不会有空白，缩小后导航栏不会被挤在一堆。还有我想做一个鼠标经过一级导航栏时会显示二级导航栏的功能，大佬们可以上百度搜以下碧桂园的官网看那个效果，我做了出来了，但是那个黑色透明背景我不会做，能指点以下吗？

菜鸟请高手帮忙看看两个JS文件为什么会冲突

文件一： var ddsmoothmenu={ //Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs): arrowimages: {down:['downarrowclass', 'images/down.gif', 10], right:['rightarrowclass', 'images/right.gif']}, transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds shadow: {enable:true, offsetx:4, offsety:5}, //enable shadow? showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively ///////Stop configuring beyond here/////////////////////////// detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc) detectie6: document.all && !window.XMLHttpRequest, getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu $menucontainer.html("Loading Menu...") $.ajax({ url: setting.contentsource[1], //path to external menu file async: true, error:function(ajaxrequest){ $menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText) }, success:function(content){ $menucontainer.html(content) ddsmoothmenu.buildmenu($, setting) } }) }, buildmenu:function($, setting){ var smoothmenu=ddsmoothmenu var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL $mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu" var $headers=$mainmenu.find("ul").parent() $headers.hover( function(e){ $(this).children('a:eq(0)').addClass('selected') }, function(e){ $(this).children('a:eq(0)').removeClass('selected') } ) $headers.each(function(i){ //loop through each LI header var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header var $subul=$(this).find('ul:eq(0)').css({display:'block'}) $subul.data('timers', {}) this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header? $subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0}) $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images '<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1]) +'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0]) + '" style="border:0;" />' ) if (smoothmenu.shadow.enable){ this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets if (this.istopheader) $parentshadow=$(document.body) else{ var $parentLi=$curobj.parents("li:eq(0)") $parentshadow=$parentLi.get(0).$shadow } this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next shadow div } $curobj.hover( function(e){ var $targetul=$subul //reference UL to reveal var header=$curobj.get(0) //reference header LI as DOM object clearTimeout($targetul.data('timers').hidetimer) $targetul.data('timers').showtimer=setTimeout(function(){ header._offsets={left:$curobj.offset().left, top:$curobj.offset().top} var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent if ($targetul.queue().length<=1){ //if 1 or less queued animations $targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime) if (smoothmenu.shadow.enable){ var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full header.$shadow.css({opacity:1}) } header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime) } } }, ddsmoothmenu.showhidedelay.showdelay) }, function(e){ var $targetul=$subul var header=$curobj.get(0) clearTimeout($targetul.data('timers').showtimer) $targetul.data('timers').hidetimer=setTimeout(function(){ $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime) if (smoothmenu.shadow.enable){ if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them header.$shadow.children('div:eq(0)').css({opacity:0}) } header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime) } }, ddsmoothmenu.showhidedelay.hidedelay) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible'}) }, init:function(setting){ if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set? var mainmenuid='#'+setting.mainmenuid var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid document.write('<style type="text/css">\n' +mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n' +mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n' +'</style>') } this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable //in IE6, always disable shadow jQuery(document).ready(function($){ //ajax menu? if (typeof setting.contentsource=="object"){ //if external ajax menu ddsmoothmenu.getajaxmenu($, setting) } else{ //else if markup menu ddsmoothmenu.buildmenu($, setting) } }) } } //end ddsmoothmenu variable 文件二： try { document.execCommand('BackgroundImageCache', false, true); }catch(e){ } (function($){ jQuery.fn.extend({ d_imagechange:function(setting){ var config = $.extend({ bg:true, // 是否背景色 title:true, // 是否有标题 desc:true, // 是否有描述 btn:true, // 是否显示按钮 repeat:'no-repeat', // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat' bgColor:'#000', // 背景色 bgOpacity:.5, // 背景透明度 bgHeight:40, // 背景高 titleSize:14, // 标题文字大小 titleFont:'Verdana,宋体', // 标题文本字体 titleColor:'#FFF', // 标题文本颜色 titleTop:4, // 标题上边距 titleLeft:4, // 标题左边距 descSize:12, // 描述文字大小 descFont:'Verdana,宋体', // 描述文本字体 descColor:'#FFF', // 描述文本颜色 descTop:2, // 描述上边距 descLeft:4, // 描述左边距 btnColor:'#FFF', // 按钮颜色1 btnOpacity:.5, // 未选中按钮透明度 btnFont:'Verdana', // 按钮文本字体 btnFontSize:12, // 按钮文字大小(注意:Chrome有默认最小字号的限制) btnFontColor:'#000', // 按钮文本颜色 btnText:true, // 是否显示文本 btnWidth:15, // 按钮宽 btnHeight:15, // 按钮高 btnMargin:4, // 按钮间距 btnTop:4, // 按钮上边距 playTime:2000, // 轮换间隔时间,单位(毫秒) animateTime:500, // 动画执行时间,单位(毫秒) animateStyle:'o', // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画 width:300, // 宽, 不设定则从DOM读取 height:200 // 高, 不设定则从DOM读取 },setting); return $(this).each(function(){ var _this = $(this); var _w = config.width || _this.width(); // 宽 var _h = config.height || _this.height(); // 高 var _n = config.data.length; // 数目 var _i = 0; // 当前显示的item序号 _this.empty() .css('overflow','hidden') .width(_w) .height(_h); // 半透明背景 if(config.bg){ $('<div />').appendTo(_this) .width(_w) .height(config.bgHeight) .css('background-color',config.bgColor) .css('opacity',config.bgOpacity) .css('position','absolute') .css('marginTop',_h-config.bgHeight) .css('zIndex',3); } // 文字区 var _textArea = $('<div />').appendTo(_this) .width(_w) .height(config.bgHeight) .css('position','absolute') .css('marginTop',_h-config.bgHeight) .css('zIndex',6); // 按钮区 var _btnArea = $('<div />').appendTo(_this) .width(config.data.length * (config.btnWidth + config.btnMargin)) .height(config.bgHeight) .css('position','absolute') .css('marginTop',_h-config.bgHeight) .css('marginLeft',_w-(config.btnWidth+config.btnMargin)*_n) .css('zIndex',9) .css('display',config.btn?'block':'none'); // 插入空div修正IE的绝对定位BUG $('<div />').appendTo(_this); // 图片区 var _imgArea = $('<div />').appendTo(_this) .width('x,show-x'.indexOf(config.animateStyle)!=-1?_w*_n:_w) .height('y,show-y'.indexOf(config.animateStyle)!=-1?_h*_n:_h); // 初始化图片文字按钮 $.each(config.data,function(i,n){ $('<a />').append($("<img />") .width(_w) .height(_h) .attr("src", n.src) ).appendTo(_imgArea) .width(_w) .height(_h) .attr('href',n.href?n.href:'') .attr('target',n.target?n.target:'') .css('display','block') .css('background-image','url('+n.src+')') .css('background-repeat',config.repeat) .css('display','block') .css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':''); if(config.title){ $('<b />').appendTo(_textArea) .html(n.title?n.title:'') .css('display',i==0?'block':'none') .css('fontSize',config.titleSize) .css('fontFamily',config.titleFont) .css('color',config.titleColor) .css('marginTop',config.titleTop) .css('marginLeft',config.titleLeft); } if(config.desc){ $('<p />').appendTo(_textArea) .html(n.desc?n.desc:'') .css('display',i==0?'block':'none') .css('fontSize',config.descSize) .css('fontFamily',config.descFont) .css('color',config.descColor) .css('marginTop',config.descTop) .css('marginLeft',config.descLeft); } $('<a />').appendTo(_btnArea) .width(config.btnWidth) .height(config.btnHeight) .html(config.btnText?i+1:'') .css('fontSize',config.btnFontSize) .css('fontFamily',config.btnFont) .css('textAlign','center') .css('display','block') .css('float','left') .css('overflow','hidden') .css('marginTop',config.btnTop) .css('marginRight',config.btnMargin) .css('background-color',config.btnColor) .css('opacity',i==0?1:config.btnOpacity) .css('color',config.btnFontColor) .css('cursor','pointer') }); // 保存所有元素集合的引用,方便在事件中使用 var _bs = _btnArea.children('a'); var _ts = _textArea.children('b'); var _ds = _textArea.children('p'); var _is = _imgArea.children('a'); // 针对不同的动画效果的附加设置, 主要是block的问题, 若在初始化时设置block:none会造成之后无block效果 if('o,show,none'.indexOf(config.animateStyle)!=-1){ _is.not(':first').hide(); _is.css('position','absolute'); } // 添加按钮事件 _bs.click(function(){ var ii = _bs.index(this); if(ii==_i){return;} _ts.eq(_i).css('display','none'); _ts.eq(ii).css('display','block'); _ds.eq(_i).css('display','none'); _ds.eq(ii).css('display','block'); _bs.eq(_i).css('opacity',config.bgOpacity); _bs.eq(ii).css('opacity',1) switch(config.animateStyle){ case 'o' : _is.eq(_i).fadeOut(config.animateTime); _is.eq(ii).fadeIn(config.animateTime); break; case 'x' : _imgArea.animate({marginLeft:-ii*_w},config.animateTime); break; case 'y' : _imgArea.animate({marginTop:-ii*_h},config.animateTime); break; case 'show' : case 'show-x' : case 'show-y' : _is.eq(_i).hide(config.animateTime); _is.eq(ii).show(config.animateTime); break; case 'none' : _is.eq(_i).hide(); _is.eq(ii).show(); break; } _i = ii; }); // 添加轮换任务 var _play = setInterval(play,config.playTime); function play(){ _bs.eq((_i+1)%_n).click() } // 鼠标进入事件 _this.mouseover(function(){ clearInterval(_play); }); // 鼠标离开事件 _this.mouseout(function(){ _play = setInterval(play,config.playTime); }); }); } });

jsp中两个javascript，但是只能成功运行一个，单独都能正常运行。

一些css代码就省略了。两个js，单独都能正常使用，但是放在一起只有第二个js有反应，第一个没反映。 ``` <%@ page language="java" import="java.util.*,pojo.Consume,Dao.ConsumeDao" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>分类汇总</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="./css/doubleDate.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="./js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" language="javascript" src="./js/doubleDate2.0.js" ></script> <script> $(function(){ $('.doubledate').kuiDate({ className:'doubledate', isDisabled: "0" // isDisabled为可选参数，“0”表示今日之前不可选，“1”标志今日之前可选 }); }); </script> <script type="text/javascript" language="javascript" src="./js/jquery-1.10.2.js"></script> <script> function alertWin(Cno) { /* $.ajax({ type:"post", url:"./ShowDetail", data:{Cno:Cno}, success:function(data){ alert("success"); } }); */ var msgw,msgh,titleheight,bordercolor,titlecolor; msgw = 300;//提示窗口的宽度 msgh = 300;//提示窗口的高度 titleheight = 25 //提示窗口标题高度 bordercolor = "#A480B2";//提示窗口的边框颜色 titlecolor = "#A480B2";//提示窗口的标题颜色 //根据自己需求注意宽度和高度的调整 var iWidth = document.documentElement. clientWidth; var iHeight = document.documentElement.clientHeight; //遮罩层 var bgObj = document.createElement("div"); bgObj.setAttribute("id", "bgObj");//设置ID bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); //弹出窗口 var msgObj=document.createElement("div"); msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值 msgObj.setAttribute("align", "center");//为div的align赋值 msgObj.style.background = "white";//背景颜色为白色 msgObj.style.border = "1px solid " + bordercolor;//边框属性，颜色在上面已经赋值 msgObj.style.position = "absolute";//绝对定位 msgObj.style.left = (iWidth-msgw)/2 ;//从左侧开始位置 msgObj.style.top = (iHeight-msgh)/2;//从上部开始位置 msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 msgObj.style.width = msgw + "px";//提示框的宽(上面定义过) msgObj.style.height = msgh + "px";//提示框的高(上面定义过) msgObj.style.textAlign = "center";//文本位置属性，居中。 msgObj.style.lineHeight = "25px";//行间距 msgObj.style.zIndex = "102";//层的z轴位置 document.body.appendChild(msgObj); //弹出窗口标题 var title = document.createElement("div");//创建一个标题对象 title.setAttribute("id", "msgTitle");//为标题对象填加id title.style.margin = "0";//浮动 title.style.padding = "3px";//浮动 title.style.background = titlecolor;//背景颜色 title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity = "0.75";//透明 //title.style.border="1px solid " + bordercolor;//边框 title.style.height = "25px";//高度 title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 //title.style.color = "red";//文字颜色 title.style.cursor = "move";//鼠标样式 $.ajax({ type:"post", url:"ShowDetail?Cno="+Cno, dataType:"json", success:function(data){ },error:function(){ alert("请求出错"); }}); title.innerHTML="<table border='0' width='100%'><tr><td align='center'>收银小票单</td><td align=\"right\"><a href='#' onclick='closeDiv()'>关闭</a></td></tr><tr><td align='center'>时间：</td></tr><tr><td align='left'>三得利青柠水</td></tr></table>"; msgObj.appendChild(title);//在提示框中增加标题 } //添加关闭功能 function closeDiv() { var msgTitelObject = document.getElementById("msgDiv"); document.body.removeChild(msgTitelObject); var bgObj = document.getElementById("bgObj"); document.body.removeChild(bgObj); } </script> </head> <body> <ul class="iptgroup"> <li>开始日期：</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> <li style="width:20px;"></li> <li>结束日期：</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> </ul> <form action="FF" method="get" name="myform" id="myform"> <div class="upleft"><img src="image/tu4.gif" width="130" height="130" border="0" /></div> <div class="upright"><br><br><br><center><font face="楷体"color="#000000" size=5><strong>您的消费账单：</strong></font></center></div> <div class="center"> ……………………………………………………………………………… </table> </div> </form> </body> </html> ```

Java代码自动生成图片验证码时图片无法加载的问题

## 求指教验证码图片无法加载是什么问题 ![如图所示](https://img-ask.csdn.net/upload/201907/17/1563352350_803951.png) ![图片说明](https://img-ask.csdn.net/upload/201907/18/1563411474_745017.png) 具体源代码请访问 [github代码连接]( https://github.com/Haven7/jude-Java-Springboot "") 片段代码如下： **login.html** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>后台登录-进销存管理系统</title> <meta name="author" content="DeathGhost" /> <link rel="stylesheet" type="text/css" href="static/css/style.css" /> <style> body{height:100%; background: #16a085; overflow:hidden;} canvas{z-index:-1;position:absolute;} .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 35%; width: 25%; height: 15%; padding: 16px; border: solid black; background-color: white; z-index:1002; overflow: auto; } </style> <script src="static/js/jquery.js"></script> <script src="static/js/verifyCode.js"></script> <script src="static/js/Particleground.js"></script> <script> $(document).ready(function() { //粒子背景特效 $('body').particleground({ dotColor: '#16a085', lineColor: '#5cbdaa' }); $("#loginBtn").click(function(){ $.post("/user/login",{userName:$("#userName").val(),password:$("#password").val(),imageCode:$("#imageCode").val()},function(result){ if(result.success){ if(result.roleSize==1){ var roleId=result.roleList[0].id; $.post("/user/saveRole",{roleId:roleId},function(result){ if(result.success){ window.location.href="/main.html"; } }); }else{ $("#roleList").empty(); var roles=result.roleList; for(var i=0;i<roles.length;i++){ if(i==0){ $("#roleList").append("<input type='radio' checked=true name='role' value='"+roles[i].id+"'/>"+roles[i].name+"  ") }else{ $("#roleList").append("<input type='radio' name='role' value='"+roles[i].id+"'/>"+roles[i].name+"  ") } } document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; } }else{ alert(result.errorInfo); } }); }); }); function saveRole(){ var roleId=$("input[name='role']:checked").val(); $.post("/user/saveRole",{roleId:roleId},function(result){ if(result.success){ window.location.href="/main.html"; } }); } </script> </head> <body> <dl class="admin_login"> <dt> <strong>进销存管理系统</strong> <em>Lnvoicing Management System</em> </dt> <dd class="user_icon"> <input type="text" id="userName" placeholder="账号" class="login_txtbx"/> </dd> <dd class="pwd_icon"> <input type="password" id="password" placeholder="密码" class="login_txtbx"/> </dd> <dd class="val_icon"> <div class="checkcode"> <input type="text" id="imageCode" name="imageCode" placeholder="验证码" maxlength="4" class="login_txtbx"> <img id="imgObj" title="看不清，换一张" src="/drawImage" onclick="changeImg()" /> </div> </dd> <dd> <input type="button" id="loginBtn" value="立即登陆" class="submit_btn"/> </dd> <dd> <p>© 2012-2018 </p> <p><a href="" target="_blank"> </a></p> </dd> </dl> <div id="light" class="white_content"> <p>请选择一个角色登录系统</p> <br/> <div id="roleList"> </div> <br/> <input type="button" value="提交" onclick="saveRole()"/> </div> <div id="fade" class="black_overlay"> </div> </body> </html> ``` **verifyCode.js** ``` //点击换一张验证码 function changeImg() { var imgSrc = $("#imgObj"); var src = imgSrc.attr("src"); imgSrc.attr("src",chgUrl(src)); $("#info").html(""); } //时间戳 //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳 function chgUrl(url) { var timestamp = (new Date()).valueOf(); url = url.substring(0, 17); if ((url.indexOf("&") >= 0)) { url = url + "×tamp=" + timestamp; } else { url = url + "?timestamp=" + timestamp; } return url; } //验证码验证 function isRightCode() { var code = $("#veryCode").attr("value"); //alert(code); code = "c=" + code; $.ajax( { type : "POST", url : "ResultServlet", data : code, success : callback }); } //验证以后处理提交信息或错误信息 function callback(data) { if(data.toString()==1) { $("#info").html("xw素材网提醒您：成功了！"); return; }else { $("#info").html(data); return; } } ``` **DrawImageController.java** ``` package com.jude.controller; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.autoconfigure.kafka.KafkaProperties; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; /** * 生成验证码 * @author jude * */ @Controller public class DrawImageController { public static final int WIDTH = 120; public static final int HEIGHT = 30; /** * 生成图片 * @param request * @param response */ @RequestMapping("/drawImage") public void drawImage(HttpServletRequest request, HttpServletResponse response)throws Exception{ request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); // 创建缓存 BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB); // 获得画布 Graphics g = bi.getGraphics(); // 设置背影色 setBackGround(g); // 设置边框 setBorder(g); // 画干扰线 drawRandomLine(g); // 写随机数 String random = drawRandomNum((Graphics2D) g); // 将随机汉字存在session中 request.getSession().setAttribute("checkcode", random); // 将图形写给浏览器 response.setContentType("image/jpeg"); // 发头控制浏览器不要缓存 response.setDateHeader("expries", -1); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache"); // 将图片写给浏览器 response.setHeader("Cache-Control", "no-store, no-cache"); response.setContentType("image/jpeg"); ImageIO.write(bi, "jpg", response.getOutputStream()); } /** * 设置背景色 * * @param g */ private void setBackGround(Graphics g) { // 设置颜色 g.setColor(new Color(22, 160, 133)); // 填充区域 g.fillRect(0, 0, WIDTH, HEIGHT); } /** * 设置边框 * * @param g */ private void setBorder(Graphics g) { // 设置边框颜色 g.setColor(new Color(22, 160, 133)); // 边框区域 g.drawRect(1, 1, WIDTH - 2, HEIGHT - 2); } /** * 画随机线条 * * @param g */ private void drawRandomLine(Graphics g) { // 设置颜色 g.setColor(Color.WHITE); // 设置线条个数并画线 for (int i = 0; i < 5; i++) { int x1 = new Random().nextInt(WIDTH); int y1 = new Random().nextInt(HEIGHT); int x2 = new Random().nextInt(WIDTH); int y2 = new Random().nextInt(HEIGHT); g.drawLine(x1, y1, x2, y2); } } /** * 画随机汉字 * * @param g * @return */ private String drawRandomNum(Graphics2D g) { StringBuffer sb = new StringBuffer(); // 设置颜色 g.setColor(Color.WHITE); // 设置字体 g.setFont(new Font("宋体", Font.BOLD, 20)); // 准备常用汉字集 String base = "\u7684\u4e00\u4e86\u662f\u6211\u4e0d\u5728\u4eba\u4eec\u6709\u6765\u4ed6\u8fd9\u4e0a\u7740\u4e2a\u5730\u5230\u5927\u91cc\u8bf4\u5c31\u53bb\u5b50\u5f97\u4e5f\u548c\u90a3\u8981\u4e0b\u770b\u5929\u65f6\u8fc7\u51fa\u5c0f\u4e48\u8d77\u4f60\u90fd\u628a\u597d\u8fd8\u591a\u6ca1\u4e3a\u53c8\u53ef\u5bb6\u5b66\u53ea\u4ee5\u4e3b\u4f1a\u6837\u5e74\u60f3\u751f\u540c\u8001\u4e2d\u5341\u4ece\u81ea\u9762\u524d\u5934\u9053\u5b83\u540e\u7136\u8d70\u5f88\u50cf\u89c1\u4e24\u7528\u5979\u56fd\u52a8\u8fdb\u6210\u56de\u4ec0\u8fb9\u4f5c\u5bf9\u5f00\u800c\u5df1\u4e9b\u73b0\u5c71\u6c11\u5019\u7ecf\u53d1\u5de5\u5411\u4e8b\u547d\u7ed9\u957f\u6c34\u51e0\u4e49\u4e09\u58f0\u4e8e\u9ad8\u624b\u77e5\u7406\u773c\u5fd7\u70b9\u5fc3\u6218\u4e8c\u95ee\u4f46\u8eab\u65b9\u5b9e\u5403\u505a\u53eb\u5f53\u4f4f\u542c\u9769\u6253\u5462\u771f\u5168\u624d\u56db\u5df2\u6240\u654c\u4e4b\u6700\u5149\u4ea7\u60c5\u8def\u5206\u603b\u6761\u767d\u8bdd\u4e1c\u5e2d\u6b21\u4eb2\u5982\u88ab\u82b1\u53e3\u653e\u513f\u5e38\u6c14\u4e94\u7b2c\u4f7f\u5199\u519b\u5427\u6587\u8fd0\u518d\u679c\u600e\u5b9a\u8bb8\u5feb\u660e\u884c\u56e0\u522b\u98de\u5916\u6811\u7269\u6d3b\u90e8\u95e8\u65e0\u5f80\u8239\u671b\u65b0\u5e26\u961f\u5148\u529b\u5b8c\u5374\u7ad9\u4ee3\u5458\u673a\u66f4\u4e5d\u60a8\u6bcf\u98ce\u7ea7\u8ddf\u7b11\u554a\u5b69\u4e07\u5c11\u76f4\u610f\u591c\u6bd4\u9636\u8fde\u8f66\u91cd\u4fbf\u6597\u9a6c\u54ea\u5316\u592a\u6307\u53d8\u793e\u4f3c\u58eb\u8005\u5e72\u77f3\u6ee1\u65e5\u51b3\u767e\u539f\u62ff\u7fa4\u7a76\u5404\u516d\u672c\u601d\u89e3\u7acb\u6cb3\u6751\u516b\u96be\u65e9\u8bba\u5417\u6839\u5171\u8ba9\u76f8\u7814\u4eca\u5176\u4e66\u5750\u63a5\u5e94\u5173\u4fe1\u89c9\u6b65\u53cd\u5904\u8bb0\u5c06\u5343\u627e\u4e89\u9886\u6216\u5e08\u7ed3\u5757\u8dd1\u8c01\u8349\u8d8a\u5b57\u52a0\u811a\u7d27\u7231\u7b49\u4e60\u9635\u6015\u6708\u9752\u534a\u706b\u6cd5\u9898\u5efa\u8d76\u4f4d\u5531\u6d77\u4e03\u5973\u4efb\u4ef6\u611f\u51c6\u5f20\u56e2\u5c4b\u79bb\u8272\u8138\u7247\u79d1\u5012\u775b\u5229\u4e16\u521a\u4e14\u7531\u9001\u5207\u661f\u5bfc\u665a\u8868\u591f\u6574\u8ba4\u54cd\u96ea\u6d41\u672a\u573a\u8be5\u5e76\u5e95\u6df1\u523b\u5e73\u4f1f\u5fd9\u63d0\u786e\u8fd1\u4eae\u8f7b\u8bb2\u519c\u53e4\u9ed1\u544a\u754c\u62c9\u540d\u5440\u571f\u6e05\u9633\u7167\u529e\u53f2\u6539\u5386\u8f6c\u753b\u9020\u5634\u6b64\u6cbb\u5317\u5fc5\u670d\u96e8\u7a7f\u5185\u8bc6\u9a8c\u4f20\u4e1a\u83dc\u722c\u7761\u5174\u5f62\u91cf\u54b1\u89c2\u82e6\u4f53\u4f17\u901a\u51b2\u5408\u7834\u53cb\u5ea6\u672f\u996d\u516c\u65c1\u623f\u6781\u5357\u67aa\u8bfb\u6c99\u5c81\u7ebf\u91ce\u575a\u7a7a\u6536\u7b97\u81f3\u653f\u57ce\u52b3\u843d\u94b1\u7279\u56f4\u5f1f\u80dc\u6559\u70ed\u5c55\u5305\u6b4c\u7c7b\u6e10\u5f3a\u6570\u4e61\u547c\u6027\u97f3\u7b54\u54e5\u9645\u65e7\u795e\u5ea7\u7ae0\u5e2e\u5566\u53d7\u7cfb\u4ee4\u8df3\u975e\u4f55\u725b\u53d6\u5165\u5cb8\u6562\u6389\u5ffd\u79cd\u88c5\u9876\u6025\u6797\u505c\u606f\u53e5\u533a\u8863\u822c\u62a5\u53f6\u538b\u6162\u53d4\u80cc\u7ec6"; int x = 5; // 控制字数 for (int i = 0; i < 4; i++) { // 设置字体旋转角度 int degree = new Random().nextInt() % 30; // 截取汉字 String ch = base.charAt(new Random().nextInt(base.length())) + ""; sb.append(ch); // 正向角度 g.rotate(degree * Math.PI / 180, x, 20); g.drawString(ch, x, 20); // 反向角度 g.rotate(-degree * Math.PI / 180, x, 20); x += 30; } System.out.println(sb.toString()); return sb.toString(); } } ```

关于一个Onclick切换样式的问题

想做个点击<li>切换图片的功能，现在碰到一个问题，原本设想的效果是点击一个<li>时背景色变为白色字体变为黑色，再次点击另外一个<li>时原先那个<li>再次变为默认颜色（黑色背景白色字体)，但是试了很久都没达到效果。请各位帮忙看看，谢谢。 [code="javascript"]window.onload=function setImage(){ var number=document.getElementById("number"); var list=number.getElementsByTagName("li"); for (var i=0;i<list.length;i++){ list[i].flag=true; list[i].onclick=function(){ var img=document.getElementsByTagName("img"); for (var i=0;i<img.length;i++){ if(img[i].src.indexOf(this.lastChild.nodeValue)!=-1){ img[i].style.display=""; var h3=document.getElementsByTagName("h3")[0]; h3.lastChild.nodeValue=img[i].title; }else{ img[i].style.display="none"; } if(this.flag==true){ this.style.backgroundColor="#000"; this.style.color="#FFF"; this.flag=false; } if(this.flag==false){ this.style.backgroundColor="#FFF"; this.style.color="#000"; this.flag=true; } } } } }[/code] [code="css"]<style type="text/css"> *{ margin:0; padding:0; } #wrapper{ margin:10px; width:380px; height:230px; } ul#number{ position:absolute; left: 288px; top: 160px; } #number li{ float:left; margin-right:10px; border:1px solid #FFF; list-style:none; width:20px; height:20px; color:#fff; text-align:center; cursor:pointer; background:#000; color:#FFF; } #numbercolor{ background:#FFF; color:#000; } #title{ width:380px; height:50px; background:#000; opacity:0.55; filter: alpha(opacity=55); position:absolute; margin-top:180px; z-index: 999; } #wrapper h3{ font-size:14px; color:#FFF; position:absolute; margin-top:180px; line-height:50px; width:380px; height:50px; z-index:1000; text-align:center; } </style>[/code] [code="html"]<div id="wrapper"> <ul id="number"> <li>1</li> <li>2</li> <li>3</li> </ul> <h3>[资源] 测试测试测试</h3> <div id="title"></div> <img src="images/1.jpg" title="[资源] 测试测试测试" /> <img src="images/2.jpg" title="[资源] 测试测试测试" style="display:none;"/> <img src="images/3.jpg" title="[资源] 测试测试测试" style="display:none;"/> </div> [/code]

终于明白阿里百度这样的大公司，为什么面试经常拿ThreadLocal考验求职者了

点击上面↑「爱开发」关注我们每晚10点，捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类，各个线程都拥有一份线程私...

《奇巧淫技》系列-python！！每天早上八点自动发送天气预报邮件到QQ邮箱

将代码部署服务器，每日早上定时获取到天气数据，并发送到邮箱。也可以说是一个小人工智障。思路可以运用在不同地方，主要介绍的是思路。

加快推动区块链技术和产业创新发展，2019可信区块链峰会在京召开

11月8日，由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办，科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。　　区块链技术被认为是继蒸汽机、电力、互联网之后，下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力，电力解决了人类基本的生活需求，互联网彻底改变了信息传递的方式，区块链作为构造信任的技术有重要的价值。　　1...

阿里面试官问我：如何设计秒杀系统？我的回答让他比起大拇指

你知道的越多，你不知道的越多点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式，欢迎Star和指教前言 Redis在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难。作为一个在互联网公司面一次拿一次Offer的面霸，打败了...

C语言魔塔游戏

很早就很想写这个，今天终于写完了。游戏截图：编译环境: VS2017 游戏需要一些图片，如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论，如果暂时没有回应，可以在博客下方留言，到时候我会看到。下面我来介绍一下游戏的主要功能和实现方式首先是玩家的定义，使用结构体，这个名字是可以自己改变的 struct gamerole { char n...

面试官问我：什么是消息队列？什么场景需要他？用了会出现什么问题？

你知道的越多，你不知道的越多点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群，欢迎Star和完善前言消息队列在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。作为一个在互联网公司面一次拿一次Offer的面霸...

Android性能优化(4)：UI渲染机制以及优化

文章目录1. 渲染机制分析1.1 渲染机制1.2 卡顿现象1.3 内存抖动2. 渲染优化方式2.1 过度绘制优化2.1.1 Show GPU overdraw2.1.2 Profile GPU Rendering2.2 卡顿优化2.2.1 SysTrace2.2.2 TraceView 在从Android 6.0源码的角度剖析View的绘制原理一文中，我们了解到View的绘制流程有三个步骤，即m...

微服务中的Kafka与Micronaut

今天，我们将通过Apache Kafka主题构建一些彼此异步通信的微服务。我们使用Micronaut框架，它为与Kafka集成提供专门的库。让我们简要介绍一下示例系统的体系结构。我们有四个微型服务：订单服务，行程服务，司机服务和乘客服务。这些应用程序的实现非常简单。它们都有内存存储，并连接到同一个Kafka实例。我们系统的主要目标是为客户安排行程。订单服务应用程序还充当网关。它接收来自客户的请求...

致 Python 初学者们！

作者| 许向武责编 | 屠敏出品 | CSDN 博客前言在 Python 进阶的过程中，相信很多同学应该大致上学习了很多 Python 的基础知识，也正在努力成长。在此期间，一定遇到了很多的困惑，对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 Python 这门编程语言，从2009年开始单一使用 Python 应对所有的开发工作，直至今...

究竟你适不适合买Mac？

我清晰的记得，刚买的macbook pro回到家，开机后第一件事情，就是上了淘宝网，花了500元钱，找了一个上门维修电脑的师傅，上门给我装了一个windows系统。。。。。。表砍我。。。当时买mac的初衷，只是想要个固态硬盘的笔记本，用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后，最终决定，还是买个好（xiong）看（da）的。已经有好几个朋友问我mba怎么样了，所以今天尽量客观...

程序员一般通过什么途径接私活？

二哥，你好，我想知道一般程序猿都如何接私活，我也想接，能告诉我一些方法吗？上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”，还有很多读者问过我类似这样的问题。我接的私活不算多，挣到的钱也没有多少，加起来不到 20W。说实话，这个数目说出来我是有点心虚的，毕竟太少了，大家轻喷。但我想，恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉，我也算是有经验的人了。唾弃接私活、做外...

字节跳动面试官这样问消息队列：分布式事务、重复消费、顺序消费，我整理了一下

你知道的越多，你不知道的越多点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群，欢迎Star和完善前言消息队列在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。作为一个在互联网公司面一次拿一次Offer的面霸...

Python爬虫爬取淘宝，京东商品信息

小编是一个理科生，不善长说一些废话。简单介绍下原理然后直接上代码。使用的工具（Python+pycharm2019.3+selenium+xpath+chromedriver）其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip installselenium -ihttps://pypi.tuna.tsinghua.edu.cn/simple/ ...

阿里程序员写了一个新手都写不出的低级bug，被骂惨了。

这种新手都不会范的错，居然被一个工作好几年的小伙子写出来，差点被当场开除了。

Java工作4年来应聘要16K最后没要,细节如下。。。

前奏：今天2B哥和大家分享一位前几天面试的一位应聘者，工作4年26岁，统招本科。以下就是他的简历和面试情况。基本情况：专业技能： 1、 熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、 熟悉常用项目管理工具：SVN、GIT、MAVEN、Jenkins 3、 熟悉Nginx、tomca...

SpringBoot2.x系列教程（三十六）SpringBoot之Tomcat配置

Spring Boot默认内嵌的Tomcat为Servlet容器，关于Tomcat的所有属性都在ServerProperties配置类中。同时，也可以实现一些接口来自定义内嵌Servlet容器和内嵌Tomcat等的配置。关于此配置，网络上有大量的资料，但都是基于SpringBoot1.5.x版本，并不适合当前最新版本。本文将带大家了解一下最新版本的使用。 ServerProperties的部分源...

Python绘图，圣诞树，花，爱心 | Turtle篇

每周每日，分享Python实战代码，入门资料，进阶资料，基础语法，爬虫，数据分析，web网站，机器学习，深度学习等等。公众号回复【进群】沟通交流吧，QQ扫码进群学习吧微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...

作为一个程序员，CPU的这些硬核知识你必须会！

CPU对每个程序员来说，是个既熟悉又陌生的东西？如果你只知道CPU是中央处理器的话，那可能对你并没有什么用，那么作为程序员的我们，必须要搞懂的就是CPU这家伙是如何运行的，尤其要搞懂它里面的寄存器是怎么一回事，因为这将让你从底层明白程序的运行机制。随我一起，来好好认识下CPU这货吧把CPU掰开来看对于CPU来说，我们首先就要搞明白它是怎么回事，也就是它的内部构造，当然，CPU那么牛的一个东...

破14亿，Python分析我国存在哪些人口危机！

一、背景二、爬取数据三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化（抚养比） 6、各省人口 7、世界人口四、遇到的问题遇到的问题 1、数据分页，需要获取从1949-2018年数据，观察到有近20年参数：LAST20，由此推测获取近70年的参数可设置为：LAST70 2、2019年数据没有放上去，可以手动添加上去 3、将数据进行行列转换 4、列名...

听说想当黑客的都玩过这个Monyer游戏（1~14攻略）

第零关进入传送门开始第0关（游戏链接）请点击链接进入第1关：连接在左边→ ←连接在右边看不到啊。。。。（只能看到一堆大佬做完的留名，也能看到菜鸡的我，在后面~~）直接fn+f12吧 <span>连接在左边→</span> <a href="first.php"></a> <span>←连接在右边</span> o...

在家远程办公效率低？那你一定要收好这个「在家办公」神器！

相信大家都已经收到国务院延长春节假期的消息，接下来，在家远程办公可能将会持续一段时间。但是问题来了。远程办公不是人在电脑前就当坐班了，相反，对于沟通效率，文件协作，以及信息安全都有着极高的要求。有着非常多的挑战，比如： 1在异地互相不见面的会议上，如何提高沟通效率？ 2文件之间的来往反馈如何做到及时性？如何保证信息安全？ 3如何规划安排每天工作，以及如何进行成果验收？ ...... ...

作为一个程序员，内存和磁盘的这些事情，你不得不知道啊！！！

截止目前，我已经分享了如下几篇文章：一个程序在计算机中是如何运行的？超级干货！！！作为一个程序员，CPU的这些硬核知识你必须会！作为一个程序员，内存的这些硬核知识你必须懂！这些知识可以说是我们之前都不太重视的基础知识，可能大家在上大学的时候都学习过了，但是嘞，当时由于老师讲解的没那么有趣，又加上这些知识本身就比较枯燥，所以嘞，大家当初几乎等于没学。再说啦，学习这些，也看不出来有什么用啊！...

这个世界上人真的分三六九等，你信吗？

偶然间，在知乎上看到一个问题一时间，勾起了我深深的回忆。以前在厂里打过两次工，做过家教，干过辅导班，做过中介。零下几度的晚上，贴过广告，满脸、满手地长冻疮。再回首那段岁月，虽然苦，但让我学会了坚持和忍耐。让我明白了，在这个世界上，无论环境多么的恶劣，只要心存希望，星星之火，亦可燎原。下文是原回答，希望能对你能有所启发。如果我说，这个世界上人真的分三六九等，...

2020年全新Java学习路线图，含配套视频，学完即为中级Java程序员！！

新的一年来临，突如其来的疫情打破了平静的生活！在家的你是否很无聊，如果无聊就来学习吧！世上只有一种投资只赚不赔，那就是学习！！！传智播客于2020年升级了Java学习线路图，硬核升级，免费放送！学完你就是中级程序员，能更快一步找到工作！一、Java基础 JavaSE基础是Java中级程序员的起点，是帮助你从小白到懂得编程的必经之路。在Java基础板块中有6个子模块的学...

B 站上有哪些很好的学习资源?

哇说起B站，在小九眼里就是宝藏般的存在，放年假宅在家时一天刷6、7个小时不在话下，更别提今年的跨年晚会，我简直是跪着看完的！！最早大家聚在在B站是为了追番，再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频，最近两年我和周围的朋友们已经把B站当作学习教室了，而且学习成本还免费，真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ﾉ下面我们就来盘点一下B站上优质的学习资源：综合类 Oeasy：综合...

爬取薅羊毛网站百度云资源

这是疫情期间无聊做的爬虫，去获取暂时用不上的教程 import threading import time import pandas as pd import requests import re from threading import Thread, Lock # import urllib.request as request # req=urllib.request.Requ...

如何优雅地打印一个Java对象？

你好呀，我是沉默王二，一个和黄家驹一样身高，和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码，但仍然觉得自己是个菜鸟（请允许我惭愧一下）。在一个月黑风高的夜晚，我思前想后，觉得再也不能这么蹉跎下去了。于是痛下决心，准备通过输出的方式倒逼输入，以此来修炼自己的内功，从而进阶成为一名真正意义上的大神。与此同时，希望这些文章能够帮助到更多的读者，让大家在学习的路上不再寂寞、空虚和冷。 ...

雷火神山直播超两亿，Web播放器事件监听是怎么实现的？

Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题，让视音频内容可以不依赖用户安装App，就能进行播放以及在社交平台进行传播。在视频业务大数据平台中，播放数据的统计分析非常重要，所以Web播放器在使用过程中，需要对其内部的数据进行收集并上报至服务端，此时，就需要对发生在其内部的一些播放行为进行事件监听。那么Web播放器事件监听是怎么实现的呢？ 01 监听事件明细表名...

3万字总结，Mysql优化之精髓

本文知识点较多，篇幅较长，请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量，备受互联网大厂的青睐，出门面试想进BAT，想拿高工资，不会点MySQL优化知识，拿offer的成功率会大大下降。为什么要优化系统的吞吐量瓶颈往往出现在数据库的访问速度上随着应用程序的运行，数据库的中的数据会越来越多，处理时间会相应变慢数据是存放在磁盘上的，读写速度无法和内存相比如何优化设计...

HTML5适合的情人节礼物有纪念日期功能

前言利用HTML5，css，js实现爱心树以及纪念日期的功能网页有播放音乐功能以及打字倾诉感情的画面，非常适合情人节送给女朋友具体的HTML代码具体只要修改代码里面的男某某和女某某文字段也可自行修改，还有代码下半部分的JS代码需要修改一下起始日期注意月份为0~11月也就是月份需要减一。当然只有一部分HTML和JS代码不够运行的，文章最下面还附加了完整代码的下载地址 <!...

Python新型冠状病毒疫情数据自动爬取+统计+发送报告+数据屏幕（三）发送篇

今天介绍的项目是使用 Itchat 发送统计报告项目功能设计：定时爬取疫情数据存入Mysql 进行数据分析制作疫情报告使用itchat给亲人朋友发送分析报告基于Django做数据屏幕使用Tableau做数据分析来看看最终效果目前已经完成，预计2月12日前更新使用 itchat 发送数据统计报告 itchat 是一个基于 web微信的一个框架，但微信官方并不允许使用这...

python沙箱逃逸

沙箱逃逸是CTF和实际场景中经常遇到的一种情况。需要利用python的特性来实现逃逸。本文详细介绍了关于python逃逸的基础以及一些构造payload方法，并且附加习题提供练习。

作为程序员的我，大学四年一直自学，全靠这些实用工具和学习网站！

我本人因为高中沉迷于爱情，导致学业荒废，后来高考，毫无疑问进入了一所普普通通的大学，实在惭愧???? 我又是那么好强，现在学历不行，没办法改变的事情了，所以，进入大学开始，我就下定决心，一定要让自己掌握更多的技能，尤其选择了计算机这个行业，一定要多学习技术。在进入大学学习不久后，我就认清了一个现实：我这个大学的整体教学质量和学习风气，真的一言难尽，懂的人自然知道怎么回事？怎么办？我该如何更好的提升自...

新来个技术总监，禁止我们使用Lombok！

我有个学弟，在一家小型互联网公司做Java后端开发，最近他们公司新来了一个技术总监，这位技术总监对技术细节很看重，一来公司之后就推出了很多"政策"，比如定义了很多开发规范、日志规范、甚至是要求大家统一使用某一款IDE。但是这些都不是我这个学弟和我吐槽的点，他真正和我吐槽的是，他很不能理解，这位新来的技术总监竟然禁止公司内部所有开发使用Lombok。但是又没给出十分明确的，可以让人信服的理由。于...

教你如何编写第一个简单的爬虫

很多人知道爬虫，也很想利用爬虫去爬取自己想要的数据，那么爬虫到底怎么用呢？今天就教大家编写一个简单的爬虫。下面以爬取笔者的个人博客网站为例获取第一篇文章的标题名称，教大家学会一个简单的爬虫。第一步：获取页面 #!/usr/bin/python # coding: utf-8 import requests #引入包requests link = "http://www.santostang....

前端JS初级面试题二 (｡•ˇ‸ˇ•｡)老铁们！快来瞧瞧自己都会了么

1. 传统事件绑定和符合W3C标准的事件绑定有什么区别？传统事件绑定 <div onclick="">123</div> div1.onclick = function(){}; <button onmouseover=""></button> 注意：如果给同一个元素绑定了两次或多次相同类型的事件，那么后面的绑定会覆盖前面的绑定（不支持DOM事...

芒果味的球

weixin_44530629

依旧无忌

qq_43953444

相似问题