Html/CSS的应用（1）

「已注销」

于 2022-05-09 21:11:15 发布

阅读量192

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Html/CSS/Js网页文章标签： css html

本文链接：https://blog.youkuaiyun.com/InterspaceITX/article/details/124675372

Html/CSS/Js网页专栏收录该内容

9 篇文章

订阅专栏

用CSS制作导航栏

让页面更加美观

当光标移到列表的方格中，列表的方格会变色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #0000FF;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="">主页</a></li>
  <li><a href="">新闻</a></li>
  <li><a href="">联系</a></li>
  <li><a href="">关于</a></li>
</ul>

<div style="margin-left:15%;padding:1px 16px;height:1000px;">
  <h2></h2>
  <h3></h3>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

</body>
</html>

以下为效果图↓