HTML&CSS实战

1,漂亮的上传按钮
网页上传功能是通过设置< input >标签的type属性值为file来实现的。
首先设置上传按钮的尺寸,然后把多余的部分进行溢出隐藏处理。
HTML&CSS实战
HTML&CSS实战
将上传按钮样式和设计师想要显示的样式通过定位方式叠加起来,然后将上传按钮透明度设置为0,这样从效果上来看之后看到需要显示的样式,就出一漂亮的上传按钮,但实际上的按钮是透明上传按钮。
HTML&CSS实战

2,标签切换页
标签切换页也叫选项卡,是网页中常见的一种效果目的是网页能够合理的利用空间,从而展现更多内容。

标签页基本HTML结构和CSS样式。
HTML&CSS实战
HTML&CSS实战
HTML&CSS实战

3,JavaScript动态切换
动态的切换制作好的标签页要用javaScript语言来实。
在< body >标签中添加javascript代码:
HTML&CSS实战
HTML&CSS实战
运行结果如下
HTML&CSS实战
点击可以切换HTML&CSS实战