整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
下拉列表select在表单中应该算是使用频率比较高的一个元素，而我们也知道页面上默认的select标签样式是很难看的。基本所有的团队都会选择使用Bootstrap或者自己封装一个下拉列表的组件，今天我们也试着使用CSS3新特性来写一个带动画效果的下拉列表样式吧。
CSS3
感兴趣的可以自行去github上学习源码，github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html
首先，我们来看看带动画效果的下拉列表效果是什么样的，如下图所示。
效果图
这里我们简单分析下页面的构成，实际上非常的简单，主要包含以下三个元素。
表示外层容器的div元素
上面是一个span元素
下面是一个ul元素，每个li表示一个列表项
在整个下拉列表中，主要有两个动画。
下拉菜单旁边的小三角图标，在鼠标悬浮和离开时动态变换
下方的列表，在鼠标悬浮和离开上面的span元素时，列表会有动画显示和消失的效果。
下面我们来看看整个页面的代码构成。
HTML
首先是页面的HTML代码，正如上一部分所讲，页面主要为一个外层容器div，内部是一个span和ul元素，每个列表项li内包含一个a元素，所有HTML部分代码如下所示。
HTML代码
CSS
CSS部分的代码才是整个实现效果的核心，我们具体来分析。
首先是页面的全局基本配置样式。
全局配置
然后是外层容器的样式。
外层容器样式
然后是span元素的样式，旁边的上三角形通过伪元素::after来实现，在::after伪元素中通过border-color属性来控制三角形的朝向，然后通过transition属性设置变换样式。
span元素以及上三角形
当鼠标停留在span元素上时，span元素背景色会改变，上三角会变成下三角。
鼠标停留后span的样式
紧接着是下面的ul以及li元素的样式，都是一些很普通的属性。
ul与li样式
然后是li下的a元素的样式。
li下a元素样式
然后是css中最核心的地方，ul的动画效果，通过translate3d属性改变ul所处的位置，再以transform属性添加动画效果。
ul初始状态
至此，所有代码讲解完毕，如果运行成功后，会得到文章开始时的下拉列表效果。
本篇文章主要给大家介绍了如何使用CSS编写一个带动画的下拉列表效果，你学会了吗？
下拉列表select在表单中应该算是使用频率比较高的一个元素，而我们也知道页面上默认的select标签样式是很难看的。基本所有的团队都会选择使用Bootstrap或者自己封装一个下拉列表的组件，今天我们也试着使用CSS3新特性来写一个带动画效果的下拉列表样式吧。
CSS3
感兴趣的可以自行去github上学习源码，github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html
首先，我们来看看带动画效果的下拉列表效果是什么样的，如下图所示。
效果图
这里我们简单分析下页面的构成，实际上非常的简单，主要包含以下三个元素。
表示外层容器的div元素
上面是一个span元素
下面是一个ul元素，每个li表示一个列表项
在整个下拉列表中，主要有两个动画。
下拉菜单旁边的小三角图标，在鼠标悬浮和离开时动态变换
下方的列表，在鼠标悬浮和离开上面的span元素时，列表会有动画显示和消失的效果。
下面我们来看看整个页面的代码构成。
HTML
首先是页面的HTML代码，正如上一部分所讲，页面主要为一个外层容器div，内部是一个span和ul元素，每个列表项li内包含一个a元素，所有HTML部分代码如下所示。
HTML代码
CSS
CSS部分的代码才是整个实现效果的核心，我们具体来分析。
首先是页面的全局基本配置样式。
全局配置
然后是外层容器的样式。
外层容器样式
然后是span元素的样式，旁边的上三角形通过伪元素::after来实现，在::after伪元素中通过border-color属性来控制三角形的朝向，然后通过transition属性设置变换样式。
span元素以及上三角形
当鼠标停留在span元素上时，span元素背景色会改变，上三角会变成下三角。
鼠标停留后span的样式
紧接着是下面的ul以及li元素的样式，都是一些很普通的属性。
ul与li样式
然后是li下的a元素的样式。
li下a元素样式
然后是css中最核心的地方，ul的动画效果，通过translate3d属性改变ul所处的位置，再以transform属性添加动画效果。
ul初始状态
至此，所有代码讲解完毕，如果运行成功后，会得到文章开始时的下拉列表效果。
本篇文章主要给大家介绍了如何使用CSS编写一个带动画的下拉列表效果，你学会了吗？
TML 背景
设置背景颜色<body bgcolor="#000000">
设置背景图片<body background="bg.jpg">
设置页面文字颜色<body text="#cccccc">
颜色属性值有三种值的格式
1，英文单词，比如 red , yellow ,green …
<body bgcolor="yellow">
2, 十六进制表示方式，#开头，6个十六进制的字符或数字 组合
比如：#FFFFFF，#000000，#CCCAAA，#22BCAD
十六进制： 0-9 和 a-f
3, RGB模式，红 0-255，绿 0-255，蓝 0-255
比如： RGB(120,33,234)
HTML 表单
表单是一个包含表单元素的区域。
表单能够包含 input 元素，textarea、select、fieldset、legend 和 label 元素。
表单使用标签（<form>）定义。
表单用于向服务器传输数据。
表单的结构
<form name="form1" action="URL" method="get">
用户名：<input type="text" name="uname" />
密 码：<input type="password" name="passwd" />
</form>
属性说明
name表单的名称
action表单提交地址
method表单数据提交的方式 （get ,post）
enctypeMIME类型
target打开方式
input标签
属性说明
typeinput元素类型
nameinput 元素的名称
valueinput 元素的值
sizeinput 元素的宽度
readonly是否只读
maxlength输入字符的最大长度
disabled是否禁用
1.文本框
<input type="text" name="username" value="" />
2.密码框
<input type="password" name="passwd"/>
3.单选按钮
<input type="radio" name="sex"value="1"checked="checked" />男
<input type="radio" name="sex"value="0"/>女
4.复选框
<input type="radio" name="sex"value="1"checked="checked" />男
<input type="radio" name="sex"value="0"/>女
<input type="checkbox"name="love"value="music" checked="checked"/> 听音乐
<input type="checkbox"name="love" value="movie"/> 看电影
<input type="checkbox"name="love" value="game"/> 玩游戏
5.按钮
<input type="button" name="btn" value="确定"/>
<input type="submit" name="comit" value="提交"/>
<input type="reset" name="reset" value="重写"/>
<input type="image" name="img_btn" src="btn.gif"/>
6. 隐藏域
隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
<input type="hidden" name="uid" value="10"/>
7. 上传文件
<input type="file" name="photo"/>
注：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。
<textarea> 多行文本框
<textarea name="content" rows="5" cols="50"> </textarea>
属性说明
name元素的名称
rows指定文本框的高度
cols指定文本框的宽度
select下拉列表框
<select name="city">
<option value="0">请选择</option
<option value="bj">北京</option>
<option value="gz">广州</option>
</select>
属性说明
name下拉列表框的名称
size下拉列表框的显示行数
multiple是否多选
disabled是否禁用
selected设置默认选中的选项
value选项的值
optgroup标签
optgroup 元素用于组合选项 。
属性说明
label指定组合选项名称
fieldset标签
fieldset 标签作用是把表单中元素组合起来
<fieldset>
<legend></legend> length为字符长度
<form></form>
</fieldset>
label标签
lable 标签的作用是将输入项或选项及其标签文字关联起来。
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
*请认真填写需求信息，我们会在24小时内与您取得联系。
