导航，头部，CSS基础

最新推荐文章于 2024-11-08 09:05:39 发布

weixin_30517001

最新推荐文章于 2024-11-08 09:05:39 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yybx/p/7688563.html

本文介绍如何使用HTML与CSS创建个性化的导航条，并演示了不同类型的样式表应用方法，包括行内样式表、内嵌样式表及外部样式表，同时讲解了如何使用HTML选择器、CLASS类选择器和ID选择器来定义样式。

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

制作自己的导航条。
HTML头部元素：
1. <base> 定义了页面链接标签的默认链接地址
2. <style> 定义了HTML文档的样式
3. <link> 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表
分别练习定义三类选择器：
1. HTML 选择器
2. CLASS 类选择器
3. ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="http://p1.so.qhimgs1.com/t0148db23e6d9b288ad.jpg" target>
</head>
<body>

</body>

<nav>
    <a href=""><img src="http://p1.so.qhimgs1.com/t0148db23e6d9b288ad.jpg">首页</a>
    <a href="http://www.gzcc.cn">欢迎</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="">登陆</a>
    <a href="">注册</a>
</nav>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet"  type="text/css" href="test1.css.html">-->
    <style type="text/css">
      p{
      color: red;
    }
      .zidingyi{
         color: blue;
    }
    #commentcount{
          background-color: aquamarine;
    }
    </style>
</head>
<body>
<p>双11全部商品</p>
<p>双11全部商品5折</p>
<h1 class="zidingyi">双11全部商品5折</h1>
<h2><span id="commentcount" >1000</span>点赞</h2>
</body>
</html>

    p{
      color: red;
    }
      .zidingyi{
         color: blue;
    }
    #commentcount{
          background-color: aquamarine;
    }

转载于:https://www.cnblogs.com/yybx/p/7688563.html