大家能够去新浪网看看导航。前几天突然有这种一个想法。所以就来撸一番代码。具体看代码。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>新浪首页导航制作</title>
<link rel="stylesheet" href="cssreset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navlist">
<div class="nav_item">
<ul>
<li><a href="#" title="新闻"><strong>新闻</strong></a></li>
<li><a href="#" title="军事">军事</a></li></li>
<li><a href="#" title="社会">社会</a></li></li>
</ul>
<ul>
<li><a href="#" title="財经"><strong>財经</strong></a></li>
<li><a href="#" title="股票">股票</a></li></li>
<li><a href="#" title="基金">基金</a></li></li>
</ul>
<ul>
<li><a href="#" title="科技"><strong>科技</strong></a></li>
<li><a href="#" title="手机">手机</a></li></li>
<li><a href="#" title="探索">探索</a></li></li>
</ul>
</div>
<div class="nav_item">
<ul>
<li><a href="#" title="体育"><strong>体育</strong></a></li>
<li><a href="#" title="NBA">NBA</a></li></li>
<li><a href="#" title="中超">中超</a></li></li>
</ul>
<ul>
<li><a href="#" title="娱乐"><strong>娱乐</strong></a></li>
<li><a href="#" title="明星">明星</a></li></li>
<li><a href="#" title="星座">星座</a></li></li>
</ul>
<ul>
<li><a href="#" title="汽车"><strong>汽车</strong></a></li>
<li><a href="#" title="报价">报价</a></li></li>
<li><a href="#" title="买车">买车</a></li></li>
</ul>
</div>
<div class="nav_item">
<ul>
<li><a href="#" title="博客"><strong>博客</strong></a></li>
<li><a href="#" title="专栏"><span style="color:red">专栏</span></a></li></li>
<li><a href="#" title="天气">天气</a></li></li>
</ul>
<ul>
<li><a href="#" title="视频"><strong>视频</strong></a></li>
<li><a href="#" title="综艺">综艺</a></li></li>
<li><a href="#" title="育儿">育儿</a></li></li>
</ul>
<ul>
<li><a href="#" title="房产"><strong>房产</strong></a></li>
<li><a href="#" title="二手房">二手房</a></li></li>
<li><a href="#" title="家居">家居</a></li></li>
</ul>
</div>
<div class="nav_item">
<ul>
<li><a href="#" title="读书"><strong>读书</strong></a></li>
<li><a href="#" title="历史">历史</a></li></li>
<li><a href="#" title="图片"><span style="color:red">图片</span></a></li></li>
</ul>
<ul>
<li><a href="#" title="教育"><strong>教育</strong></a></li>
<li><a href="#" title="健康">健康</a></li></li>
<li><a href="#" title="中医">中医</a></li></li>
</ul>
<ul>
<li><a href="#" title="时尚"><strong>时尚</strong></a></li>
<li><a href="#" title="女性">女性</a></li></li>
<li><a href="#" title="收藏">收藏</a></li></li>
</ul>
</div>
<div class="nav_item">
<ul>
<li><a href="#" title="城市"><strong>城市</strong></a></li>
<li><a href="#" title="上海">上海</a></li></li>
<li><a href="#" title="广东">广东</a></li></li>
</ul>
<ul>
<li><a href="#" title="旅游"><strong>旅游</strong></a></li>
<li><a href="#" title="航空">航空</a></li></li>
<li><a href="#" title="试驾">试驾</a></li></li>
</ul>
<ul>
<li><a href="#" title="论坛"><strong>论坛</strong></a></li>
<li><a href="#" title="高考">高考</a></li></li>
<li><a href="#" title="SHOW">SHOW</a></li></li>
</ul>
</div>
<div class="nav_item">
<ul>
<li><a href="#" title="游戏"><strong>游戏</strong></a></li>
<li><a href="#" title="棋牌">棋牌</a></li></li>
<li><a href="#" title="页游">页游</a></li></li>
</ul>
<ul>
<li><a href="#" title="佛学"><strong>佛学</strong></a></li>
<li><a href="#" title="高尔夫">高尔夫</a></li></li>
<li><a href="#" title="彩票">彩票</a></li></li>
</ul>
<ul>
<li><a href="#" title="应用"><strong>应用</strong></a></li>
<li><a href="#" title="必备">必备</a></li></li>
<li><a href="#" title="手游">手游</a></li></li>
</ul>
</div>
<div class="nav_item" style="background:none">
<ul>
<li><a href="#" title="搜索">搜索</li>
<li><a href="#" title="爱问">爱问</a></li></li>
<li><a href="#" title="微博">微博</a></li></li>
</ul>
<ul>
<li><a href="#" title="拍卖">拍卖</a></li>
<li><a href="#" title="客服">客服</a></li></li>
<li><a href="#" title="邮箱">邮箱</a></li></li>
</ul>
<ul>
<li><a href="#" title="公益">公益</a></li>
<li><a href="#" title="English">English</a></li></li>
<li><a href="#" title="导航">导航</a></li></li>
</ul>
</div>
</div>
</body>
</html>main.css
.navlist{
width:1000px;
height: 98px;
margin: 5px auto;
_margin:5px auto;
overflow: hidden;
}
.nav_item{
width:130px;
_width:135px;
margin:0 5px;
_margin: 0 1px;
float: left;
overflow: hidden;
background: url("http://i0.sinaimg.cn/home/main/index2013/0719/bg2.png") no-repeat 125px -183px;
}
.nav_item ul{
overflow: hidden;
}
.nav_item ul li{
float:left;
_float:left;
padding:0 4px;
_padding:0 5px;
}
.nav_item ul li a:hover{
color:#e66100;
text-decoration: underline;
}
cssreset.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
border: none;
font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";
font-size: 14px;
}
ol,ul{
list-style: none;
}
fieldset,img{
border:0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
a{
text-decoration: none;
color: black;
}
img, iframe {
border: none;
text-decoration:none;
}
感觉有想法及时写下来还是挺好的。
本文作者:罗坚元