单选按钮:可hover及select文字说明,此时单选框及说明都显示不同效果,
结构<dl><dt></dt><dd><a href=""><b></b></a></dd><dd><a href=""><b></b></a></dd></dl>
占位标签<b></b>放图片,background-position控制图片的显示位置。
js控制实现交互效果,show
复选按钮:可hover及select文字说明,hover也显示一个效果。
结构<ul><li><input type="checkbox" id="test1"/><label for="test1">测试1</label></li>
<li><input type="checkbox" id="test2"/><label for="test2">测试2</label></li></ul>
模拟这一块,但是默认样式不显示,显示背景图片。
文本框:html5及CSS3部分属性使用
结构<input type="text" name="" placeholder=""/>
placeholder:默认字符
required:不允许什么都不写就提交
文本框后边小图片定位.contact_form input:required{background: #fff url(images/red_asterisk.png) no-repeat 98% center;}
下拉列表
结构:<strong>请选择</strong>
<span id="result">选择1</span>
<ul id="select" class="show">
<li><b>A</b><a href="javascript:void(0);">选择1</a></li>
<li><b>B</b><a href="javascript:void(0);">选择2</a></li>
<li><b>C</b><a href="javascript:void(0);">选择3</a></li>
<li><b>F</b><a href="javascript:void(0);">选择4</a></li>
</ul>
js控制实现交互效果,标签权重不同,html/css基础处有详情
结构<dl><dt></dt><dd><a href=""><b></b></a></dd><dd><a href=""><b></b></a></dd></dl>
占位标签<b></b>放图片,background-position控制图片的显示位置。
js控制实现交互效果,show
复选按钮:可hover及select文字说明,hover也显示一个效果。
结构<ul><li><input type="checkbox" id="test1"/><label for="test1">测试1</label></li>
<li><input type="checkbox" id="test2"/><label for="test2">测试2</label></li></ul>
模拟这一块,但是默认样式不显示,显示背景图片。
文本框:html5及CSS3部分属性使用
结构<input type="text" name="" placeholder=""/>
placeholder:默认字符
required:不允许什么都不写就提交
文本框后边小图片定位.contact_form input:required{background: #fff url(images/red_asterisk.png) no-repeat 98% center;}
下拉列表
结构:<strong>请选择</strong>
<span id="result">选择1</span>
<ul id="select" class="show">
<li><b>A</b><a href="javascript:void(0);">选择1</a></li>
<li><b>B</b><a href="javascript:void(0);">选择2</a></li>
<li><b>C</b><a href="javascript:void(0);">选择3</a></li>
<li><b>F</b><a href="javascript:void(0);">选择4</a></li>
</ul>
js控制实现交互效果,标签权重不同,html/css基础处有详情