20150807 表单美化

单选按钮：可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基础处有详情