整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML多层级下拉框

现效果

代码:

CSS3炫酷的下拉框的原理:

1.首先就是一个导航下拉,就是鼠标放上去出现一个下拉列表

2.然后发现,下拉里面,每一个选项是从不同的两个方向出现的

3.出现的方式是奇数项从左边进,偶数项从右边进,进入方式是滑动淡入。

效果图

其实这个是用CSS3过渡和动画制作的,没有用到JS也是可以做出这样的效果,那么他的代码是怎样的呢?我给大家罗列出来:

HTML代码

CSS

完整的代码

代码有点多已经上传到群文件里了,最后也说下小编的群,可以分享交流,小编也会经常分享一些资料干货供大家学习:661473108,欢迎初学和进阶中的小伙伴。

这个动画,我感觉虽然性能上css3是比js要好一些。毕竟js也是控制css或者class来实现!

灵活性的话,这个就要比js差了,比如div的显示与隐藏,我不想通过鼠标移入移出的方式控制,如果我想通过点击的方式控制div的显示与隐藏呢。对于js的方式来说,这个就是触发的事件就可以了,对于插件来说,可能就改一个插件就行了!对于css3实现的话,这个就不但要改css样式了,也要改html结构了!

这里,我的建议就是,这个动画最理想的还是用js和css3结果,结果是最好的。如果针对灵活性不高的需求,可以只用css3。

一篇文章我们说了单行文本框和多行文本框,今天呢我们继续看一下表单的其它控件:单选框、复选框、下拉框。

(1)单选框和复选框

在我们表单页面中,经常会有选择性别或者选择爱好这类的内容,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

使用语法:

单选框:<input type="radio" value="值" name="名称" checked="checked"/>

复选框:<input type="checkbox" value="值" name="名称" checked="checked"/>

详细讲解:

1、type: 当 type="radio" 时,控件为单选框;当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序使用)

3、name:为控件命名,这里要注意同一组的单选按钮,name 取值一定要一致(具体可见下边的参考练习)。

4、checked:当设置 checked="checked"(也可以直接简写成checked) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含姓别(男、女)选择的单选框,默认选中男以及爱好(唱歌、打游戏、绘画、旅游)选择的多选框,默认选中唱歌。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

(2)下拉框

下拉框也是我们常用的一个表单控件,多用于选择城市地区等。

使用语法:

<select>

<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>

</select>

详细讲解:

1、option:option为select下拉子元素,可以有一个或多个,写法类似ul和li,其中的value内容为提交数据到服务器的值(后台程序使用)

2、selected:当设置 selected="selected"(也可以直接简写成selected) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含一个城市的下拉框,下拉框中有北京、上海、天津这三个城市,其中默认选中天津。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

好了,本篇文章就先给大家介绍这几个表单控件的语法以及使用,下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示,记得平时要多加练习才是王道。

每日金句:做人要像竹子一样每前进一步,都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。