1、新建html文档。
2、书写hmtl代码。<div class="content"> <div class="rows"> <div class="label">省份</div> <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div> <div class="text"> <select id="province" name="province"> </select> </div> </div> <div class="rows"> <div class="label">城市</div> <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div> <div class="text"> <select id="city" name="city"> </select> </div> </div> <div class="rows"> <div class="label">学校</div> <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div> <div class="text"> <select id="school" name="school"> </select> </div> </div> </div>
3、书写css代码。 <style>body { background-color: aliceblue; }select { width: 100%; height: 30px; border-radius: 5px; border-color: aliceblue; font-size: 14px; letter-spacing: 5px; }.content { width: 300px; margin: 60px auto; }.rows { width: 100%; height: 42px; border-radius: 14px; margin-top: 10px; background-color: #ffffff; }.label { display: inline-block; padding: 10px; color: #03A9F4; letter-spacing: 7px; }.text { display: inline-block; width: 70%; color: #3a3838; }</style>
4、书写并添加js代码。<script src="js/jquery.min.js"></script> <script src="js/AllSchool.js"></script>
5、代码整体结构。
6、查看效果。
