头歌——CSS从入门到精通——定位与布局

最新推荐文章于 2024-03-30 15:13:14 发布

Changersh

最新推荐文章于 2024-03-30 15:13:14 发布

阅读量1.5k

点赞数 8

分类专栏：头歌前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/Changersh/article/details/135020480

版权

头歌同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

第1关：带侧边栏布局：带导航的网页

<!DOCTYPE html>
<html>
<head>
  <title>带侧边栏布局：带导航的网页</title>
  <meta charset="UTF-8">
  <style>
    /* 设置页面整体样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
    }

    /* 设置内容区样式 */
    .content {
      flex: 1; /* 自动填充剩余空间 */
      padding: 30px; /* 内容区内边距 */
    }

    /* ******************** BEGIN ******************** */
    /* 设置侧边栏样式 */
    .sidebar {
      width: 250px; 
      background-color: #111; 
      color: #fff; 
      padding-top: 20px; 
    }

    /* 设置侧边栏链接样式 */
    .sidebar a {
      padding:  10px 20px;
      text-decoration:  none;
      color:  #ccc;
      display:  block;
    }

    /* 导航样式 */
    nav {
      background-color:  #333;
      padding:  10px;
    }

    /* 导航链接样式 */
    nav a {
      color:  #ccc;
      padding:  20px;
      text-decoration: none;
    }

    /* ******************** END ******************** */

  </style>
</head>
<body>

  <!-- 侧边栏 -->
  <div class="sidebar">
    <a href="#">Sidebar Link 1</a>
    <a href="#">Sidebar Link 2</a>
    <a href="#">Sidebar Link 3</a>
    <!-- 根据需要添加更多侧边栏链接 -->
  </div>

  <!-- 内容区 -->
  <div class="content">
    <!-- 导航 -->
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <!-- 根据需要添加更多导航链接 -->
    </nav>

    <!-- 主要内容 -->
    <h1>Main Content</h1>
    <p>This is the main content of the page.</p>
  </div>

</body>
</html>

第2关：相对与绝对布局：悬浮的提示框页面

<!DOCTYPE html> <!-- 定义HTML5文档类型 -->
<html>
    <head>
        <title>相对与绝对布局</title>
        <meta charset="UTF-8">

        <style>
            body {
            font-family: Arial, sans-serif; /* 设置字体样式为Arial或sans-serif */
            padding: 20px; /* 设置页面内边距为20像素 */
            }

            .container {
            position: relative; /* 设置相对定位 */
            width: 300px; /* 设置容器宽度为300像素 */
            margin: 0 auto; /* 设置外边距使其水平居中 */
            }

            .trigger {
            background-color: #3498db; /* 设置背景颜色为蓝色 */
            color: #fff; /* 设置文字颜色为白色 */
            padding: 10px 20px; /* 设置内边距 */
            border: none; /* 移除边框 */
            cursor: pointer; /* 设置鼠标指针样式为手型 */
            }
    /* ******************** BEGIN ******************** */
            .popup {
            display: none; 
            position: absolute; 
            z-index: 1; 
            background-color: #fff; /* 设置背景颜色为白色 */
            border: 1px solid #ccc; /* 设置边框 */
            padding: 10px; /* 设置内边距 */
            width: 200px; /* 设置宽度为200像素 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */            
            top: 100%; /* 位于触发元素下方 */
            left: 50%; /* 位于触发元素水平居中 */
            transform: translateX(-50%); /* 水平居中 */
            }

            .trigger:hover + .popup {
            display: block; 
            }

    /* ******************** END ******************** */
        </style>
    </head>
    <body>

        <div class="container">
            <button class="trigger">Hover me for a tooltip</button> <!-- 按钮触发显示tooltip -->
            <div class="popup">This is a tooltip!</div> <!-- tooltip内容 -->
        </div>

    </body>
</html>