Web Experiment 3 CSS Basic Web Page Layout Experiment

Experimental principle

By defining the css style, understand the css attribute and the method and design idea of the overall structural layout of the page.

Purpose

Understand and master the use of various css selectors
Understand and master the function and use design method of descendant selectors Understand
and master the function, meaning and use of pseudo
-classes
The implementation method and design idea of structural layout
Understand and master the implementation method and design idea of upper navigation and sidebar

Experimental content

Create a maven web project and module, experiment-03, the project packaging type is war
under src/main, create a webapp directory
under the webapp directory, create a layout.html file, realize the page layout design based on the given HTML code, and allow adding classes, etc. attribute import css style

Requirements + Design Tips

Design a unified style for each part of the area; cancel the inner and outer margins of the element globally, and calculate according to the box size

Requirement 0
is based on the current HTML code, and the page is laid out in a grid of 12.
The container root container is centered and the maximum width is 960px. The
Row elastic row container
header and footer each occupy 1 row and 12 columns.
The main sidebar occupies 3 columns; the article occupies 9 columns.

Up navigation +1
Declare up navigation in the header, add styles such as background color/floating font color, and push the logout to the far right

Footer +1
element centered

Left sidebar +1
to add styles to the left sidebar, add background color/font color/floating and other styles

run display result

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container{
      max-width: 960px;
      margin: 0 auto;
    }
    .row {
      display: flex;
      align-items: flex-start;
    }
    .area{
      background: plum;
      border-radius: 5px;
      border: 3px solid mediumpurple;
      padding: 10px;
    }
    .col-md-12 {
      flex: 0 0 100%;
      /*flex: 0 0 100% 是一个缩写属性，它包含了三个子属性：flex-grow, flex-shrink 和 flex-basis。它们分别控制了弹性项目的放大比例，缩小比例和基准大小。*/
    }

    .col-md-9 {
      flex: 0 0 75%;
    }

    .col-md-3 {
      flex: 0 0 25%;
    }
    .nav {
      list-style: none;
      display: flex;
    }
    .nav li a {
      display: block;
      padding: 15px 25px;
      text-decoration: none;
      justify-content: space-between;
      color: white;
      background-color: mediumorchid;
    }
    .nav a:hover {
      background-color: magenta;
      cursor: url(https://dl.zhutix.net/2023/04/170332.png),auto;

    }
    .nav .right {
      margin-left: auto;
    }
    .sidebar {
      min-width: 200px;
    }
    .sidebar-group {
      background: gainsboro;
    }
    .sidebar-group > ul {
      list-style: none;
    }
    .sidebar-group > h2 {
      background: dodgerblue;
      color: white;
      padding: 10px 20px;
    }
    .sidebar-group a{
      display: block;
      color: black;
      text-decoration: none;
      padding: 10px 20px;
      opacity: 0.8;
      transition: transform  0.5s;
    }
    .sidebar-group a:hover{
      background: darkgrey;
      color: white;
      opacity: 1;
      transform: scale(1.1);
      cursor: url(https://dl.zhutix.net/2023/04/170344.png),auto;
    }
    
    .footer p {
      font-family: 宋体,serif;
      text-align: center;
    }

  </style>
</head>
<body>
<div class="container">
  <!-- header -->
  <div class="area row">
    <div class="col-md-12">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li class="right"><a href="#">Logout</a></li>
      </ul>
    </div>
  </div>
  <!-- main  -->
  <div class="area row">
    <!-- sidebar -->
    <div class="area col-md-3 sidebar">
      <div class="sidebar-group">
        <h2>云技术管理</h2>
        <ul>
          <li><a href="#">云服务器</a></li>
          <li><a href="#">云数据库</a></li>
          <li><a href="#">负载均衡</a></li>
        </ul>
      </div>
      <div class="sidebar-group">
        <h2>安全管理</h2>
        <ul>
          <li><a href="#">云盾控制台</a></li>
          <li><a href="#">DDoS高防IP</a></li>
          <li><a href="#">Web应用防火墙</a></li>
          <li><a href="#">CA证书服务</a></li>
        </ul>
      </div>
    </div>
    <!-- article -->
    <div class="area col-md-9">
      <h1>设计内容</h1>
      <p>为各部分区域设计统一样式；全局取消元素内外边距，按box尺寸计算</p>
      <h3>需求0</h3>
      <p>基于当前HTML代码，按12栅格布局页面。Container根容器居中最大宽度960px；Row弹性行容器；
        header/footer各占1行12列；main中sidebar占3列；article占9列。</p>
      <h3>上导航+1</h3>
      <p>header中声明上导航，添加背景色/悬浮字体颜色等样式，且将logout推至最右侧</p>
      <h3>页脚+1</h3>
      <p>元素居中</p>
      <h3>左侧边栏+1</h3>
      <p>为左侧边栏添加样式，添加背景色/字体色/悬浮等等样式</p>
    </div>
  </div>
  <!-- footer -->
  <div class="area row">
    <div class="col-md-12 footer">
      <p>东北林业大学<br>
        软件工程专业 2046&copy;</p>
    </div>
  </div>
</div>
</body>
</html>