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

第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 1a>
    <a href="#">Sidebar Link 2a>
    <a href="#">Sidebar Link 3a>
    
  div>

  
  <div class="content">
    
    <nav>
      <a href="#">Homea>
      <a href="#">Abouta>
      <a href="#">Contacta>
      
    nav>

    
    <h1>Main Contenth1>
    <p>This is the main content of the page.p>
  div>

body>
html>

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

DOCTYPE html> 
<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 tooltipbutton> 
            <div class="popup">This is a tooltip!div> 
        div>

    body>
html>

第3关:瀑布流布局:图片浏览页面

ACB

你可能感兴趣的:(头歌,前端,css,前端,css3)