【前端新手之路第五天】横向导航栏，html+css+js原生代码

最新推荐文章于 2024-05-22 13:34:30 发布

原创

最新推荐文章于 2024-05-22 13:34:30 发布 · 4.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#横向导航栏 #js原生代码

本文介绍了如何使用HTML、CSS和JavaScript原生代码创建一个横向导航栏。通过设置ul为absolute定位，li标签为inline-block，a标签为block，并利用padding调整布局，可以简洁高效地实现导航栏，且适应内容长度变化。

今天参加了某个公司的笔试，笔试的题是比较熟悉，但是自己不能保证自己完全正确，就发现自己有些眼高手低了。

来，大家跟我一起喊：键盘敲烂，月薪过万。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换肤</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }/*一定要设置，ul,li等元素有默认的margin，padding。不手动去掉影响以后布局*/
        .tabBox{
            background-color: darkgrey;
            border-bottom: 1px solid black;
            position: relative;
            height: 70px;
        }
        ul{
            list-style: none;
            position: absolute;
            left: 50px;
            bottom: 0;
            height: 50px;
        }
        li{
            float: left;
        }
        a{
            display: inline-block;
            padding: 10px;/*撑开a标签，不让边框紧贴着文字*/
            height: 30px;
            line-height: 30px;/*垂直方向上居中，vertical-align没有作用，当height=line-height时居中！！*/
            font-size: 18px;
            t