随笔分类 -  html/css

使用base64提升视觉效果体验
摘要：最近在做一个微信端的小项目，前端代码写完后，就放在手机端测试，没什么问题，但是页面在加载和渲染时的效果却让人有些不爽，虽然是个小项目，我大可不必做这些，但是看着页面的闪动，就忍不住想做些什么。 先说说问题吧： 上面是首页效果图，其实在最开始的时候并没有考虑web端，这图是给IOS和安卓native 阅读全文
posted @ 2017-07-06 15:30 Mcbai 阅读(1497) 评论(3) 推荐(4)
基于express+mongodb+pug的博客系统——pug篇
摘要：很久之前就想自己搭一个博客了，最开始用hexo+github，但是换电脑后总是有些麻烦。后来使用WordPress，但是用WordPress总觉得没什么技术含量，前后端都是人家写好的，而且买的垃圾虚拟机老是出问题，动不动就要提交工单解决，所以最后干脆就直接在博客园上写了。 最近比较闲，所以正好抽时间 阅读全文
posted @ 2017-05-14 17:35 Mcbai 阅读(1921) 评论(0) 推荐(0)
CSS属性之border
摘要：css的border属性相信大家都不陌生了，就是给元素加个边框嘛，在不同的盒模型下，会给元素的宽高带来怎样的影响，相信大家也都很熟悉了，这里就不再赘述，只说说大家平时没有怎么留意的东西。 0.border-color与color 大家平时使用border属性的时候，通常应该是直接写border:1p 阅读全文
posted @ 2017-02-25 16:41 Mcbai 阅读(452) 评论(0) 推荐(1)
CSS属性之attr()
摘要：attr()准确的说，不应该是一个属性，而是一个CSS的函数，我们先看看MDN上的介绍吧： Summary The attr() CSS function is used to retrieve the value of an attribute of the selected element an 阅读全文
posted @ 2017-02-13 17:52 Mcbai 阅读(851) 评论(0) 推荐(0)
CSS属性之margin
摘要：0.对自身可视宽度的影响 1>改变处于标准文档流中，未设置width值的block元素的可视宽度 在标准文档流中，对于没有设置宽度的block元素，当其具有内容或者设置高度后，其自身宽度为父元素宽度的100%，这个时候给block元素设置水平方向的margin值，就会改变元素的可视宽度。但是不能改变 阅读全文
posted @ 2017-02-10 17:39 Mcbai 阅读(510) 评论(0) 推荐(0)
CSS属性之padding
摘要：0.inline元素中的padding 大家都知道padding对于block元素和inline-block元素的影响，而对于inline元素，padding只会在水平方向产生影响，垂直方向不会产生影响。 这么说其实不准确，给inline元素设置垂直方向的padding，不会改变元素的高度，也不会影 阅读全文
posted @ 2017-02-08 14:42 Mcbai 阅读(349) 评论(0) 推荐(0)
CSS属性之relative
摘要：0.相对定位relative特点 相对定位relative元素总是会占据位置，所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置； 相对定位relative元素在设置定位时，不会影响其他元素； 相对定位relative元素在设置定位时，是相对于自身的定 阅读全文
posted @ 2017-01-28 23:36 Mcbai 阅读(696) 评论(0) 推荐(0)
CSS属性之absolute
摘要：0.脱离标准文档流 绝对定位的元素会脱离标准文档流，拥有z-index属性，并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素，这里就不过多介绍。 不过值得注意的是，虽然绝对定位元素脱离的标准文档流，但是它依然会受到父元素影响哦，比如line-height和text-align属性等。 1. 阅读全文
posted @ 2017-01-16 18:30 Mcbai 阅读(862) 评论(0) 推荐(0)
css属性之float
摘要：0.float与margin 两个相邻的浮动元素，当第一个浮动元素（不论是左浮动还是右浮动）的宽度为100%时，第二个浮动元素会被挤到下面，通过添加负margin-right值（绝对值最少等于它自身的宽度），可以使它回到第一行。 在书写html代码时，我们通常的习惯根据UI样式，从左往右来写代码，但 阅读全文
posted @ 2017-01-08 22:12 Mcbai 阅读(537) 评论(0) 推荐(0)