关于CSS3元素对齐的问题 5C

如何让1、2和3的底部对齐?
他们是flex布局

图片说明

4个回答

https://css-tricks.com/almanac/properties/v/vertical-align/

各种对齐模式都有,中间有HTML和CSS的代码示例

flexDirection: column-reverse;

align-items:flex-end

align-items:flex-end
可以实现

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于CSS中内联元素对齐问题(line-height && vertical align)
``` <div style="background-color: orange; display: inline-block"> <div style="display: inline-block; font-size: 40px; background-color: blue;">xxXXAABB</div> <div style="display: inline-block; font-size: 80px; background-color: red;">xxXXAABB</div> <div style="display: inline-block; font-size: 80px; background-color: green; vertical-align: middle;">xxXXAABB</div> </div> ``` ![图片说明](https://img-ask.csdn.net/upload/201608/19/1471572038_283439.png) 请问上面代码显示效果中为什么第三个子div会比前两个低一点?
div中的元素对齐
<html> <body > <table style="border:1px solid red"> <tr style="border:1px solid red" valign="top"> <td valign="top" style="border:1px solid red;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px"> <div id="toku1" style="border:1px solid red;margin:0px 0px 0px 0px" > <input type="radio" /><label >123</label><br> <input type="radio"/><label >456</label> </div> <div id="toku2" style="border:1px solid red;"> <input type="radio" /><label >11</label><br> <input type="radio" /><label >11</label><br> <input type="radio" /><label >11</label><br> <input type="radio" /><label >11</label><br> <input type="radio" /><label >11</label> </div> </td> </tr> </table> </body> </html> 上面html十分简单、一个TD中两个div块、 不知为什么div的上边框不是和TD中上边框对齐、而是有一行的间隙、 修改MARGIN和PINDDING也没用 不知为何?
HTML里为啥input和canvas元素水平放在一行没有对齐,要写一个验证码,附上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div style="background-color: yellow; width: 400px;"> 验证码<input type="text" style="width: 150px; height: 25px;"> <canvas height="25px" width="150px" id="mycanvas"></canvas> </div> <script> /*生成4位随机数*/ function rand() { var str = "abcdefghijklmnopqrstuvwxyz0123456789"; var arr = str.split(""); var validate = ""; var ranNum; for (var i = 0; i < 4; i++) { ranNum = Math.floor(Math.random() * 36); //随机数在[0,35]之间 validate += arr[ranNum]; } return validate; } /*干扰线的随机x坐标值*/ function lineX() { var ranLineX = Math.floor(Math.random() * 90); return ranLineX; } /*干扰线的随机y坐标值*/ function lineY() { var ranLineY = Math.floor(Math.random() * 40); return ranLineY; } function clickChange() { var mycanvas = document.getElementById('mycanvas'); var cxt = mycanvas.getContext('2d'); cxt.fillStyle = '#000'; cxt.fillRect(0, 0, 90, 40); /*生成干扰线20条*/ for (var j = 0; j < 20; j++) { cxt.strokeStyle = '#fff'; cxt.beginPath(); //若省略beginPath,则每点击一次验证码会累积干扰线的条数 cxt.moveTo(lineX(), lineY()); cxt.lineTo(lineX(), lineY()); cxt.lineWidth = 0.5; cxt.closePath(); cxt.stroke(); } cxt.fillStyle = 'red'; cxt.font = 'bold 20px Arial'; cxt.fillText(rand(), 25, 25); //把rand()生成的随机数文本填充到canvas中 } clickChange(); /*点击验证码更换*/ mycanvas.onclick = function (e) { e.preventDefault(); //阻止鼠标点击发生默认的行为 clickChange(); }; </script> </body> </html>
swiper4.0 问题,动态加载的数据显示不正常
动态加载的数据,静态数据是20个slide 能对整齐。动态加载的数据只有15个却不能对齐![图片说明](https://img-ask.csdn.net/upload/201904/22/1555925727_411340.png) ``` var mySwiper = new this.$Swiper(".swiper-container2", { slidesPerView: 5, //一行显示5个 slidesPerColumn: 2, //显示2行 slidesPerGroup: 5, //每次滑动滚动的数量 scrollbar: { el: "#sw2", dragSize: 53 }, draggable: false, observer: true, //修改swiper自己或子元素时,自动初始化swiper observeParents: false, }); mySwiper.scrollbar.$el.css("height", "15px"); mySwiper.scrollbar.$dragEl.css("background", "#F2414C"); mySwiper.scrollbar.$el.css("width", "157px"); mySwiper.scrollbar.updateSize(); //结构 <div class="swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in goodslist" :key="item.id" @click="toNew(item.id)" > <div class="box"> <img :src="item.src" alt="这是图" /> </div> <span>{{ item.name }}</span> </div> </div> <br /> <div class="swiper-scrollbar" id="sw2"></div> </div> ```
新人求助!!做网页做了一个二级菜单,但是一级菜单放不进去盒子,二级菜单不对齐一级菜单
## 我的style里面的代码是外部镶入的,并不是直接写上去的 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:450px; height:30px; border:1px solid red; margin:100px auto; /*盒子居中*/ } div ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left; height:50px; text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件,二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show();//show本质上还是更新display属性为block }); // 给一级菜单li设置鼠标离开事件,二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide();//hide本质上还是更新display属性为none }); </script> </html> ``` ```
html 字体标签 列表 表格 表单
一、字体标签 1、字体标签使用<font color="" face="" size="">...</font>表示 color属性:表示字体颜色 取值:英文 red blue yellow green black pink white 十六进制 #开头 前两位控制红色 中间两位控制绿色 后两位控制蓝色 #00 00 00 十六进制的取值0-F face属性:字体格式 比如:宋体、微软雅黑 size属性:字体大小 取值:1-7 可以为负数,为负数字字体会变小,超出7以最大值为准 默认为3 (官方取值1-7,无特殊情况,不要使用负数) 加粗字:<b>...</b>标签中的内容字体会加粗 斜体字:<i>...</i>标签中的内容字体会倾斜 下划线字:<u>...</u>标签中的内容字体会有下划线 二、列表 1、有序列表 order list <ol></ol>表示有序列表 <li></li> list item 列表元素 <ol type="1|A|a|I|i"> <li></li> </ol> type属性取值: 1 阿拉伯数字 默认 A 大写的英文字母 a 小写的英文字母 I 大写的罗马数字 i 小写的罗马数字 2、无序列表 unordered list <ul></ul>表示无序列表 <li></li> list item 列表元素 <ul type="disc|circle|square|none"> <li></li> </ul> type属性取值:disc 实心圆 默认 circle 空心圆 square 实心方块 none 不修饰 一级默认实心圆 二级默认空心圆 三级默认实心方块 3、自定义列表 definition list <dl></dl> 自定义列表 <dt></dt> 自定义标题 definition title <dd></dd> 自定义描述 definition description <dl> <dt>...</dt> <dd></dd> </dl> 三、表格 <table> <tr> <td>...</td> </tr> </table> table标签:代表表格 tr标签:代表一行 注:只有单元格才能放东西,其他的不能放任何元素 thead标签:表格的头部 tbody标签:表格的内容 tfoot标签:表格的尾部 caption标签:表格的标题 boder属性:表格的边框 width属性:宽度 height属性:高度 align属性:对齐方式,取值:左、中、右 cellspacing属性:单元格与单元格之间的间隙 外边距 cellpadding属性:单元格与内容之间的间隙 内边距 bgcolor属性:表格背景颜色 colspan属性:列合并 rowspan属性:行合并 四、表单 表单:把客户端页面数据提交给服务器端<form></form> 格式:<form action="" method="" type=""> <input /> </form> form:表单标签 action属性:提交到服务器端的地址 method属性:提交方式,取值:get 默认 post input标签:表单元素 type属性:定义表单中的元素类型,取值如下: text 文本输入框 默认 password 密码框 radio 单选框 必须每个单选框name属性相同 chackbox 复选框 必须每个复选框name属性相同 submit 提交按钮 会提交表单 reset 重置按钮 会重置表单 button 普通按钮 image 图片按钮 会提交表单 hidden 隐藏域 file 文件上传 name属性:元素的名称 服务器端是通过name属性获取input框的值 value属性:元素的值 readonly属性:只读 会传输到服务器 disabled属性:禁用 不会传输到服务器 maxlength属性:最大输入字符个数 placeholder属性:提示语 checked属性:是否选中 select标签:下拉列表 size属性:显示下拉列表中几个值 multicol标签:可以选中多个选项 option标签:下拉列表中的选项 格式:<select> <option>...</option> </s/elect> textarea标签:文本区域框 rows属性:行数 cols属性:列数 URL与参数用?连接 参数与参数之间用&
bootstrap如何让form-inline内的两个div分别左居中右居中?
使用angular2+bootstrap4做前端,有一行包括文字,下拉菜单select,按钮button三种元素,希望做出的效果是,文字左对齐,下拉菜单和按钮右对齐。 现在我把左边文字和右边下拉菜单按钮分别放到2个div中,再包一层带有form-inline的div,但是这种方法只能让两个子div左对齐,F12看了下发现form-inline带有display:flex属性,现在的效果是这样的 ![图片说明](https://img-ask.csdn.net/upload/201812/14/1544766003_336705.png) 但是我希望的效果是这样的 ![图片说明](https://img-ask.csdn.net/upload/201812/14/1544766177_95235.png) 目前的代码如下(代码里简洁起见select只保留了一个),请问该如何修改: ``` <div class="form-inline mx-4 border border-primary" style=""> <div> <label class="mx-2">{{unit_name}}</label> </div> <div class="border border-primary"> <select class="custom-select mx-2 select-userlist"> <option selected>用户类别</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <button class="btn btn-primary mx-2 button-userlist" > 搜索 </button> <button class="btn btn-primary mx-2 button-userlist" > 导出 </button> </div> </div> ```
样式错位,不知什么原因?
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .strap { font-size: 0; } .strap>* { display: inline-block; } .footer-content { height: 254px; } .footer-narrow_wrapper { width: 112px; height: 253px; } .footer-wide_wrapper { width: 357px; height: 253px; } .footer-qrcode_wrapper { width: 232px; height: 253px; } .footer-square { width: 110px; height: 110px; line-height: 110px; border: 1px solid black; font-size: 13px; color: rgb(128, 128, 128); text-align: center; } .footer-rectangle { width: 355px; height: 107px; border: 1px solid black; line-height: 110px; text-align: center; font-size: 18px; color: rgb(128, 128, 128); } .footer-qrcode { width: 230px; height: 230px; border: 1px solid black; font-size: 12px; color: rgb(51, 51, 51); } </style> </head> <body> <div class="footer-content content strap"> <div class="footer-narrow_wrapper"> <div class="footer-square">关于我们</div> <div class="footer-square">服务条款</div> </div> <div class="footer-narrow_wrapper"> <div class="footer-square">隐私政策</div> <div class="footer-square">帮助中心</div> </div> <div class="footer-wide_wrapper"> <div class="footer-rectangle">4000-987-805</div> <div class="footer-rectangle">help@renrenma.com</div> </div> <div class="footer-wide_wrapper"> <div class="footer-rectangle">3041507598</div> <div class="footer-rectangle">@人人码官方微博</div> </div> <div class="footer-qrcode_wrapper"> <div class="footer-qrcode"></div> </div> </div> </body> </html> ``` 元素的顶部不能对齐,搞不清楚是什么原因,谁能讲解下 就
extjs调用百度地图初始化失败,要二次加载
# extjs代码 ``` /* * 报警事项处理窗口 * yening 2015.2.7 * * paras.winTitle:窗口显示的标题 * paras.width:窗口宽度 * paras.height: * */ Ext.ns('Ext.ux.window'); Ext.ux.window.AlarmProcessWnd = function(paras) { var me = this; var xflwdwUrl = "./xflwdwInfo.do?reqCode=queryXflwdwInfoData";// 消防联网单位信息查询URl var xflwdwStaffUrl = "./xflwdwInfo.do?reqCode=queryXflwdwStaffData";// 消防联网单位人员信息查询URl var fireAlarmProcessUrl = "./fireAlarm.do?reqCode=updateAlarmProcessState";// 消防联网单位人员信息查询URl var processState = 0; var eventStore = null; // 初始化参数----------- Ext.applyIf(paras, { width : 1200, height : 460, winTitle : '' }); // 部门信息-------------- var deptStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : xflwdwUrl }), reader : new Ext.data.JsonReader({ totalProperty : 'TOTALCOUNT', root : 'ROOT' }, [ { name : 'deptid' }, { name : 'deptname' }, { name : 'address' }, { name : 'remark' } ]) }); deptStore.on("load", function(dStore) { deptPanel.getForm().loadRecord(dStore.getAt(0)); }) var deptPanel = new Ext.form.FormPanel({ id : 'deptPanel', height : 100, // title:'单位信息', // collapsible : true, name : 'deptPanel', defaultType : 'textfield', labelAlign : 'right', labelWidth : 80, frame : true, bodyStyle : 'padding:5 5 0', items : [ { fieldLabel : '单位名称', name : 'deptname', readOnly : true, allowBlank : true, anchor : '99%' }, { fieldLabel : '地址', name : 'address', allowBlank : true, readOnly : true, anchor : '99%' }, { fieldLabel : '说明', name : 'remark', allowBlank : true, readOnly : true, anchor : '99%' } ] }); // ---------------------部门人员信息-------------- var staffStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : xflwdwStaffUrl }), reader : new Ext.data.JsonReader({ totalProperty : 'TOTALCOUNT', root : 'ROOT' }, [ { name : 'name' }, { name : 'sex' }, { name : 'type' }, { name : 'phone1' }, { name : 'phone2' } ]) }); var staffCm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), { header : '姓名', dataIndex : 'name', width : 80 }, { header : '性别', dataIndex : 'sex', width : 40, renderer : SEXRender, sortable : true }, { header : '类型', dataIndex : 'type', width : 100, renderer : XFLWDWSTAFFTYPERender, sortable : true }, { header : '联系电话1', dataIndex : 'phone1', width : 150, sortable : true }, { header : '联系电话2', dataIndex : 'phone2', width : 200, sortable : true } ]); var staffGrid = new Ext.grid.GridPanel({ // title : "联系人", height : 120, // width: 800, autoScroll : true, region : 'center', margins : '3 3 3 3', store : staffStore, loadMask : { msg : '正在加载表格数据,请稍等...' }, stripeRows : true, frame : true, cm : staffCm }); // ----------------------事项处理Panel-------------------- var store = new Ext.data.SimpleStore({ fields : [ 'name', 'code', 'remark' ], data : [ [ '误报模板', '001', '该信息是误报,XXX' ], [ '确认模板', '002', '火情已确认,XXXX' ] ] }); var processMode = new Ext.form.ComboBox({ id : 'id_mode', hiddenName : 'processMode', fieldLabel : '处理模板', triggerAction : 'all', store : store, displayField : 'name', valueField : 'code', mode : 'local', forceSelection : true, typeAhead : true, resizable : true, anchor : '99%', emptyText : '请选择' }); processMode.on("select", function(combo, record) { var txt = Ext.getCmp("processText"); var remark = record.get("remark"); txt.setValue(remark); }); var processForm = new Ext.form.FormPanel({ name : 'processForm', // title : "火警处理", labelWidth : 80, // 标签宽度 frame : true, // frame : true, //是否渲染表单面板背景色 defaultType : 'textfield', // 表单元素默认类型 labelAlign : 'right', // 标签对齐方式 bodyStyle : 'padding:5 5 5 5', // 表单元素和表单面板的边距 items : [ processMode, { id : "processText", fieldLabel : '处理结果', name : 'processText', xtype : 'textarea', height : 80, // 设置多行文本框的高度 emptyText : '请填写处理结果相关内容', // 设置默认初始值 allowBlank : false, anchor : '99%' }, { id : "eventid", name : 'eventid', fieldLabel : '事件id', hidden : true, anchor : '99%' }, { id : "processstate", name : 'processstate', fieldLabel : '事件处理状态', hidden : true, anchor : '99%' } ] }); var eventItemPanel = new Ext.Panel({ layout : 'form', resizable : false, draggable : true, closeAction : 'hide', modal : true, titleCollapse : true, maximizable : false, buttonAlign : 'right', border : false, animCollapse : true, animateTarget : Ext.getBody(), constrain : true, items : [ deptPanel, staffGrid, processForm ], buttons : [ { text : '火警误报', iconCls : 'exclamationIcon', handler : function() { processEventFunction(1); } }, { text : '火警确认', iconCls : 'acceptIcon', handler : function() { processEventFunction(2); } }, { text : '转119', iconCls : 'userIcon', handler : function() { processEventFunction(3); } }, { text : '关闭', iconCls : 'deleteIcon', handler : function() { eventItemWindow.hide(); } } ] }); // -------------------------GIS页面----------------------- var GISPanel = new Ext.Panel( { collapsible : false, margins : '3 3 3 3', html : '<iframe id="gis" name="gis" src="app/fireAlarm/js/GIS.htm" width="100%" height="100%" frameborder=0 scrolling=auto></iframe>' }); // ----------------------------------------------事项处理窗口------------------- // --- var eventItemWindow = new Ext.Window({ title : paras.winTitle, layout : 'column', width : paras.width, height : paras.height, closable : true, // 是否可关闭 closeAction : 'hide', maximizable : true,// 最大化 animateTarget : Ext.getBody(), collapsible : true, // 是否可收缩 border : true, modal : true, resizable : false, draggable : true, titleCollapse : true, animCollapse : true, margins : '3 3 3 3', pageY : 20, pageX : 50, // pageX : document.body.clientWidth / 2 - 420 / 2, constrain : true,// 设置窗口是否可以溢出父容器 items : [ { collapsible : true, columnWidth : .3, AutoHeight:true, region : 'west', autoScroll : true, items : [ eventItemPanel ] }, { region : 'center', columnWidth : .7, items : [ GISPanel ] } ] }); this.getProcessState = function() { return processState; }; /** * 显示窗口 */ this.showWindow = function(grid) { var record = grid.getSelectionModel().getSelected(); eventStore = grid.store; processState = 0; if (Ext.isEmpty(record)) { Ext.MessageBox.alert('提示', '请先选中要查看的事项'); return; } var eventID = record.get("eventid");// 事件ID var deptID = record.get("deptid");// 部门ID var longitudeInfo = record.get("longitude"); var latitudeInfo = record.get("latitude"); deptStore.load({ params : { deptid : deptID } }); staffStore.load({ params : { deptid : deptID } }); processForm.getForm().reset(); eventItemWindow.show(); Ext.getCmp("eventid").setValue(eventID); window.frames['gis'].theLocation(longitudeInfo, latitudeInfo); } /** * 获得经度 * */ function longitude() { for (var i = 0; i < deptStore.getCount(); i++) { var longitudeRecord = deptStore.getAt(i); longitudeInfo = longitudeRecord.get('longitude'); return longitudeInfo; } } /** * 获得纬度 * */ function latitude() { for (var i = 0; i < deptStore.getCount(); i++) { var latitudeRecord = deptStore.getAt(i); latitudeInfo = latitudeRecord.get('latitude'); return latitudeInfo; } } /** * 事件处理 */ function processEventFunction(precessState) { if (!processForm.form.isValid()) { alert("请填写火警处理结果信息。。。。"); return; } update(precessState); } /** * 事件处理 */ function update(precessState) { var cmpProcessState = Ext.getCmp("processstate"); cmpProcessState.setValue(precessState); processForm.form.submit({ url : fireAlarmProcessUrl, waitTitle : '提示', method : 'POST', waitMsg : '正在处理数据,请稍候...', success : function(form, action) { eventItemWindow.hide(); eventStore.reload(); form.reset(); }, failure : function(form, action) { var msg = action.result.msg; Ext.MessageBox.alert('提示', '数据修改失败:<br>' + msg); } }); } } ``` ## 百度地图代码 ``` <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} #r-result{width:100%; font-size:14px;} .anchorBL { display: none;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WQOD7GtcqdZaEDDPVBqdqeYj"></script> <title>城市名定位</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> function initMap(longitudeInfo, latitudeInfo){ // 百度地图API功能 var new_point = new BMap.Point(longitudeInfo, latitudeInfo); var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new_point,14); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var marker = new BMap.Marker(new_point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 } var longitude = 116.331398; var latitude = 39.897445; initMap(longitude, latitude); // 用经纬度设置地图中心点 function theLocation(longitude, latitude) { initMap(longitude, latitude); } </script> ```
相见恨晚的超实用网站
搞学习 知乎:www.zhihu.com 简答题:http://www.jiandati.com/ 网易公开课:https://open.163.com/ted/ 网易云课堂:https://study.163.com/ 中国大学MOOC:www.icourse163.org 网易云课堂:study.163.com 哔哩哔哩弹幕网:www.bilibili.com 我要自学网:www.51zxw
花了20分钟,给女朋友们写了一个web版群聊程序
参考博客 [1]https://www.byteslounge.com/tutorials/java-ee-html5-websocket-example
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
字节跳动视频编解码面经
引言 本文主要是记录一下面试字节跳动的经历。 三四月份投了字节跳动的实习(图形图像岗位),然后hr打电话过来问了一下会不会opengl,c++,shador,当时只会一点c++,其他两个都不会,也就直接被拒了。 七月初内推了字节跳动的提前批,因为内推没有具体的岗位,hr又打电话问要不要考虑一下图形图像岗,我说实习投过这个岗位不合适,不会opengl和shador,然后hr就说秋招更看重基础。我当时
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
Python 基础(一):入门必备知识
目录1 标识符2 关键字3 引号4 编码5 输入输出6 缩进7 多行8 注释9 数据类型10 运算符10.1 常用运算符10.2 运算符优先级 1 标识符 标识符是编程时使用的名字,用于给变量、函数、语句块等命名,Python 中标识符由字母、数字、下划线组成,不能以数字开头,区分大小写。 以下划线开头的标识符有特殊含义,单下划线开头的标识符,如:_xxx ,表示不能直接访问的类属性,需通过类提供
这30个CSS选择器,你必须熟记(上)
关注前端达人,与你共同进步CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需...
国产开源API网关项目进入Apache孵化器:APISIX
点击蓝色“程序猿DD”关注我回复“资源”获取独家整理的学习资料!近日,又有一个开源项目加入了这个Java开源界大名鼎鼎的Apache基金会,开始进行孵化器。项目名称:AP...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
编写Spring MVC控制器的14个技巧
本期目录 1.使用@Controller构造型 2.实现控制器接口 3.扩展AbstractController类 4.为处理程序方法指定URL映射 5.为处理程序方法指定HTTP请求方法 6.将请求参数映射到处理程序方法 7.返回模型和视图 8.将对象放入模型 9.处理程序方法中的重定向 10.处理表格提交和表格验证 11.处理文件上传 12.在控制器中自动装配业务类 ...
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
求小姐姐抠图竟遭白眼?痛定思痛,我决定用 Python 自力更生!
点击蓝色“Python空间”关注我丫加个“星标”,每天一起快乐的学习大家好,我是 Rocky0429,一个刚恰完午饭,正在用刷网页浪费生命的蒟蒻...一堆堆无聊八卦信息的网页内容慢慢使我的双眼模糊,一个哈欠打出了三斤老泪,就在此时我看到了一张图片:是谁!是谁把我女朋友的照片放出来的!awsl!太好看了叭...等等,那个背景上的一堆鬼画符是什么鬼?!真是看不下去!叔叔婶婶能忍,隔壁老王的三姨妈的四表...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
致 Python 初学者
欢迎来到“Python进阶”专栏!来到这里的每一位同学,应该大致上学习了很多 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言,从2009年开始单一使用 python 应对所有的开发工作,直至今天。回顾自己的学习过程,也曾经遇到过无数的困难,也曾经迷茫过、困惑过。开办这个专栏,正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下...
【管理系统课程设计】美少女手把手教你后台管理
【文章后台管理系统】URL设计与建模分析+项目源码+运行界面 栏目管理、文章列表、用户管理、角色管理、权限管理模块(文章最后附有源码) 1. 这是一个什么系统? 1.1 学习后台管理系统的原因 随着时代的变迁,现如今各大云服务平台横空出世,市面上有许多如学生信息系统、图书阅读系统、停车场管理系统等的管理系统,而本人家里就有人在用烟草销售系统,直接在网上完成挑选、购买与提交收货点,方便又快捷。 试想,若没有烟草销售系统,本人家人想要购买烟草,还要独自前往药...
8年经验面试官详解 Java 面试秘诀
作者 |胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。 Java程序员准备和投递简历的实...
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车?某胡同口的煎饼摊一年能卖出多少个煎饼?深圳有多少个产品经理?一辆公交车里能装下多少个乒乓球?一个正常成年人有多少根头发?这类估算问题,被称为费米问题,是以科学家费米命名的。为什么面试会问这种问题呢?这类问题能把两类人清楚地区分出来。一类是具有文科思维的人,擅长赞叹和模糊想象,它主要依靠的是人的第一反应和直觉,比如小孩...
碎片化的时代,如何学习
今天周末,和大家聊聊学习这件事情。 在如今这个社会,我们的时间被各类 APP 撕的粉碎。 刷知乎、刷微博、刷朋友圈; 看论坛、看博客、看公号; 等等形形色色的信息和知识获取方式一个都不错过。 貌似学了很多,但是却感觉没什么用。 要解决上面这些问题,首先要分清楚一点,什么是信息,什么是知识。 那什么是信息呢? 你一切听到的、看到的,都是信息,比如微博上的明星出轨、微信中的表情大战、抖音上的...
so easy! 10行代码写个"狗屁不通"文章生成器
前几天,GitHub 有个开源项目特别火,只要输入标题就可以生成一篇长长的文章。 背后实现代码一定很复杂吧,里面一定有很多高深莫测的机器学习等复杂算法 不过,当我看了源代码之后 这程序不到50行 尽管我有多年的Python经验,但我竟然一时也没有看懂 当然啦,原作者也说了,这个代码也是在无聊中诞生的,平时撸码是不写中文变量名的, 中文...
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的回答,对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalking,作者吴晟、刘浩杨 等等 仓库地址: apache/skywalking 更...
相关热词 c# 图片上传 c# gdi 占用内存 c#中遍历字典 c#控制台模拟dos c# 斜率 最小二乘法 c#进程延迟 c# mysql完整项目 c# grid 总行数 c# web浏览器插件 c# xml 生成xsd
立即提问