css基础导航案例

爱好是吃的蓝胖

已于 2022-12-30 18:55:02 修改

阅读量176

点赞数 1

分类专栏： css基础案例文章标签： css html 前端

于 2022-12-29 16:50:34 首次发布

本文链接：https://blog.csdn.net/m0_61044901/article/details/128484450

版权

本文介绍了CSS基础的导航栏实现，包括两个简单的标题导航案例和一个网页新闻列表案例，以及一个网页导航案例的渲染展示，通过代码示例详细解析了CSS在前端布局中的应用。

摘要由CSDN通过智能技术生成

简单的标题导航案例1：

渲染

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* text-decoration: none;   去掉a标签的下划线 
		display: inline-block;   行内块
		*/
    a {
      text-decoration: none;
      display: inline-block;
      width: 80px;
      height: 30px;
      background: red;
      text-align: center;
      line-height: 30px;
      color: white;
    }
  </style>
  <body>
    <a href="#">导航1</a>
    <a href=