Web实验三 CSS基本网页布局实验-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web实验三 CSS基本网页布局实验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实验原理

文章来源地址https://www.toymoban.com/news/detail-483138.html

通过定义css样式，理解css属性以及页面真整体结构布局的方法及设计思想。

实验目的

理解并掌握多种css选择器的使用方法
理解并掌握后代选择器的作用及使用设计方法
理解并掌握伪类的作用、意义及使用方法
理解并掌握基于div容器页面布局的方法
理解并掌握页面整体结构布局的实现方法及设计思想
理解并掌握上导航、边侧栏的实现方法及设计思想

实验内容

创建maven Web项目及模块，experiment-03，项目打包类型为war
在src/main下，创建webapp目录
在webapp目录下，创建layout.html文件，基于给定HTML代码实现页面布局设计，允许添加class等属性引入css样式

需求+设计提示

为各部分区域设计统一样式；全局取消元素内外边距，按box尺寸计算

需求0
基于当前HTML代码，按12栅格布局页面。
Container根容器居中最大宽度960px
Row弹性行容器
header/footer各占1行12列
main中sidebar占3列；article占9列。

上导航+1
header中声明上导航，添加背景色/悬浮字体颜色等样式，且将logout推至最右侧

页脚+1
元素居中

左侧边栏+1
为左侧边栏添加样式，添加背景色/字体色/悬浮等等样式

运行显示结果

Web实验三 CSS基本网页布局实验

<!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>

Web实验三 CSS基本网页布局实验