摘要: 相对定位: 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值。 并且我们发现当相对定位元素进行位移后,表面来看已经脱离了文本流,但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高。 绝对定位: 相对定位只可以在文本流中进 阅读全文
posted @ 2018-06-12 19:48 高圈圈 阅读(448) 评论(0) 推荐(0) 编辑
摘要: 响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度。 阅读全文
posted @ 2018-06-12 17:13 高圈圈 阅读(874) 评论(0) 推荐(0) 编辑
摘要: 流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值。 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比。 两种解决办法: 1)width:calc(20% - 4px) 2)width:20%; box-sizing:border-box box-sizing这个属性能够改变盒子尺 阅读全文
posted @ 2018-06-12 16:34 高圈圈 阅读(535) 评论(0) 推荐(0) 编辑
摘要: 今天做了好多小东西,还挺开心的~ 成品展示: 是不是还萌萌哒~ 阅读全文
posted @ 2018-06-11 21:59 高圈圈 阅读(2345) 评论(1) 推荐(1) 编辑
摘要: 一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小。 效果展示:(感觉效果不是特别好,动作的连贯性还不够好,需要改改图片,偷个懒不改啦~) 阅读全文
posted @ 2018-06-11 21:20 高圈圈 阅读(1045) 评论(0) 推荐(1) 编辑
摘要: 觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg) 阅读全文
posted @ 2018-06-11 20:01 高圈圈 阅读(2506) 评论(0) 推荐(0) 编辑
摘要: 下了一个软件:ScreenToGif用来截取动态图片,终于可以展示我的小动图啦,嘻嘻,敲开心! main.html 阅读全文
posted @ 2018-06-11 11:42 高圈圈 阅读(1123) 评论(0) 推荐(0) 编辑
摘要: 这个登陆页面主要是有一个form表单,其他的和首页差不多的。 login.html: main.html:(里面有登录页的样式,所以有点长) reset.css:和登录页的是一样的,我就不粘了。 有些图片没去找,直接随便找一张改了尺寸和背景色,最后效果图是这样的: 阅读全文
posted @ 2018-06-10 20:25 高圈圈 阅读(1624) 评论(1) 推荐(0) 编辑
摘要: 终于做好了! index.html: main.css: reset.css: 网页截屏: 阅读全文
posted @ 2018-06-10 12:04 高圈圈 阅读(1386) 评论(0) 推荐(0) 编辑
摘要: 总结: 1)html有很多默认样式,然而实际应用中并不需要,因此要在制作样式之前清除掉默认样式。 2)注意清除margin-top塌陷 3)使用float:left后要使用clear:both清除其影响 4)注意要兼容IE 效果图: 阅读全文
posted @ 2018-06-06 10:10 高圈圈 阅读(8040) 评论(0) 推荐(0) 编辑