公司网页---头部(logo和nav)

这就是做的效果图。

//header部分

<div id="header">

 <div id="logo">
  <img src="../images/logo.gif" width="181" height="45"/>
  </div>
  <div id="search">
    <form action="" method="get" name="form1">
      搜索产品
      <input class="inp_srh" name="input1" type="text" />
      <input class="btn_srh" type="submit" value=""/>
    </form>
  </div>

</div>

//导航

 <div id="nav">
<div class="nav_main">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#" id="nav_current"><span>企业新闻</span></a></li>
<li><a href="#"><span>企业简介</span></a></li>
<li><a href="#"><span>产品展厅</span></a></li>
<li><a href="#"><span>企业历史</span></a></li>
<li><a href="#"><span>招商加盟</span></a></li>
<li><a href="#"><span>网上下单</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
<div class="nav_son">
<ul>
<li><a href="#">企业动态</a></li>
<li><a href="#">领导活动</a></li>
<li><a href="#">产品资讯</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</div>

#content #header {
height: 70px;
margin-bottom: 8px;
}

#content #header #logo {
float: left;
margin-top: 15px;
}

#content #header #search {
float: right;
margin-top: 30px;
}

#content #header #search form .inp_srh {
background-image: url(../images/srh_bg.gif);
height: 17px;
width: 140px;
border: 1px solid #CCC;
}
#content #header #search form .btn_srh {
background-image: url(../images/btn_srh.gif);
height: 23px;
width: 58px;
text-indent:-999em;
}

//nav  css

#content #nav {
height: 66px;
margin-bottom: 8px;
}

#content #nav .nav_main {
height: 36px;
overflow: hidden;
background-color: #FF6600;
}

#content #nav .nav_main ul li {
font-size: 14px;
font-weight: bold;
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}


#content #nav .nav_main ul li a {
line-height: 26px;
display: block;
float: left;
height: 26px;
padding-left: 20px;
}

#content #nav .nav_main ul li a:hover {
color: #FFF;
display: block;
background-color: #FFB66C;
border: 1px solid #FFF;
border-radius:5px;   /*圆角哦,注意*/
}


#content #nav .nav_son {
height: 30px;
}
#content #nav .nav_son ul li {
float: left;
margin-top: 4px;
}
#content #nav .nav_son ul li a {
line-height: 22px;
display: block;
height: 22px;
width: 78px;
text-align: center;
color: #333;
}
#content #nav .nav_son ul li a:hover {
display: block;
border-radius: 3px;
border: 1px solid #CCC;
background-color: #FFF;
color: #333;
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值