前端腾讯导航代码实现
程序员文章站
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>
上一篇: 前端实现超链接发送邮件的代码