HTML+CSS一级导航栏

最新推荐文章于 2025-05-11 15:27:57 发布

Tina_dl

最新推荐文章于 2025-05-11 15:27:57 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VScode HTML CSS 导航栏文章标签： HTML+CSS 导航栏

本文链接：https://blog.youkuaiyun.com/Tina_dl/article/details/88815997

HTML CSS 同时被 3 个专栏收录

6 篇文章

订阅专栏

导航栏

4 篇文章

订阅专栏

VScode

2 篇文章

订阅专栏

本文通过一个简单的网页实例介绍了HTML和CSS的基本用法。包括HTML文档结构、CSS样式定义及超链接样式控制等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大一学的都忘记了，有机会重新学习一遍，简单记录下（小傻猫），日常
记录学习

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../CSS/Top导航栏.css" type="text/css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div class="index">
      <div class="header">页眉</div>
      <div class="nav">
                <a href="text1.html">主页</a>
                <a href="#">音乐</a>
                <a href="#">运动</a>
                <a href="#">美食</a>
                <a href="#">休闲</a>
      </div>
  </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    background-color:white;
}
.header{
    margin: 0 auto;
    width: 100%;
    height: 30px;
    background-color: seashell;
    text-align: center;
}

.nav{
    
    margin: 0 auto;
    width: 100%;
    height: 40px;
    background-color: lightblue;  
    font-size: 18px;
    text-indent: 2em;
    line-height: 2em; /*距离上边线的距离*/
    text-align: justify;
}

a{
    margin-right: 90px;/*超链接 相对于左右边的距离的设置   */
    margin-left:100px;
    font-size: 18px;   /* 文字大小的设置   */
    color:pink;     /* 连接字体的颜色  */
    text-decoration: none;  /*消除掉超链接下面的横线*/
}

/* 未访问时的状态 ,访问过的状态 */
a:link,a:visited{
    color: #333333;
} 

/* 鼠标经过连接上的状态 */
a:hover{
    color: lightgoldenrodyellow;
}
/* 鼠标点击连接的状态 */
a:active{
 color: lightseagreen;    
}

效果：
在这里插入图片描述