実験原理
CSS スタイルを定義することで、CSS 属性の手法や設計思想、ページ全体の構造やレイアウトを理解します。
目的
各種CSSセレクターの使い方を理解し
、使いこなす 子孫セレクターの機能と使い方の設計方法を理解し、使いこなす擬似
機能、意味、使い方を理解し、使いこなす
クラス使いこなす上部ナビゲーションとサイドバーの手法とデザインアイデア
実験内容
Maven Web プロジェクトとモジュール、experiment-03 を作成します。プロジェクトのパッケージ化タイプは src/main の下に war です。webappディレクトリの下に
webapp ディレクトリを作成し、layout.html ファイルを作成します。指定された HTML コードに基づいてページ レイアウト デザインを実現します。
、クラスなどの追加を許可します。属性インポートCSSスタイル
要件 + 設計のヒント
領域の各部分に統一されたスタイルを設計し、要素の内側と外側のマージンをグローバルにキャンセルし、ボックス サイズに応じて計算します
要件 0
は現在の HTML コードに基づいており、ページは 12 のグリッドにレイアウトされます。
コンテナーのルート コンテナーは中央に配置され、最大幅は 960 ピクセルです。
行エラスティック行コンテナーの
ヘッダーとフッターはそれぞれ 1 行と 12 列を占めます。
メイン サイドバーは 3 列を占め、記事は 9 列を占めます。
上へのナビゲーション +1
ヘッダーで上へのナビゲーションを宣言し、背景色/フローティング フォントの色などのスタイルを追加し、ログアウトを右端に押します。
フッター +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>