HTML+CSS實(shí)現(xiàn)頭部head和導(dǎo)航的制作--源代碼
時(shí)間：2023-07-23 16:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-23 16:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
HTML+CSS實(shí)現(xiàn)頭部head和導(dǎo)航的制作--源代碼：<!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>無(wú)標(biāo)題文檔</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="">注冊(cè)</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">螢火蟲(chóng)</p>
</div>
</div>
<div class="nav-wrap">
<div class="nav">
<div class="nav-left"> <a href="" rel="" target="">新聞中心</a> <a href="" rel="" target="">新游戲·今日開(kāi)服</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="">手機(jī)游戲</a> <a href="" rel="" target="">網(wǎng)頁(yè)游戲</a> </div>
</div>
</div>
</div>
</body></html>
實(shí)現(xiàn)效果：
關(guān)鍵詞：導(dǎo)航,實(shí)現(xiàn)
在線咨詢