随笔分类 - HTML/CSS
摘要：介绍 "Ayer" 是一个干净且优雅的Hexo主题，自带响应式，加载速度很快，该有的功能都有，可配置项也很多，非常适合作为你的博客主题，主题内还附送了6张精美的高清壁纸。欢迎使用和Star支持，如果你在使用过程中有任何疑问或者建议，欢迎联系我！ "项目地址" "效果预览" "中文说明" 特性 干净且
阅读全文
摘要：前几天做一个移动端的页面，要加个像微信那样附着在底部的回复框，按照做PC端网页的思路，首先是用fixed，在安卓上测了一下是好的，结果到同事的iphone6p上就不行了，点击输入框之后它总会跳到屏幕中间去。 后来才知道这是ios下一个普遍的bug，所以我决定把原因和解决方案整理一下，以方便后...
阅读全文
摘要：对一名前端来说，改页面的过程总是痛苦的，产品经理说要加个点击样式，于是加active的class，本来以为这样就OK了，没想到电脑上ok，本地测也是ok的，tomcat上一跑就没效果了。我甚至把! important也加上去了也没效果，于是就网上寻找答案，以下列出2种亲测有效的解决方法。一个方法是把...
阅读全文
摘要：最近在工作中遇到这个问题了，网上找了一些解决方案，全都试了一遍，有些没用有些有用，在此把靠谱的方法写出来。一.div模拟textarea以实现高度自适应CSS代码：.test_box { width: 400px; min-height: 120px; max-height: ...
阅读全文
摘要：最近网页布局中遇到得比较多，所以打算总结总结。word-wrap:1.normal（使用浏览器默认的换行规则） 2.break-word（内容将在边界内换行，但是英文换行会按词断句）word-break:1.break-all（无论中英文都可以直接在单词内断句）2.keep-all（只能在半角空格或...
阅读全文
摘要：如果想要撑开父元素可以采用以下方法：方法一：父元素设置overflow以及zoom，样式如下：1方法二：父元素也是设置浮动效果，样式如下：1此方法有个缺陷是，父元素的宽度需要设置。方法三：在添加一个子元素，并设置clear样式：12two3one45此方法添加了一个div元素，有些情况下可能这个di...
阅读全文
摘要：一些常用快捷键Ctrl + N-------------------新建Ctrl + F-------------------查找Ctrl+Shift +k -----------删除一行Ctrl+Shift +D -----------复制并增加一行Ctrl + H ---------------...
阅读全文
摘要：昨天晚上花了1个小时把慕课网上的PS切图教程看了一遍，发现之前用的切图方式有点low，还学习到一些设置技巧，在此记录。1.新建页面，背景内容设置为透明，自动选择不用打勾，后面的框选图层，这样按住ctrl鼠标点击就能快速找到对应图层2.标尺和智能参考线都打上勾3.历史记录，图层，信息，字符4个面板都打...
阅读全文
摘要：这是我自己在仿腾讯首页时遇到的布局问题，在此记录，如果有错，欢迎指正。首先是对齐问题，可以把父div的高度设置为0，然后调整padding值，这样可以批量调整子div们和其他父div的相对高度。这是父div的样式.loginicon { width: 1000px; height: 0p...
阅读全文
摘要：转自这里，收藏备用。不建议用了。text-align:center在父容器里水平居中 inline 文字，或 inline 元素vertical-align:middle垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效...
阅读全文
摘要：公司在做环形进度条的时候遇到了这个问题，上网一搜，原来是因为两个div背景图拼接起来的，所以中间出现了必不可少的缝隙，最后把position改为relative,再加个margin：0，就解决好了，下图为前后的截图对比。
阅读全文
摘要：用的时候首先记得加前缀：-webkit-，-moz-，-o-，-ms-，因为目前各个浏览器对CSS3和HTML5的兼容性还是参差不齐。边框：1.border-radius(实心圆的实现)2.box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式](...
阅读全文
