首页 > 网站 > WEB开发 > 正文

下拉列表框

2024-04-27 14:26:17
字体:
来源:转载
供稿:网友
下拉列表框

<!doctype html><html><head><meta charset="utf-8"><title>武汉市预约献血登记表</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><link href="CSS/bootstrap.min.css" rel="stylesheet" media="screen" /><script src="js/jquery-2.0.3.min.js"></script><script src="js/bootstrap.min.js"></script><style>div ,ul ,li, span, table, h1~h6,{ margin:0px; padding:0px;}input{ background-color:#eeeee;}i{ color:#FF9900;}label{ margin-bottom: 10px;}small{ font-size:13px; font-weight:600px;}.xy-navigation{ background-color:#00ab9f;}.xy-navigation ul{ list-style:none; margin-bottom: 0px; padding-left: 0px;}.xy-navigation ul li{ height:50px; line-height:50px;}.xy-navigation ul li img{ width:10px; height:20px;}.xy-navigation-txt{ font-size:16px; font-weight:800; color:#ffffff; text-align:center; padding-left:0px;}.xy-nagation-txt{ font-size:10px; color:#999999;}.xy-nagation-txt span{ padding-left: 0px; padding-right: 0px; margin-top: 10px;}.xy-subtxt{ margin-top: 14px; color:#808080; font-size:13px; font-weight:600px;}.su-form-content{ margin-left: 15px; margin-right: 15px; margin-top: 20px;}.defaule-radius{ border-radius:10px;}.su-dropdown{ border:1px solid #dfdfdf; border-radius:10px;}.su-dropdown button{ width:100%; text-align:left; color:#999999; font-size:13px;}.su-radio-all{ border:1px solid #dfdfdf; border-radius:10px; background-color:#eeeeee;}.su-radio-all input{ margin-left:15px;}.su-radio-all div{ padding-top:7.5px; padding-bottom:7.5px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px;}.radio-women{ padding-top:7.5px; padding-bottom:7.5px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px; border-top:1px solid #dfdfdf;}.su-dropdown-date{ width:100%; text-align:left; color:#999999; font-size:13px;}.su-dropdown-date button{ width:100%;border-top:1px solid #dfdfdf; border-radius:10px;}.drop-date{ width:100%; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; border-bottom:0px;}li{ border-bottom:1px solid #eeeeee;}.dropdown-menu > li > div{ clear:both color:#333; font-weight:400; line-height:1.42857; padding:3px 20px; white-space:nowrap; }*::before, *::after { box-sizing: border-box;}*::before, *::after { box-sizing: border-box;}.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-top: 0px solid #ddd; line-height: 1.42857; padding: 8px; vertical-align: top;}.btn-footer p button{width:100%; text-align:center; font-weight:600; border-radius:10px;}.btn{ text-align:left;}.dropdown-menu{ width:100%;}.xy-radio{ border:1px solid #dfdfdf; border-radius:10px; background-color:#eeeeee;}/*.xy-radio p{ padding-left:12px; margin-bottom: 0px; padding-top:6px; padding-bottom:6px; padding-right:12px;}*/.form-group .bg-input{ background-color:#eeeeee;}.xy-radio-p1{ border-bottom:1px solid #dfdfdf;}#woman-radio{ margin-right:10px;}#man-radio{ margin-right:10px;}#sub{ margin-right:10px;}#sub-button{ width:100%;}.clearboth{ clear:both;}.xue-div1{ padding:0px 15px 0 15px; height: 35px;}.xue-div1 span{ position:relative; margin-left: 5px; top: -21px;}.xue-div2{padding:0px 15px 0 15px; border-top:1px solid #dfdfdf; height: 35px;}.xue-div2 span{ position:relative; margin-left: 5px; top: -21px;}.sex-div1{ padding:0px 15px 0 15px; height: 35px;}.sex-div1 span{ position:relative; margin-left: 5px; top: -29px;}.sex-div2{padding:0px 15px 0 15px; border-top:1px solid #dfdfdf; height: 35px;}.sex-div2 span{ position:relative; margin-left: 5px; top: -29px;}.su-radio-all input{opacity:0; width:100%; border-bottom:1px solid #ffffff; visibility:hidden;}.su-radio-all label{width:13px; height:13px; background:url(images/bt2.png); background-size:13px 13px; border-radius:100%; position:relative; top:-18px;}.su-radio-all input[type="radio"]:checked + label{background:url(images/bt1.png) no-repeat; background-size:13px 13px;}.xy-radio input{opacity:0; width:100%; border-bottom:1px solid #ffffff; visibility:hidden;}.xy-radio label{width:13px; height:13px; background:url(images/bt2.png); background-size:13px 13px; border-radius:100%; position:relative; top:-10px;}.xy-radio input[type="radio"]:checked + label{background:url(images/bt1.png) no-repeat; background-size:13px 13px;}select{ display:none; outline:none;}a{text-decoration:none;}*{margin:0;padding:0;}ul{ list-style:none;}.select_box{ background-color:#eeeeee; border-radius:10px; line-height:2.5; font-size:14px; color:#999999; width:100%; margin:0px auto;}.select_showbox{ border:1px solid #dfdfdf; border-radius:10px; height:35px; padding-left:10px; background:url(images/bt3.png) no-repeat 156px 0; background-size: 13px 10px; background-position: 97.76% 13px;}.select_option{ border:1px solid #dfdfdf; border-radius:10px; border-top: none; display:none;}.select_option ul{border-radius:10px;}.select_option li{ padding-left:5px; border-top:1px solid #dfdfdf; }.select_option li.selected{ background-color:#F3F3F3; color:#999;}.select_option li.hover{ background:#7b6959; color:#fff;}</style></head><body><div class="xy-cotent"> <div class="container xy-navigation"> <ul class="row"> <li class="col-xs-1"><img src="images/13.png"/></li> <li class="col-xs-10 xy-navigation-txt">武汉市预约献血登记表</li> </ul> </div> <div class="container xy-subtxt"> <div class="row"> <div class="col-xs-12"> 预约献血可以对您提供更好的服务,免去您排队等待的时间。 如遇人数满员情况,我们会与您联系进行调整。 谢谢您对无偿献血事业的付出! </div> </div> </div> <form role="form" class="su-form-content" onSubmit="return myCheck()"> <div class="form-group"> <label for="name"><i>*&nbsp;</i><small>姓名:</small></label> <input type="text" class="form-control bg-input defaule-radius" id="name" placeholder="请输入名称" /> </div> <div class="form-group"> <label for="name"><i>*&nbsp;</i><small>性别:</small></label> <div class="su-radio-all" onClick="sex()"> <div class="sex-div1"> <input type="radio" id="A" name="a" checked='checked'> <label for="A"></label> <span>男</span> </div> <div class="sex-div2"> <input type="radio" id="B" name="a"> <label for="B"></label> <span>女</span> </div> </div> </div> <div class="form-group"> <label for="name"><i>*&nbsp;</i><small>手机号:</small></label> <input type="text" class="form-control bg-input defaule-radius" id="tel" placeholder="请输入手机号" /> </div> <div class="form-group su-form-around"> <label for="name"><i>*&nbsp;</i><small>献血区域:</small></label> <select name="choose" id="choose"> <option value="选择风格" selected="selected">硚口献血点(全血)</option> <option value="复古风">A型血</option> <option value="摇滚风">B型血</option> <option value="怀旧风">C型血</option> </select> </div> <div class="form-group" class="su-form-around"> <label for="name"><i>*&nbsp;</i><small>预约日期:</small></label> <select name="choose" id="choose"> <option value="选择风格" selected="selected">2015年3月29日(周五)</option> <option value="复古风">2015年3月30日(周六)下午</option> <option value="摇滚风">2015年3月31日(周日)上午</option> <option value="怀旧风">2015年4月01日(周一)下午(</option> </select> </div> <div class="form-group"> <label for="sub-xue" ><i>*&nbsp;</i><small>献血类型:</small></label> <div class="xy-radio"> <div class="xue-div1"> <input type="radio" id="C" name="c" checked='checked'> <label for="C"></label> <span>全血</span> </div> <div class="xue-div2"> <input type="radio" id="D" name="c"> <label for="D"></

上一篇:关于IE里的nextSibling

下一篇:css3 background

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表