随笔分类 - H5+CSS3
分享关于H5与CSS3的知识
摘要：昨天群里有人问个问题：为什么button加了文字后，产生了对齐不一致的问题。 原因在于baseline的对齐问题。 然后就有人推荐了一篇文章：关于Vertical-Align你需要知道的事情 其中里面最后一个例子讲到了如何解决inline元素换行的问题。 里面说用注释可以解决换行问题，我测试了下发现
阅读全文
摘要：本文篇幅较长，希望能坚持看完，转载请注明出处，如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。 首先我们先给一个正方形设置比较宽的边框。如下。 <div id="test1"></div> <style> #test1{
阅读全文
摘要：转载自知乎：https://zhuanlan.zhihu.com/p/25321647 一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 1.普通流 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水
阅读全文
摘要：本文转自：http://www.cnblogs.com/wuyinghong/p/3633213.html<canvas class="cvs"></canvas>遇到的问题：如css 中设.cvs{width:500px;height:400px;}，也就是css改变了canvas的尺寸后，本来是
阅读全文
摘要：问题简述： 今天帮一个师姐做网页遇到一个这样的要求： 鼠标不移动进表格，表格透明度不变。 鼠标移动进表格，hover到的单元格透明度不变，没hover到的单元格透明度改变。 先贴我已经实现好的效果，一开始，表格透明度不变。 当我鼠标移动到第二排第三个单元格，其他单元格降低透明度。 解决办法 一开始，
阅读全文
摘要：新版本 新版本的flex布局模型是2012年9月提出的工作草案，这个草案是由W3C推出的最新语法，这个版本立志于指定标准，让新式的浏览器全面兼容，在未来的浏览器更新换代中实现统一。 目前几乎大部分的浏览器都支持了。浏览器支持情况可以点击这里查看,下图为支持flex的情况 属性详解 首先和之前一样，先
阅读全文
摘要：混合过渡版 上一篇我们主要讲了旧版box布局，今天这篇主要讲flexbox布局。 混合版本的Flexbox模型是2011年提出的工作草案，主要是针对IE10浏览器实现的伸缩布局效果，其功能和旧版本的功能大同小异。 在这里我们还是采用上一篇的文件，使用混合过渡代码实现IE10的伸缩布局。 首先，我们要
阅读全文
摘要：布局简介 CSS3提供了一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型（Flexible Box）用来提供一个更加有效的方式实现响应式布局。 由于这种布局还处于W3C的草案阶段，并且它分为旧版本、新版本、混合过渡版本三种不同的编码方式。浏览器的兼容性存在一定的问题 首先，我们来看看旧版本
阅读全文
摘要：主要工作 这个由于年代已久，觉得代码很乱已经删除了代码 JS主要为计时器以及问卷的相关业务处理 部分效果图： 部分代码： 计时器：
阅读全文
摘要：前端时间做的CSS作业：基于CSS的个人网页 基于CSS的个人网页 效果图： 代码：
阅读全文
摘要：table标签构造课表 table标签常用于制作表格以及简单布局，于是我就玩了下table标签，用table标签也能构造出很漂亮的页面呢，虽然在博客页面加入与实际打开页面稍微有点出入，但还是可以接受的。 代码如下： 代码效果： 我的课表
阅读全文
摘要：注意项 我们知道，如果想要两个 div(即块级元素）挨着一起排列，可以将其设置为inline-block（行内-块元素）。 不过要注意两个div内的内容的对齐方式将是垂直中间对齐，所以这时候就需要使用float浮动。 使用float的时候有个问题：当一个元素盒子被浮动后，下面的元素会自动堆叠处理，导
阅读全文