随笔分类 -  html+css

给网页中的button加动画效果
摘要：网页中的很多事件交互都是通过点击页面中的按钮来实现的，给按钮加一点动画效果也会让网页看起来生动一些，以下就是一个简单的例子： 此按钮的动画主要是通过css的transform动画，伪元素，伪类来实现； 第一步：按钮的html(此处按钮设为a元素) 第二步：编写按钮的css样式 按钮的基本样式 按钮当 阅读全文
posted @ 2018-09-03 10:36 csuwujing 阅读(4018) 评论(0) 推荐(1) 编辑
pc端和移动端的“窗口”(viewport)故事（part1）
摘要：A tale of two viewports — part one 在以下的系列文章中，我将为大家解释浏览器中的视窗和一些重要的元素的尺寸是如何起作用的，如：大家最熟悉的html元素以及window和screen对象。 这篇文章作是本系列的第一部分，是关于台式电脑的浏览器的，主要目的是为后续的移动 阅读全文
posted @ 2017-12-13 10:40 csuwujing 阅读(1951) 评论(1) 推荐(0) 编辑
Box-shadow制作漂亮的外阴影输入框
摘要：改了几次ui图之后，最终的搜索框的设计图如下： 开始做页面的时候，就想到了用box-shadow 来实现外阴影边框、用border-radius来实现ui图的中的圆角。但是过程中也没有那么顺利，基本效果是实现了，可是那个搜索按钮总是和搜索框存在一点缝隙，特别是在ipad和iphone设备中更是明显， 阅读全文
posted @ 2017-11-28 18:52 csuwujing 阅读(3317) 评论(0) 推荐(0) 编辑
button标签与input type=button标签使用的差异
摘要：<!--StartFragment--> button标签和input type=button标签都是html文档中用来表示按钮属性的元素，不过他们在布局和实际使用功能中存在一些差异。 下面将项目中遇到的一些总结如下： 1.属性和布局差异。 （a）width/height属性的差异 button标签 阅读全文
posted @ 2017-11-28 16:12 csuwujing 阅读(2059) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示