前端菜鸟模仿新浪导航

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

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

本文作者:罗坚元

前端菜鸟模仿新浪导航相关推荐

CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
新浪导航（html+css）
一. 主要应用padding内边距可以撑开盒子,对于字数不同的文字不需要设置不同宽度的盒子. 二.代码实现 <!DOCTYPE html> <html lang="en&q ...
新浪导航案例-padding影响盒子好处
新浪导航案例-padding影响盒子好处效果如下: 代码如下: <!DOCTYPE html> <html lang="zh-CN"><head&g ...
Fragment+TabHost模仿新浪新闻布局界面
Fragment+TabHost模仿新浪新闻布局界面采用FragmentTabHost的综合布局实现的新浪新闻的效果. 下载地址:http://www.devstore.cn/code/info/3 ...
实用的JS模仿新浪图库播放器样式
查看效果下载地址前台部分代码代码 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
pxcook使用（量尺寸）+盒子模型+残缺新浪导航栏
png用设计左侧尺子量尺寸,查颜色用吸管 psd用开发模式盒子模型盒子由内容区域content+内边距padding+边框border+外边距margin. 3.1边框(快捷键bd+tab) bo ...
前端——菜鸟网站横向CSS导航条菜单：带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法.菜鸟教程首页导航如下图: 其实实现这个功能也挺简单.首先写一个大 ...
渐变的alert_模仿新浪邮箱的alert渐变的提示框
以下为引用的内容: 网页教学网Webjx.Com 提供最新最快的网页技术 *{ margin:0;padding:0; } 测试测试测试测试测试测试测试测试测试测试测试测试测试 ...
新浪导航栏(CSS)
效果: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...

前端菜鸟模仿新浪导航

前端菜鸟模仿新浪导航相关推荐

最新文章

热门文章