不错的医院页面挂号下拉效果

不错的医院页面挂号下拉效果，仅供参考。

效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>不错的页面挂号下拉效果</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>	
	$(function(){
		$("#gh").click(function(){
			$("#gha").slideDown("fast");
		});
		$(".gh_closed").click(function(){
			$("#gha").slideUp("fast");
		});
	});
</script>
<style>
ul, li {
	list-style:none;
	margin:0;
	padding:0
}
#gh {
	width:76px;
	height:28px;
	line-height:28px;
	text-align:center;
	border:1px solid #f37548;
	font-family:"Microsoft YaHei";
	font-size:12px;
	color:#f37548;
	margin-top:6px;
	float:right;
	cursor:pointer;
}
/*自助挂号样式*/
.gh_xl {
	width:100%;
	height:335px;
	position:absolute;
	top:50px;
	left:0px;
	z-index:2;
	background:#371e0b;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
	display:none;
}
.gh_xla {
	width:990px;
	height:335px;
	position:relative;
	margin:0 auto;
}
.gh_1 {
	width:568px;
	height:29px;
	position:absolute;
	top:23px;
	left:219px;
	font-size:24px;
	line-height:29px;
	font-family:"Microsoft YaHei";
	color:#fff;
}
.gh_1 img {
	margin-top:2px;
	float:left;
}
.gh_closed {
	width:27px;
	height:27px;
	position:absolute;
	top:7px;
	right:0px;
	background:url(/demo/20140919/001/gh_close.gif) no-repeat;
	cursor:pointer;
}
.gh_2 {
	width:990px;
	height:219px;
	position:absolute;
	top:71px;
	left:0px;
	border-top:2px solid #533d2b;
	padding-top:21px;
}
.gh_2 ul li {
	width:246px;
	height:219px;
	float:left;
	border-right:1px solid #755f53;
	position:relative;
}
.gh_icon {
	top:0px;
	left:21px;
	position:absolute;
}
.gh_2_1 {
	top:0px;
	left:47px;
	position:absolute;
	font-size:18px;
	font-family:"Microsoft YaHei";
	color:#f37548;
}
a.gh_2_2 {
	width:100px;
	height:26px;
	border:1px solid #f37548;
	position:absolute;
	top:37px;
	left:47px;
	line-height:26px;
	text-align:center;
	font-size:12px;
	color:#f37548;
}
a.gh_2_2:hover {
	color:#f37548;
}
.gh_2_2 {
	position:absolute;
	top:74px;
	left:21px;
	font-size:14px;
	color:#fff;
}
.gh_2_text {
	width:210px;
	height:auto;
	line-height:18px;
	position:absolute;
	top:168px;
	left:21px;
	color:#b2b2b2;
	font-size:12px;
}
.gh_2_text span {
	color:#db5237;
	font-size:14px;
	height:54px;
	display:block;
	float:left;
	margin-top:2px;
	margin-right:3px;
}
.gh_2_3 {
	position:absolute;
	top:38px;
	left:21px;
	color:#fff;
	line-height:25px;
	font-size:14px;
}
.gh_2_3 span {
	font-size:18px;
	font-family:"Arial";
	color:#f37548;
}
.gh_bd {
	width:232px;
	height:121px;
	position:absolute;
	top:38px;
	left:21px;
}
.gh_bd ul li {
	width:232px;
	height:20px;
	line-height:20px;
	margin-bottom:10px;
	font-size:14px;
	color:#fff;
	border:none;
}
.gh_bd ul li input.email_color {
	color:#FFF;
}
.gh_bd ul li .text {
	float:left;
}
.gh_bd ul li input {
	width:154px;
	height:20px;
	float:right;
	background:#785f4d;
	border:none;
	padding-left:5px;
	color:#fff;
}
.gh_bd ul li select {
	width:75px;
	height:20px;
	background:#785f4d;
	border:none;
	float:right;
	color:#fff;
}
.gh_bd_btn {
	width:77px;
	height:26px;
margin-right:;
	border:1px solid #f37548;
	font-size:12px;
	background:none;
	color:#f37548;
	float:right;
	margin-right:82px;
	cursor:pointer;
}
.gh_wx {
	width:107px;
	height:106px;
	position:absolute;
	top:38px;
	left:47px;
}
/*自助挂号样式结束*/
</style>
</head>
<body>
<li id="gh">在线挂号 ↓</li>
<div class="gh_xl" id="gha">
  <div class="gh_xla">
    <div class="gh_1"> <img src="/demo/20140919/001/gh_1.gif">&nbsp;尊贵的客户，欢迎您使用XXX医院网络挂号系统！</div>
    <a class="gh_closed"> </a>
    <div class="gh_2">
      <ul>
        <li>
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon1.gif"></div>
          <div class="gh_2_1">人工在线挂号</div>
          <a class="gh_2_2" href="#" target="_blank">点击在线预约 →</a>
          <div class="gh_2_2">服务时间 8:00-24:00</div>
          <div class="gh_2_text"><span>*</span> 与客服人员取得联系，选择项目&amp;医生-时间及个人信息，即可成功预约。</div>
        </li>
        <li>
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon2.gif"></div>
          <div class="gh_2_1">电话挂号系统</div>
          <div class="gh_2_3"> 24小时预约专线<br>
            <span>021-1234567</span></div>
          <div class="gh_2_text"><span>*</span> 通过客服电话，可以轻松预约各科室专家及预订房产。</div>
        </li>
        <li style="width:268px;">
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon3.gif"></div>
          <div class="gh_2_1">邮件挂号系统</div>
          <form action="#" method="post" name="yjgh">
            <input type="hidden" name="dopost" value="save">
            <input type="hidden" name="channelid" value="17">
            <div style="display:none">
              <select name="typeid">
                <option value="0">请选择栏目...</option>
                <option value="84" class="option3" selected="selected">预约</option>
              </select>
            </div>
            <div class="gh_bd">
              <ul>
                <li>
                  <div class="text">您的姓名：</div>
                  <input name="username" type="text" class="email_color">
                </li>
                <li>
                  <div class="text">您的电话：</div>
                  <input name="phone" type="text" class="email_color">
                </li>
                <li>
                  <div class="text">您要预约：</div>
                  <select name="section">
                    <option value="" selected="selected" class="email_color">就诊科室</option>
                    <option value="产科">产科</option>
                    <option value="妇科">妇科</option>
                    <option value="儿科中心">儿科</option>
                    <option value="国际医疗">国际医疗</option>
                    <option value="不孕不育">不孕不育</option>
                    <option value="计划生育">计划生育</option>
                    <option value="其他疾病">其他疾病</option>
                  </select>
                  <input name="jiuzhendate" style="margin-right:10px;width:69px;" value="预约时间" class="email_color">
                </li>
              </ul>
              <input type="submit" value="提交预约 →" class="gh_bd_btn">
            </div>
            <input type="hidden" name="dede_addonfields" value="username,text;phone,text;section,select;jiuzhendate,text;">
          </form>
          <div class="gh_2_text"><span>*</span> 写信提交后，客服人员将给你回电确认预约信息。</div>
        </li>
        <li style="width:226px; border-right:none;">
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon4.gif"></div>
          <div class="gh_2_1">微信挂号系统</div>
          <div class="gh_wx"><img src="/demo/20140919/001/gh_wx.jpg"></div>
          <div class="gh_2_text"><span>*</span> 扫描微信二维码添加官方微信为好友，发送姓名+电话+预约项目&amp;医生+时间，即可挂号。</div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

随机推荐

JS手机端跳转代码
JS手机端跳转代码，通过判断浏览器版本来判断是手机端还是PC端，然后可以做相应的操作。能够判断IE内核，opera内核，苹果、谷歌内核，火狐内核，是否为移动终端，android终端或者uc浏览器，是否为iPhone或者QQHD浏览器，是否iPad，是否web应该程序，没有头
空间绑定多个域名添加统计代码的方法
医疗建站中很多时候我们会在一个空间上绑定多个域名，但是希望给每个域名单独添加统计代码，下面医疗模板库www.120muban.com为大家带来实现这种需求的方法。其实只需要通过JS来判断当前的网页域名，根据域名的不同输出不同的统计代码即可；复制代码代码如
最新获取网站访客QQ接口代码-20141015
分析某网站得到的一枚获取访客QQ的接口，原理和以前的一样jsonp 不废话，直接上代码，不懂的直接百度，这种技术应该早就烂大街了。详细接口及利用代码：复制代码代码如下: script type=text/javascript function getQQ(data){ if(data.uin != 0){ alert(
JS闪屏代码,闪瞎你的眼睛
JS恶搞代码，页面底色在黑与白之间快速切换，产生闪烁效果。JS闪屏代码,闪瞎你的眼睛。
JS判断手机号码座机号码函数
JS判断手机号码座机号码函数，可以准确判断手机和座机号码。复制代码代码如下: function Tel(num){ var partten = /^(1[3,4,5,8]\d{9}|01[3,4,5,8]\d{9}|010[1-9]{1,2}\d{6}|02[0-9][1-9]{1,2}\d{6}|0[1-9]{2}[0-9][1-9]{1,2}\d{6})$/; if(partten.test(nu

不错的医院页面挂号下拉效果

相关文章

随机推荐