2017年6月22日
摘要: animation-play-state 属性规定动画正在运行还是暂停。 浏览器支持:Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。Safari 和 Chrome 支持替代的 -webkit-animation-pl 阅读全文
posted @ 2017-06-22 19:10 无知者TO 阅读(907) 评论(0) 推荐(0) 编辑
摘要: html代码如下: css代码如下: 以下6个属性设置在容器上: flex-direction 容器内项目的排列方向(默认横向排列) flex-wrap 容器内项目换行方式 flex-flow 以上两个属性的简写方式 justify-content 项目在主轴上的对齐方式 align-items 项 阅读全文
posted @ 2017-06-22 18:59 无知者TO 阅读(164) 评论(0) 推荐(0) 编辑
摘要: 伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素)。区别总结如下: css伪元素 (Pseudo-elements):用于向某些选择器设置特殊效果,是对元素中的特定内容进行设置和操作, 阅读全文
posted @ 2017-06-22 18:56 无知者TO 阅读(165) 评论(0) 推荐(0) 编辑
摘要: 一、水平居中 1. text-align:center(行内元素) 给其父元素设置属性 text-align:center; 2. margin: 0 auto(块级元素) 给元素本身设置 margin: 0 auto; 3. 元素的宽度固定 1⃣️ position+margin-left 2⃣️ 阅读全文
posted @ 2017-06-22 18:51 无知者TO 阅读(138) 评论(0) 推荐(0) 编辑
摘要: 1.使用 :not() 在菜单上应用/取消应用边框2.给body添加行高3.所有一切都垂直居中4.逗号分隔的列表5.使用负的 nth-child 选择项目6.对图标使用SVG7.优化显示文本8.对纯CSS滑块使用 max-height9.继承 box-sizing10.表格单元格等宽11.用Flex 阅读全文
posted @ 2017-06-22 18:47 无知者TO 阅读(178) 评论(0) 推荐(0) 编辑
摘要: 1.解释一下display的几个常用的属性值,inline , block, inline-block inline: 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 不能更改元素的height,width的值,大小由内容撑开. 可以使用padding,marg 阅读全文
posted @ 2017-06-22 18:42 无知者TO 阅读(149) 评论(0) 推荐(0) 编辑
摘要: :before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。 一、与普通元素一样可以给其添加样式 比如说我想在文字前面添加一个图标,如果我用普 阅读全文
posted @ 2017-06-22 18:29 无知者TO 阅读(227) 评论(0) 推荐(0) 编辑
摘要: 响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力。就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局。 弹性布局是一种十分方便的,只需要依赖于CSS样式的实现响应式布局的方式,也是K最多用到的一种实现响应式 阅读全文
posted @ 2017-06-22 18:25 无知者TO 阅读(189) 评论(0) 推荐(0) 编辑
  2017年6月11日
摘要: <datalist> <datalist>是HTML5的新标签,它规定了<input>元素可能的选项列表。 <datalist>标签被用来在为元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。 编程实现 代码如图: 效果如图: 阅读全文
posted @ 2017-06-11 14:26 无知者TO 阅读(198) 评论(0) 推荐(0) 编辑
摘要: 在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站。 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”,会发现有无数的可选择的Ja 阅读全文
posted @ 2017-06-11 14:25 无知者TO 阅读(22347) 评论(0) 推荐(1) 编辑