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

痛定思痛。 2024-04-17 11:47 74阅读 0赞

#### 实验原理 ####

通过定义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**  
为左侧边栏添加样式，添加背景色/字体色/悬浮等等样式

运行显示结果

![8b9587a6a9b883ace065b81a473542e4.png][]

<!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">
      
      <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>
      
      <div class="area row">
        
        <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>
        
        <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>
      
      <div class="area row">
        <div class="col-md-12 footer">
          <p>东北林业大学<br>
            软件工程专业 2046©</p>
        </div>
      </div>
    </div>
    </body>
    </html>

![33fb1577dec6496fa1308e43d494a811.png][]

[8b9587a6a9b883ace065b81a473542e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/c1254071d32b451784a52a2db63a4638.png
[33fb1577dec6496fa1308e43d494a811.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/ec809cebc2f94d44991d63e127a65f38.png