随笔分类 - HTML
1
摘要：一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节的HTML模板一律如下。 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项
阅读全文
摘要：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 Webkit 内核的浏览器，必须加上-webkit前缀。 注意，设为 Flex 布局以后，子元素的float、clea
阅读全文
摘要：01.【负边距】💘负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似 02.【shape-outside】❤不要自以为是了。你以为自己是方的，在别人眼里你却是圆的 03.【BFC应用】💓BFC应用之阻止外边距合并（margin collapsing） 0
阅读全文
摘要：自己根据项目需要，把代码摘了出来 <div class="img-box"></div> 最终效果就是等比的四四方方的图标..... 参考原文：https://ruby-china.org/topics/17011
阅读全文
摘要：<style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {display:table;width:100%;table-layout:fixed;} table thead {w
阅读全文
摘要：active-class是哪个组件的属性？ vue-router模块的router-link组件。 嵌套路由怎么定义？ 在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。i
阅读全文
摘要：这里有超过20家的前端面试题，你确定不点进来看看？ 好吧，如果你看到这句话，你明显是点进来了。 那么恭喜你，接下来我就和你们分享一下，近期我收集到的各个公司的面试题。 本文为作者原创，转载请告知作者并取得同意方可转载。 违者作者保留法律追究权利。 ## 2. 正文 闲话就不扯了，直接开始分享。 ##
阅读全文
摘要：说在前面 工作中会遇到很多需要使用富文本编辑器的地方，比如我现在发布这篇文章离不开这个神器，而且现在网上编辑器太多了。记得之前，由于工作需要自己封装过一个编辑器的公共插件，是用ckeditor改版的，目的是要兼容公司所有项目，使用方便。废话不多说，今天写这篇文章，一是总结自己学习复习，二是关于FTP
阅读全文
摘要：CSS架构 有趣的是，我们通常不这样评判其他语言。一个Rails开发者不会因为他写的代码规范就认为他是一个好的开发者。因为这是最基本的。当然它必须是满 足规范，除此以外还要考虑其他方面:代码是否有可读性？他是否容易修改或是拓展？他是否跟程序的其他部分解耦合？他是否可以扩展？ 当评估代码其他部分时这些
阅读全文
摘要：CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。C...
阅读全文
摘要：请尽量用xhtml格式写代码，而且DOCTYPE影响 CSS 处理，作为W3C标准，一定要加DOCTYPE声明。 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制...
阅读全文
摘要：细节1………………………………………………………………………………一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：记住密码二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：记住密码三、更改IE“查看源代码”菜单打开的编辑器 打开注册表编辑器,在开始-运行中输入regedit...
阅读全文
摘要：1.IE6双倍边距bug当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px， 而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug。2.3像素问题及...
阅读全文
摘要：人性化的细节处理例如：textarea 默认只能垂直拖动，防止宽度改变破坏布局。textarea { resize: vertical;}汉字字号小于 12px 不易阅读，为元素设置默认值为 12px。small { font-size: 85.7%; /* 12/14=0.857142...
阅读全文
摘要：如何清除图片下方出现几像素的空白间隙？方法1：img{display:block;}方法2：img{vertical-align:top;}除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的和值都可以方法3：#test{font-s...
阅读全文
摘要：目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想，不知大家还记不记得，题目：【PC网站前端架构探讨系列】结合公司网站首页，谈前端模块化开发与网站性能优化实践 。但是，仍然会存在
阅读全文
摘要：说在前面 上午给大家分享的个人认为比较全，比较官方，比较清晰的grunt使用教程，被挪出首页了，不过没关系，毕竟不是原创，大家想看，我现在贴出地址： http://www.cnblogs.com/sybboy/p/4877055.html 下面可是我自己的东西，算是这段时间搞前端架构的总结吧: 目录
阅读全文
摘要：安装 安装 Grunt基于Node.js，安装之前要先安装Node.js，然后运行下面的命令。 sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界面，参数g表示全局安装。 Grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应
阅读全文
摘要：方法一：1 min-height:500px;/*解决ie8.9.ff.chromet*/2 height:100%;/*解决ie6.7*/3 _height:500px;/*解决ie6超出自动溢出*/View Code方法二：1 min-height:400px;/*解决ie8.9.ff.chro...
阅读全文
摘要：今天整理系统，发现系统很多页面，只有在IE6下显示正常，其它的都不正常，很是奇怪。所以上网找了一些关于浏览器兼容的问题和解决办法，在此我觉得大牛们总结的比较精彩，分享给网友们！ 一、CSS兼容以下两种方法几乎能解决现今所有兼容.1, !important (不是很推荐，用下面的一种感觉最安全) 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)代码: <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 *
阅读全文
1
