HTML+CSS实现头部head和导航的制作--源代码
时间：2023-07-23 16:36:01 | 来源：网站运营
时间：2023-07-23 16:36:01 来源：网站运营
HTML+CSS实现头部head和导航的制作--源代码：<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
a:hover{ color:#FF0000;}
a{ color:#000000; text-decoration:none;}
.member{ width:100%; height:37px;}
.member .member-center{ width:1100px; height:37px; margin:0 auto;}
.member .member-center a{ float:right; text-decoration:none; margin-right:5px; font-size:16px; margin-top:8px;}
.member .member-center span{ width 100%; height:4px; float:right; margin:0px 10px; padding-top:6px;}
.member .member-center span .right-line{ line-height:8px; border-right:1px solid #CCCCCC; padding:0 10px;}
.header-wrap{width:100%; height:109px; background:ffffff; border-bottom:4px solid #f7cd07; position:relative;}
.header{ width:1100px; height:109px; margin:0 auto; }
.logo{ width:274px; height:109px; float:left;}
.search{ width:409px; height:35px; float:left; margin-left:55px;}
.header-wrap .header a{}
.header-wrap .header img{ width:274px; line-height:109px;}
.header-wrap .header form{ width:408px; height:35px; margin:0 auto;}
.header-wrap .header form input{ width:349px; height:35px; border-color: #CCCCCC; float:left; border: 1px solid #CCCCCC;}
.header-wrap .header form button{ width:57px; height:35px; background:#FFCC33; float:right; border:0px solid #FFCC00;}
.header-wrap .header .search form button .btuuon-icon{ width:35px; height:35px; background-image:url(search.jpg);}
.yhc{ width:50px; height:50px; float:right; border-radius:10px; background:url(kol.png) no-repeat center; position:relative;}
.yhc p{ width:50px; height:25px; background:#CCCCCC; opacity:0.9;font-size:14px; color:#FFFFFF; position:absolute; top:50%; text-align:center;}
.nav-wrap{ width:100%; height:61px; position:absolute; bottom:-30px;}
.nav-wrap .nav{ width:1100px; height:61px; margin:0 auto;}
.nav-wrap .nav .nav-left{ width:970; height:61px; float:left; margin-right:20px;}
.nav-wrap .nav .nav-right{ width:170; height:61px; float:right;}
.nav-wrap .nav .nav-left a{ margin-right:20px;}
.nav-wrap .nav .nav-right a{ margin-left:20px;}
</style>
</head>
<body
<div class="member">
<div class="member-center"> <a href="">注册</a> <span class="right-line">|</span> <a href="" >登陆</a> </div>
</div>
<div class="header-wrap">
<div class="header">
<div class="logo"><a href="" title="" target="_blank"><img src="logo-2018.png" alt="" /></a></div>
<div class="search">
<form action="">
<input type="text" name="search" value="搜索一下" />
<button type="submit" name="search-submit" class="btuuon-icon">搜索</button>
</form>
</div>
<div class="yhc">
<p class="yhc-son">萤火虫</p>
</div>
</div>
<div class="nav-wrap">
<div class="nav">
<div class="nav-left"> <a href="" rel="" target="">新闻中心</a> <a href="" rel="" target="">新游戏·今日开服</a> <a href="" rel="" target="">游戏下载</a> <a href="" rel="" target="">新闻中心</a> <a href="" rel="" target="">新闻中心</a> <a href="" rel="" target="">新闻中心</a> <a href="" rel="" target="">新闻中心</a> </div>
<div class="nav-right"> <a href="" rel="" target="">手机游戏</a> <a href="" rel="" target="">网页游戏</a> </div>
</div>
</div>
</div>
</body></html>
实现效果：
在线咨询
