前端菜鸟模仿新浪导航

来源：互联网发布：js 小于等于0 编辑：程序博客网时间：2024/05/16 14:48

大家可以去新浪网看看导航，前几天突然有这样的一个想法，所以就来撸一番代码。详细看代码。
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;}

感觉有想法及时写下来还是挺好的。

本文作者:罗坚元

1 1