-
php网页输入密码才能访问里面的内容 密码对,就可以看到指定内容, 密码不对就进不去；首次打开和关闭浏览器重新打开 都需要输入密码才可以访问，具体代码如下： <?php //输入密码后访问本页内容$password = "123456";//这里是密码 $p = "";if(isset($_COOKIE["isview"]) and $_COOKIE["isview"] == $password){ $isview = true;}else{ if(isset($_POST["pwd"])){ if($_POST["pwd"] == $password){ setcookie("isview",$_POST["pwd"],time()+3600*3);$isview = true;}else{$p = (empty($_POST["pwd"])) ? "需要密码才能查看，请输入密码。" : "<div style=\"color:#F00;\">密码不正确，请重新输入。</div>";} }else{$isview = false;$p = "请输入密码查看，获取密码可联系我。";}}?><?php if($isview){?><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>起点终站提醒你输入密码</title><style type="text/css">body{background:none;}.passport{width:400px;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-55px;font-size:18px;text-align:center;line-height:30px;color:red;}</style></head><body><div class="passport">恭喜你！密码输入正确</div></body></html> <?php }else{?><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>起点终站提醒你输入密码</title> <style type="text/css">body{background:none;}.passport{border:1px solid red;background-color:#FFFFCC;width:400px;height:100px;position:absolute;left:49.9%;top:49.9%;margin-left:-200px;margin-top:-55px;font-size:14px;text-align:center;line-height:30px;color:#746A6A;}</style></head><body><div class="passport"><div style="padding-top:20px;"> <form action="" method="post" style="margin:0px;">输入查看密码 <input type="password" name="pwd" /> <input type="submit" value="查看" /> </form> <?php echo $p;?> </div></div> </body></html> <?php }?> - 2019新版前端与移动开发学习路线图（视频+工具+书籍+资源） 更新日志2018年12月20日，前端与移动开发大纲知识点及配套工具，进行更新；2019年1月21日，前端与移动开发学习路线图配套资源进行更新，删减不完整商城资源，新增大纲配套资料；写在前面：（本帖干货较多耐心阅读收获颇丰，图片点击可放大）传智播客黑马程序员作为一个IT学习平台，历经13年的成长，免费分享视频教程长达10万余小时，累计下载量超3000万次，受益人数达千万。2019年我们不忘初心，继续前行！路线图的宗旨就是分享，专业，便利，让更多想要学习IT的人都能系统的学习！从今天起不要再找借口，不要再说想学却没有资源，赶快行动起来，前端与移动开发等你来探索，高薪距你只差一步！注：新版前端与移动开发学习大纲于2018年12月20日完成升级，本学习路线图依据最新升级后的规划制作！一、2019新版前端与移动开发学习路线图---每阶段可掌握的能力及各阶段覆盖的关键字 点击可看高清大图 二、2019新版前端与移动开发学习路线图---学习大纲及各阶段知识点 点击可看高清大图 三、2019新版前端与移动开发学习路线图--升级后新增知识点设计理念 四、2019新版前端与移动开发学习路线图---各阶段配套视频推荐 2019年前端与移动开发学习各阶段配套视频推荐 所处阶段 配套教程 网盘链接 第一阶段HTML5&CSS3 html5 http://pan.baidu.com/s/1jIcd84e css3 京东页面开发 https://pan.baidu.com/s/1pLlRwDl 第二阶段：移动 Web 网页开发 H5C3 进阶 https://pan.baidu.com/s/1dxkr9s 移动端开发 https://pan.baidu.com/s/1d3nxxW 第三阶段：JavaScript 网页编程 JavaScript基础 https://pan.baidu.com/s/1nwoDKHN Javascript基础加强视频 https://pan.baidu.com/s/1skDXr6t Web APIs编程 待更新 JavaScript高级 https://pan.baidu.com/s/1o8POXKm jQuery快速开发 https://pan.baidu.com/s/1hrM3Vta#list/path=%2F jquery进阶实用教程 https://pan.baidu.com/s/1R9yoQYINJ4JVogTCPlISjQ 第四阶段：Node.js 与 AJAX Node.js 基础 https://pan.baidu.com/s/1hZ2FBzvES_Toz6SgW0t-AA AJAX 编程 https://pan.baidu.com/s/1miXNrtQ#list/path=%2F 阿里百秀项目 待更新 第五阶段：前端框架实战 webpack 待更新 大数据可视化 待更新 Vue.js 基础 https://pan.baidu.com/s/1bUdzAkPVHJrJPcBuOgKpgA Vue.js 项目 待更新 React.js 基础 https://pan.baidu.com/s/132sHEVZRF40Dx8l7irrmgw React.js 项目 待更新 第六阶段：微信小程序 + 小游戏 人工智能 待更新 人工智能案例：啪啪测颜值 待更新 微信小程序开发 https://pan.baidu.com/s/162KQbsiytuj35mEgZLF08g 小程序项目：黑马优购商城 待更新 Canvas 待更新 小游戏开发 待更新 小游戏项目：飞机大战 待更新 五、2019新版前端与移动开发学习路线图---配套工具篇所用软件（2018.12.20更新） 工具篇-学前端所用软件（学前端必备软件全都有） 资源名称 百度网盘一键下载 密码 Chrome浏览器 https://pan.baidu.com/s/1G2HyBdIzHIq_EFmACRANtg 360f 简易版编辑器Sublime https://pan.baidu.com/s/1lmqLOtFkKGmkxNaIGEQjSg lug4 WebStorm编辑器 https://pan.baidu.com/s/19siWkfpC2ha9wj5t9RGN6g iopd Visual Studio Code编辑器 https://pan.baidu.com/s/1J0AuxhzltdYwdPkhHdGsGg niz6 PS https://pan.baidu.com/s/19TlbxU7rQRHYmUYiGP3m2A 3mtu MarkMan https://pan.baidu.com/s/1mP_t4_RqoHVZZeuvW0g4Eg xi6z Adobe Fireworks CS6 Ansifa精简版 https://pan.baidu.com/s/17IvXzXvnjpAYOiyFBFkRDQ 1865 X-mind https://pan.baidu.com/s/1c049MlsG7ZA5qbq1DZezzQ awe2 Typora https://pan.baidu.com/s/1Nb36Lpg_S3OWnWBZ9pGKBw uczh Git开源的分布式版本控制系统 https://pan.baidu.com/s/1EOjCMziILtitm_MVFx781g nrvf GitLab https://pan.baidu.com/s/1Ea8TXe68VAsylOo7_UZe2g f1yw SVN https://pan.baidu.com/s/1s7S7YvHOi7J1G6LhEcZhYQ ql19 集成环境软件WampServer https://pan.baidu.com/s/1BLS4J6FOnDb2KdaUKONmIw tboh MySQL https://pan.baidu.com/s/1yq6WSQVZIXbu07U-Vi0VMg g2em Navicat https://pan.baidu.com/s/1JGc-fiURzWjZu0Nr9IZ_BA ashb phpStudy https://pan.baidu.com/s/1yCInenpqIOuPDddLc9KK_A jvf1 Node.js https://pan.baidu.com/s/17v3plvLsZ2O8j6O9MfNEOg ojx0 微信开发者工具 https://pan.baidu.com/s/1FiyYMwIppYXKFb-sHH4moA wr9c Postman https://pan.baidu.com/s/1MfNllXqvkV8FHpsswfJIIg djes Httpwatch https://pan.baidu.com/s/1fvQjpNKjUwhdwfimbL4P0Q 6pjh 六、工具篇-学前端所用手册及书籍（学前端必备手册全都有）（2018.11.20更新） 工具篇-学前端所用手册及书籍（学前端必备手册全都有） 资源名称 百度网盘一键下载 密码 html手册 https://pan.baidu.com/s/1idtCfccls7G74it4hzBLCg mdv0 css手册 https://pan.baidu.com/s/1rlWo-DLNw_u9Nu7tuflw1A gg6z Javascript手册 https://pan.baidu.com/s/1SnTDwePBv9TnMqwrZ7o8KA wxtt DOM手册 https://pan.baidu.com/s/1BS6krawx3TuBg-XRKRxbKg rc8a Jquery手册 https://pan.baidu.com/s/18CvsJRGxJaeTliZLsHYcvw myyk W3Cschool手册 https://pan.baidu.com/s/19TS07KPax6WDg73gtWhO7Q jm9v CSS权威指南 https://pan.baidu.com/s/15X5WgWnMErMm9LFlG6JiXQ m6d6 深入浅出JavaScript https://pan.baidu.com/s/1JHxbzxdpmKkqwFzLLS2xUQ v58l JavaScript语言精粹 https://pan.baidu.com/s/1_6C0nACXBdNN-kgSccs2tw mbmg JavaScript权威指南(第6版)(中文版) https://pan.baidu.com/s/1c98GsUvxXUXkSgN88G5Lrg uv7g JavaScript高级程序设计(第3版) https://pan.baidu.com/s/1Lt2wejs_1xmPyJ7DNpOnzg hrab JQuery权威指南 https://pan.baidu.com/s/1MV0UgAdxiZl7kg29zkbUpg wi3w JQuery源码详细中文注释 https://pan.baidu.com/s/1mXXe2pKKOyPUN8HPtn7Fxw t81t 《锋利的jQuery》(高清扫描版) https://pan.baidu.com/s/1I_Hz1fWRjf_zZRoFCupZ1g 77kf 精通正则表达式 https://pan.baidu.com/s/1qlZjzsy3d9Be-OlZks_RbQ 64o3 Ajax从入门到精通 https://pan.baidu.com/s/1Op6ahC_QDbDDgHLqPkEBPg ef58 html5权威指南 https://pan.baidu.com/s/1DaiTFbZdX4CG5iE40xvhZw yo6k HTML5高级程序设计 https://pan.baidu.com/s/1C95diPzFb4uAZvFku04dOQ fzor HTML5 WebSocket权威指南 https://pan.baidu.com/s/134K5_0oR7PTM8WdDL1LM2w y6s4 Node.js的深入浅出 https://pan.baidu.com/s/1BenCZfyA-ZL0KG6xD_UrKg 5nx7 Node.js开发指南 https://pan.baidu.com/s/1_dXs3LZtjq1QmjCBNxoePQ pprw AngularJS权威教程 https://pan.baidu.com/s/17MS_bMEg0WlpVZPu1Ha3eg nx7u Vue.js权威指南 https://pan.baidu.com/s/1iIGJ7qEOXRJIkOy2ERds7w scbz 七、技术篇-前端项目源码：前端案例和 demo 源码（2018.11.20更新） 技术篇-前端项目源码（前端案例和 demo 源码） 资源名称 百度网盘一键下载 密码 jQuery的仿淘宝商品展示 https://pan.baidu.com/s/1ueQx7A6F2M8J_uMnkuZMFA n5bf jQuery的图片放大展示 https://pan.baidu.com/s/1L2bF26aNsQT5Tr4XNwPxvQ vck7 TodoMVC（js、vue、angular） https://pan.baidu.com/s/1SFHmODL0QNfkYcETAiP8cw umm9 vue留言板 https://pan.baidu.com/s/1cgYjllMZOUXJzROB6AbSuQ 5xy7 品优购电商项目静态页面 https://pan.baidu.com/s/1Lx6jaGYUrkLoR9MY8xHyDg 8p1z vue 后台管理系统 https://pan.baidu.com/s/1dIgJ3JGnDNyWoxAydT4JFA 2aax 微信小程序（TodoMVC 等5个源码） https://pan.baidu.com/s/14FlO31H-gBDT4QTxfbLIkg 9avl React_爱租房 https://pan.baidu.com/s/18YBx5vNDfj44lA4vqXPEbw ge8o React实战项目_cNode https://pan.baidu.com/s/1G3iwLuuDQ0fkEqyT-clDSg rs08 换肤效果 https://pan.baidu.com/s/1Rr1RlHXimSwGnVmrOC8Lcw i6wa 京东商品展示效果 https://pan.baidu.com/s/1OcrkijBSekqPVuAyheN4QQ a3s3 tab栏切换 https://pan.baidu.com/s/1d8Aqt6So3w4W2fvlgJ-Z5g gl51 全选反选 https://pan.baidu.com/s/1-hoUGytf1HX4qxpm-MPsUw hjo2 鼠标跟随 https://pan.baidu.com/s/1P54qvBdAuQLs8x3kcXLBow xe2a 轮播图 https://pan.baidu.com/s/1kgsiYnsVk4wF4vhb4Cz1eg Tktk 放大镜效果 https://pan.baidu.com/s/1QAxfT7qx5-mYkVnQOYT1Qw u2mr 手风琴效果 https://pan.baidu.com/s/1-1IWgRrDQxB3HuWE94seBQ zci1 延时触发图片展示 https://pan.baidu.com/s/1X6_a1QujZCFgbhLMzABhiw 8ifo 拖拽排序 https://pan.baidu.com/s/1NuF1Pio4vpbu589N_nViwg wqr0 旋转木马 https://pan.baidu.com/s/19BYMzmTOXhSkgLHDmPVehg uroh 九、2019年前端与移动开发学习面试题推荐篇 序号 简单介绍 题型介绍 试题链接 1 100IT 名企前端面试真题 面试题，问答题 点击查看 2 面试题 面试题 点击查看 3 简历模板 简历模板 点击查看
- 电脑提速宽带加速 清理电脑垃圾清理方法 一、每天关机前清洗，步驟如下： 1、双击“我的电脑” 2、右键点C盘 3、点“属性” 4、点“磁盘清理” 5、点“确定” 6、再点“是” 7、再点“确定”。 8、清理过程中，您可看得到未经您许可（您可点“查看文件”看，就知道了）进来的“临时文件”被清除了，盘的空间多了。对D，E，F盘也用此法进行。 二、随时进行清理，步驟如下： 1、打开网页 2、点最上面一排里的“工具” 3、点“Internet选项” 4、再点中间的“Internet临时文件”中的“删除文件” 5、再在“删除所有脱机内容”前的方框里打上勾 6、再点“确定” 7、清完后又点“确定”。 8、这样，可为打开网页和空间提速 三、一星期进行所有盘的垃圾清理，步驟如下： 1、点“开始” 2、用鼠标指着“所有程序” 3、再指着“附件”， 4、再指着“系统工具” 5、点“磁盘粹片整理程序” 6、点C盘，再点“碎片整理”（这需要很长时间，最好在您去吃饭和没用电脑时进行。清理中您可看到您的盘里的状况，可将清理前后对比一下） 7、在跳出“清理完成”后点“关闭”。 8、按上述方法，对D，E，F盘分别进行清理。 四、给宽带加速，一分钟学会释放电脑保留的20%宽带资源。步驟如下： 1、单击“开始——运行”，输入gpedit.msc回车后即可打开“组策略对象编辑器”。 2、展开“计算机配置——管理模板——网络——QoS数据包计划程序”，双击右面设置栏中的“限制可保留带宽”，在打开的属性对话框中的“设置”选项卡中将“限制可保留带宽”设置为“已启用”，然后在下面展开的“带宽限制（％）”栏将带宽值“20”设置为“0”即可。 3、修改完之后，我们可重新打开IE浏览器或者用BT或迅雷下载文件，发现上网和下载的速度明显提升。此项修改对XP和VISTA均有效。
-
-
- H5如何布局？入门篇… H5布局如何下手？ 所谓H5布局，说简单点，就是用H5特有的新标签（语义化）来替代传统布局方式。几点注意如下： 1）css写法不变，比如你定义标签，那css里就要这样写header{}。另外，H5标签也是可以加class或id的，css写法没啥区别，比如，.样式名{} #样式名{}； 2）移动端网站H5标签（包括css3）是支持的，放心大胆去弄，不要去考虑狗屁的兼容。如果是单纯PC网站，建议传统div方式布局比较合适； 3）响应式网站，技术强迫症，必须要用H5来做，那html5shiv.js或modernizr.js是不错的IE兼容解决方案。（比如李勇的小拼sem博客）。注意：ie8以下是没办法的，可以页面顶部弹出提醒升级你的IE，算友好体验的一部分吧。 4）关于bootstrap，感兴趣的同学快上手吧，老外的东西，不得不承认，真TM是NB轰轰的。标准、标准、太标准了。 H5布局标签如何选择？ 个人理解，傻瓜式解释。要是看不懂，说好的一筐豆腐呢？ 全局： <header><header>：相当于<div class="header"></div> <footer></footer>：相当于<div class="footer"></div> <section></section>：相当于<div></div>，以前习惯的div改为section，当然你继续用div也一样 <aside></aside>：相当于<div class="sidebar"></div>，比如常见的侧边栏 导航或者分页： <nav></nav>：<div class="nav"><ul></ul></div> 文章、帖子或者其它独立的页面： <article></article>:相当于<div class="article"></div> <time></time>：日期时间什么的放里面就好了，相当于<div class="time">2016-05-21 15:43:21</div>，支持pubdate属性，表示为发布日期 <summary></summary>：标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。<details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details> 其它新标签： <audio></audio>：标签定义声音，比如音乐或其他音频流。HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio> <video></video>：标签定义视频，比如电影片段或其他视频流。<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video> <source>：标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio> <datalist></datalist>：标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。 <figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。<figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>（是不是类似dl dt dd） <mark></mark>：主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。传统如<span></span> <hgroup></hgroup>：标签用于对网页或区段（section）的标题进行组合。 H5还有很多新标签，一般你也用不着，感兴趣去度娘啊。上面这些常用的你能搞通了，基本做个标准H5页面是问题不大的。 H5布局传统标签还能用吗？ 答案是肯定的，比如em、i、span、ul、li、p、pre这些常用的传统标签，一样可以在H5页面中正常使用。不要钻牛角尖，H5布局只是引入了新的语义化标签，并不意味着它就是全部。
- HTML5 CSS3旋转放大特效代码 <style>.a{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; width:200px; height:200px; background-color:#000000; display:block; margin:100px auto; color:#fff; text-align:center; line-height:200px; font-size:20px; font-weight:bold;}.a:hover { transform:rotate(360deg) scale(1.2); -webkit-transform:rotate(360deg) scale(1.2); -moz-transform:rotate(360deg) scale(1.2); -o-transform:rotate(360deg) scale(1.2); -ms-transform:rotate(360deg) scale(1.2);}</style></head><body><a class="a">旋转放大</a>
- 快速开发CSS的利器 - less 嵌套规则 快速开发CSS的利器 - less 嵌套规则 less 嵌套规则 嵌套，在我们HTML代码中一直都在使用，如div中的p元素等，对于我们样式的书写，需要使用div p {} 进行样式的指定，这也就是我们的后代选择器。不过写过项目的人都知道，为了防止样式的覆盖，每种选择器都是一大长串，写起来很麻烦~ less利用嵌套的书写方式，让我们在写后代选择器的时候有了新的方法。原来后代选择器的书写方式： .arclist dl { padding: 10px 20px; border-bottom: 1px dotted #ccc;}.arclist dl:after { .common-clearfloat;}.arclist dt { float: left; width: 120px; height: 120px;}通过嵌套的方式书写样式的方法： .arclist { dl { padding: 10px 20px; border-bottom: 1px dotted #ccc; &:after { .common-clearfloat; } dt { float: left; width: 120px; height: 120px; } }}
- 自适应布局-布局神器display:table-cell 有时候我们需要让图片垂直水平都居中于某个元素，用常规写法比较复杂，但用table-cell则相对简单：DEMO3 随着时间的推进，ie6、ie7在中国浏览器市场的占有率越来越低的情况，我现在工作的团队，经过用户访问数据，得知ie6、ie7的用户已经非常少的前提下，决定不在兼容ie6、ie7。正式在这个激动人心的决定后，让我对display:table-cell；这个属性有了更加深入的应用和理解。在ie8还必须兼容的pc端，它绝对是一个现代的布局神器。 我并不喜欢用float来做布局，因为它触发的问题比较多，例如要清除浮动，元素浮动后还会导致该元素脱离文档流，即使你清除float，该元素依旧是脱离文档流。 在需要兼容ie6、ie7的时代我也尽量避免使用float来布局，左右布局能用display:inline-block;布局我就用它来布局，但是还是无法完全不使用它，很多布局例如需要靠左和靠右的布局场景下就没办法不去使用float来布局。我现在切页面很少会去在ie下查看效果，大部分是通过chrome来进行调试的，等整个页面切好了，再用ie过一遍页面，大部分时候页面是没什么太多兼容问题，这或许多年来工作累积的经验使我写代码时避开了一些兼容坑，也可能是自己对盒模型摸索许久以来的一些经验。 废话不多说，下面直接看demo例子，好可以快速爱上display:inline-block; 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做： * { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.box { width: 100px; height: 100px; border: 1px solid #ccc; text-align: center; display: inline-block; font-size: 40px; line-height: 100px;}.right { text-align: right; display: table-cell}.left { text-align: left; <div class="content"> <div class="left"> <div class="box">B</div> </div> <div class="right"> <div class="box">A</div> </div></div>自动平均划分每个小模块，使其一行显示第二个案例我们先看看图： 遇到上面这种布局，一般会用float来做，或者把每个li设置成display:inline-block;来做，并且都要设置给他们设置一个宽度，而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来，如果li都设置成display:table-cell；就不会出现这种情况，即使不设置宽度他们也会在一行显示，你在加多一行他也不会掉下来，依旧会在一样显示。DEMO2 图片垂直居中于元素 有时候我们需要让图片垂直水平都居中于某个元素，用常规写法比较复杂，但用table-cell则相对简单：DEMO3 * { box-sizing: border-box;} .content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.img-box{ height: 150px; width: 100px; border:1px solid red; display: table-cell; vertical-align: middle; text-align: center; background-color:#4679bd;} <div class="content"> <div class="img-box"> <img src="http://xcxxxx/img/logo@2x.png" alt="logo" /> </div></div> 两box实现等高对齐 上图中的左侧的box的高度始终跟随右侧的box的高度变化而变化：DEMO4 * { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.img-box{ width: 100px; border:1px solid red; display: table-cell; vertical-align: middle; text-align: center; background-color:#4679bd;}.text-box{ margin-left: 20px; border: 1px solid #ddd; padding: 10px;} <div class="content"> <div class="img-box"> <img src="http://jsfiddle.net/img/logo@2x.png" width="70" alt="logo" /> </div> <div class="text-box"> <span>王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</span> </div></div> 上面的案例我故意不对右侧的box设置display:table-cell，只对左侧，所以就会出现左侧跟随右侧高度变化而变化，如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。 弹性、响应式布局 上面的demo中大家只要改变浏览器宽度就会发现他们其实都是会随高度变化自动变化高度的，其实上面内容我大部分没有设置绝对单位，即使设置了也只设置其中一个box另一个就让他去自适应父元素的剩余留下来的宽度，其实布局的时候设置宽度是一件很痛苦的事情，因为除了大量计算有时候可能在多浏览器下还算不准，可能你在chrome设好的宽度在ie下就坑爹了，要写hack才能解决。最后一个案例，据不靠谱的传言faceboox曾经也这么使用过：DEMO5 <div class="content"> <div class="left-box"> <img src="https://www.google.com.hk/images/srpr/logo11w.png" width="70" alt="logo" /> </div> <div class="right-box"> <span>王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</span> </div> </div> * { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.left-box { float:left; margin-right: 10px; padding-top:5px;} .right-box { display: table-cell; padding: 10px; border: 1px solid #ccc; margin-right: 10px; vertical-align: top;} 移动端布局因为有display:box这等属性，所以table-cell相对就排不上什么大用场，不过在移动端你要用table-cell也不是不可以，根据自己对属性的理解去使用就可以了。
-
- 实用的轻量级MySQL开源管理工具Adminer4.2 官方网站：https://www.adminer.org/ 服务器上一直用 phpMyAdmin 管理 MySQL 数据库, 有点囊肿, 配置也麻烦, 所以换了个轻量级的 Adminer 数据库管理替换. Adminer 就一个单文件, 知道什么就轻量级了吧, 但是功能却不比 phpmyadmin 弱多少, 看 Adminer 与 phpMyAdmin 的对比, 嘿嘿. 同样 Adminer 拥有超过 10 种语言版本, 15个主题样式的.. 挺丰富多彩的嘛. Adminer 一些常用的功能:1：创建，修改，删除索引/外键/视图/存储过程和函数。2：查询，合计，排序数据。3：新增/修改/删除记录。4：支持所有数据类型，包括大字段。5：能够批量执行SQL语句。6：支持将数据，表结构，视图导成SQL或CSV。7：能够外键关联打印数据库概要。8：能够查看进程和关闭进程。9：能够查看用户和权限并修改。10：管理事件和表格分区（MySQL5.1才支持）。好吧, 现在你可以扔掉 phpMyAdmin 了, 换上 Adminer 吧. 下载地址：https://yunpan.cn/cPvYMp7wDyX55（提取码：06ed）
- 这12行代码分分钟让你电脑崩溃手机重启 事情的起因是这样的，国外一哥们Cyber Security在推特上发了这么一条推文： 高能!这12行代码分分钟让你的电脑崩溃手机重启 神秘的12行代码 这哥们声称，如果你使用上述这段12行的JavaScript代码，就可以能让firefox、chrome、safari浏览器崩溃，而且还能让iphone重启，安卓手机闪退！ 网友们起初并不相信，于是继续在推特上深挖，发现另一小哥IT Security Tweets也发过类似的推文： 高能!这12行代码分分钟让你的电脑崩溃手机重启 依旧是这段代码 完整HTML代码如下： <html> <body> <script> var total=""; for (var i=0;i<1000000;i++) { total= total+i.toString(); history.pushState(0,0,total); } </script> </body> </html> 注意：前方高能！！ 注意：前方高能！！ 注意：前方高能！！ 如果光用说的你可能不信 所以再此附上demo 感(shou)兴(jian)趣的可以试试： http://www.0xroot.cn/demo.html(注意:请保存浏览器正在运行的编辑内容或任务！) 点开后会发生什么？反正我的第一反应是这样的： 高能!这12行代码分分钟让你的电脑崩溃手机重启 简直瞎了我的眼！ 如果你是PC端用户，点开链接以后，电脑CPU内存极有可能一路狂飙直至浏览器崩溃卡死... 如果你是移动端（安卓、iPhone）用户，点开链接以后你的浏览器会闪退！在微博、微信点开链接也同样会闪退。 为什么会发生此现象呢？对此我在知乎上找到了一位名为“小米”的大神解答： history.pushstate()是HTML5引入的API，pushState将指定的URL添加到浏览器历史里,存储当前历史记录点。 当 i<100000 的时候会循环的将 total记录到浏览器历史里面，重复多了，浏览器就承受不住了，自然就崩了。 好吧，反正对于连“hello world”都不会编的我，是一点也看不明白...总之牛气炫酷吊炸天就对了！
- 【网站建设】超清爽的几款CSS网页配色方案 .style1{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #96C2F1;background-color: #EFF7FF}.style2{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #9BDF70;background-color: #F0FBEB}.style3{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #BBE1F1;background-color: #EEFAFF}.style4{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CCEFF5;background-color: #FAFCFD}.style5{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #FFCC00;background-color: #FFFFF7}.style6{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #92B0DD;background-color: #FFFFFf}.style6 h5{margin: 1px;background-color: #E2EAF8;height: 24px;}.style7{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #A9C9E2;background-color: #E8F5FE}.style8{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #E3E197;background-color: #FFFFDD}.style9{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #ADCD3C;background-color: #F2FDDB}.style10{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #F8B3D0;background-color: #FFF5FA}.style11{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #D3D3D3;background-color: #F7F7F7}.style12{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #BFD1EB;background-color: #F3FAFF}.style13{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #FFDD99;background-color: #FFF9ED} .style14{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CACAFF;background-color: #F7F7FF} .style15{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #A5B6C8;background-color: #EEF3F7}.style16{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CEE3E9;background-color: #F1F7F9 -------------------------------------------------------------------------.style1{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #96C2F1;background-color: #EFF7FF}.style2{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #9BDF70;background-color: #F0FBEB}.style3{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #BBE1F1;background-color: #EEFAFF}.style4{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CCEFF5;background-color: #FAFCFD}.style5{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #FFCC00;background-color: #FFFFF7}.style6{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #92B0DD;background-color: #FFFFFf}.style6 h5{margin: 1px;background-color: #E2EAF8;height: 24px;}.style7{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #A9C9E2;background-color: #E8F5FE}.style8{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #E3E197;background-color: #FFFFDD}.style9{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #ADCD3C;background-color: #F2FDDB}.style10{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #F8B3D0;background-color: #FFF5FA}.style11{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #D3D3D3;background-color: #F7F7F7}.style12{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #BFD1EB;background-color: #F3FAFF}.style13{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #FFDD99;background-color: #FFF9ED} .style14{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CACAFF;background-color: #F7F7FF} .style15{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #A5B6C8;background-color: #EEF3F7}.style16{width: 800px;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CEE3E9;background-color: #F1F7F9}
- Bootstrap用户界面架构视频教程 Twitter Bootstrap是Twitter的架构师出口的一个前端框架利器，好得我都无法来形容它，如果你没有什么艺术细胞，又想快速做出自己的网站（或者移动 应用），Bootstrap绝对是你不错的选择。通过Twitter工程师的努力，你可以很轻松的使用Bootstrap做出漂亮的前端界面，而不再需要 你学习CSS以及Javascript。 教程内家有：第1讲：Bootstrap用户界面与交互架构 http://www.icoolxue.com/play/1254第2讲：下载Bootstrap http://www.icoolxue.com/play/1255第3讲：包含Bootstrap文件 http://www.icoolxue.com/play/1256第4讲：在网页中使用 Bootstrap http://www.icoolxue.com/play/1257第5讲：Bootstrap布局 http://www.icoolxue.com/play/1258第6讲：Bootstrap嵌套布局与流动布局 http://www.icoolxue.com/play/1259第7讲：Bootstrap响应式布局 http://www.icoolxue.com/play/1260第8讲：Bootstrap把已有的固定宽度布局转换成响应式布局 http://www.icoolxue.com/play/1261第9讲：Bootstrap响应式布局的实用类 http://www.icoolxue.com/play/1262第10讲：Bootstrap常用标签与样式 http://www.icoolxue.com/play/1263第11讲：Bootstrap列表 http://www.icoolxue.com/play/1264第12讲：Bootstrap代码 http://www.icoolxue.com/play/1265第13讲：Bootstrap Google Prettify http://www.icoolxue.com/play/1266第14讲：Bootstrap表格 http://www.icoolxue.com/play/1267第15讲：Bootstrap表单 http://www.icoolxue.com/play/1268第16讲：Bootstrap文本框的前缀与后缀 http://www.icoolxue.com/play/1269第17讲：Bootstrap单选按钮 http://www.icoolxue.com/play/1270第18讲：Bootstrap复选框 http://www.icoolxue.com/play/1271第19讲：Bootstrap选择列表 http://www.icoolxue.com/play/1272第20讲：Bootstrap表单的排版 http://www.icoolxue.com/play/1273第21讲：Bootstrap按钮 http://www.icoolxue.com/play/1274第22讲：Bootstrap按钮群组 http://www.icoolxue.com/play/1275第23讲：Bootstrap带下拉菜单的按钮 http://www.icoolxue.com/play/1276第24讲：Bootstrap导航菜单 http://www.icoolxue.com/play/1277第25讲：Bootstrap导航菜单的响应式设计 http://www.icoolxue.com/play/1278第26讲：Bootstrap选项卡(1) http://www.icoolxue.com/play/1279第27讲：Bootstrap选项卡(2) http://www.icoolxue.com/play/1280第28讲：Bootstrap导航路径与分页器 http://www.icoolxue.com/play/1281第29讲：Bootstrap提示信息 http://www.icoolxue.com/play/1282第30讲：Bootstrap缩略图 http://www.icoolxue.com/play/1283第31讲：Bootstrap对话框 http://www.icoolxue.com/play/1284第32讲：Bootstrap导航菜单里的下拉菜单 http://www.icoolxue.com/play/1285第33讲：Bootstrap工具提示 http://www.icoolxue.com/play/1286第34讲：Bootstrap折叠内容 http://www.icoolxue.com/play/1287第35讲：Bootstrap旋转木马 http://www.icoolxue.com/play/1288