随笔分类 - HTML5+CSS3
摘要：设置了一些框架的样式导致折行显示失效，解决办法： https://jingyan.baidu.com/article/3a2f7c2e24cd1826afd611e7.html
阅读全文
摘要：弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 这东西很方便呀，要分清容量属性和条目属性，想用条目属性之前要在父元素中添加：display：flex。
阅读全文
摘要：相对定位： 当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流，除非设置其z-index值为负值。 并且我们发现当相对定位元素进行位移后，表面来看已经脱离了文本流，但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高。 绝对定位： 相对定位只可以在文本流中进
阅读全文
摘要：响应布局就是不同宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而使页面适应不同宽度。
阅读全文
摘要：流体布局：使用百分比来设置元素的宽度，元素的高度按照实际值。 但是流体布局中存在一个边框的问题，元素的边线无法计入百分比。 两种解决办法： 1）width:calc(20% - 4px) 2）width:20%; box-sizing:border-box box-sizing这个属性能够改变盒子尺
阅读全文
摘要：今天做了好多小东西，还挺开心的~ 成品展示： 是不是还萌萌哒~
阅读全文
摘要：一个很简单的小动画，但是还挺有意思的，就是找这种图片很麻烦，我这里把我找的一张图片贴上来，这张图片是我在网上找的，又改了背景色和大小。 效果展示:(感觉效果不是特别好，动作的连贯性还不够好，需要改改图片，偷个懒不改啦~)
阅读全文
摘要：觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下，图片反转过程中可能会遇到一种如下所示的跳变bug： 这玩意一出来吓我一大跳，显然这种用户体验是很不好的，解决方法： 在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg)
阅读全文
摘要：下了一个软件：ScreenToGif用来截取动态图片，终于可以展示我的小动图啦，嘻嘻，敲开心！ main.html
阅读全文
摘要：这个登陆页面主要是有一个form表单，其他的和首页差不多的。 login.html: main.html:(里面有登录页的样式，所以有点长) reset.css:和登录页的是一样的，我就不粘了。 有些图片没去找，直接随便找一张改了尺寸和背景色，最后效果图是这样的：
阅读全文
摘要：终于做好了！ index.html: main.css: reset.css: 网页截屏：
阅读全文
摘要：总结： 1）html有很多默认样式，然而实际应用中并不需要，因此要在制作样式之前清除掉默认样式。 2）注意清除margin-top塌陷 3）使用float：left后要使用clear：both清除其影响 4）注意要兼容IE 效果图：
阅读全文
摘要：目的：为了把样式和内容分开，并且使网页元素更加丰富，引入了CSS CSS页面引入有三种方式： 1）内联式：比较不常用，因为内容和样式仍然在一起，不方便。示例： 2）嵌入式：由于这种方式速度快，一般用于首页加载。示例： 3）外联式：样式单独保存在main.css文件中，样式与内容完全分离，用于大多数网
阅读全文
摘要：传统布局：使用table来做整体页面的布局 总结：这种方式来制作页面现在也不是很多了，感觉并不是很高效。 需要先用photoshop量出页面布局具体的尺寸位置，再将其划分为表格，对每个格子进行编辑。 每个格子可以嵌套表格，这样有时候写着写着还有点迷糊，要重新找到编辑位置属于哪一个表格的哪个位置，通常
阅读全文
浙公网安备 33010602011771号