中研优化头部样式

Posted 2020-07-13

效果为：

 

代码为：

<div class="headertop">
<div class="headerTopIn">
<p class="headTopleft"><a href="/" title="广东省中研白癜风医学研究院" style="color:#fff">广东省中研白癜风医学研究院</a>,<a href="/" title="广州白癜风医院" style="color:#fff">广州白癜风医院</a>为您提供专业、高品质的诊疗服务</p>
<ul class="headTop-right">
<li><a href="http://m.35190000.cn/" target="_blank" rel="nofollow">手机版</a></li>
<li style="background-position: 0px -74px"><a href="javascript:void(0)" onclick="getswt();" target="_blank" rel="nofollow">在线预约</a></li>
</ul>
</div>
</div>

<div class="main topbar">
<a href="/" class="logo" title="广州白癜风医院"><img src="top_03.png" alt="广州白癜风医院"/></a>
<a href="javascript:void(0)" onclick="getswt();" class="hz" title="美国新1代308"><p style="_width:140px;"><em class="em1"></em>美国新1代308<br/>激光推广医院</p></a>
<a href="javascript:void(0)" onclick="getswt();" class="hz" style="margin-left:23px; margin-right:10px;" title="美国皮肤CT"><p><em class="em2"></em>美国皮肤CT<br/>推广医院</p></a>
<a href="javascript:void(0)" onclick="getswt();" class="hz"><p><em class="em3"></em>365天接诊<br/>无假日医院</p></a>
<a href="javascript:void(0)" onclick="getswt();" class="photo"><img src="top_05.gif" alt="广州白癜风专科医院"/></a>
</div>

<style>
.headertop{ width: 100%; height: 30px; background:url(h-bg.png) repeat-x; color: #fff; font-size: 14px; }
.headerTopIn{ width: 1000px; height: 30px; line-height: 30px; margin: 0 auto; }
.headTopleft{ float: left; }
.headTop-right{ float: right; width: 325px; }
.headTop-right li{ float: left; width: 56px; background: url(index.png) no-repeat 0px 6px; padding-left: 25px !important; }
.headTop-right img{ position:absolute; left: 0; top: 0;z-index: 9999; }
.headTop-right li a{ color:#fff; }

.topbar{height:78px; padding-top:20px;margin: 0 auto;width: 1000px;overflow: hidden;font-size: 12px;}
.topbar .logo{float: left;margin-right:20px;}
.topbar a{color:#656565;}
.topbar .hz{float:left;width:126px; margin-top:10px;}
.topbar .hz p{width:126px;_width:130px;float: left; line-height: 18px;}
.topbar .hz p em{width: 45px;height: 46px;background:url(top.gif) no-repeat;float: left; margin-right:5px;} .topbar .hz p em:hover{background:url(top.gif) no-repeat;}
.topbar .hz p .em1{background-position: 0 0;} .topbar .hz:hover p .em1{background-position: 0px -45px;}
.topbar .hz p .em2{background-position: -44px 0;} .topbar .hz:hover p .em2{background-position: -44px -45px;}
.topbar .hz p .em3{background-position: -88px 0;} .topbar .hz:hover p .em3{background-position: -88px -45px;}
.topbar .hz:hover{color:#b2291f;}
.topbar .photo{float: right; margin-top:1px;}
</style>

 

图片有

：top.gif

top_03.png

top_05.gif