前端腾讯导航代码实现
程序员文章站
2022-06-26 11:42:17
前端腾讯导航代码实现
...
前端腾讯导航代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>腾讯导航</title>
<style>
*{margin: 0;
padding: 0;
overflow: hidden;
}
#nav{
width: 1000px;
margin:0 auto;
height: 65px;
background: url("nav.jpg");
background-repeat: no-repeat;
}
#nav a{
color: #fff;
text-decoration: none;
font-size: 14px;
margin:0px 0 0 15px;
display: block;
width: 30px;
height: 15px;
float: left;
}
.a_m_l20{
padding-left: 20px;
background-color: red;
}
</style>
</head>
<body>
<p id="nav">
<a href="#">新闻</a>
<a href="#">图片</a>
<a href="#">军事</a>
<a href="#" class="a_m_l20">视频</a>
<a href="#">热剧</a>
<a href="#">综艺</a>
<a href="#">娱乐</a>
<a href="#">明星</a>
<a href="#">电影</a>
<a href="#">汽车</a>
<a href="#">车型</a>
<a href="#">购物</a>
<a href="#">科技</a>
<a href="#">数码</a>
<a href="#">手机</a>
<a href="#">教育</a>
<a href="#">课程</a>
<a href="#">出国</a>
<a href="#">公益</a>
<a href="#">佛学</a>
<br>
<a href="#">财经</a>
<a href="#">证券</a>
<a href="#">理财</a>
<a href="#">体育</a>
<a href="#">NBA</a>
<a href="#">CBA</a>
<a href="#">时尚</a>
<a href="#">健康</a>
<a href="#">育儿</a>
<a href="#">房产</a>
<a href="#">家居</a>
<a href="#">家电</a>
<a href="#">游戏</a>
<a href="#">儿童</a>
<a href="#">星座</a>
<a href="#">文化</a>
<a href="#">大家</a>
<a href="#">文学</a>
<a href="#">拍客</a>
<a href="#">更多</a>
</p>
<p id="box1">box1</p>
<p id="box2">box2</p>
<p id="box3">box3</p>
<p id="box4" style="clear: both;height: 1000px">box4</p>
<p id="box5">box5</p>
<p id="box6">box6</p>
<p id="box7">box7</p>
<p id="box8">box8</p>
<p id="box9">box9</p>
<p id="box10">box10</p>
</body>
</html> 上一篇： 前端实现超链接发送邮件的代码