实验原理
通过定义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
为左侧边栏添加样式，添加背景色/字体色/悬浮等等样式
运行显示结果
<!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©</p></div></div>
</div>
</body>
</html>
