実験原理
CSS スタイル ファイルを作成することで、CSS スタイルの基本プロパティの役割と意味を理解します。
目的
CSS の基本的な概念と機能を理解する
CSS スタイルの設計原則を理解する
CSS スタイルの基本的な宣言方法を理解して習得する
さまざまな CSS セレクターの使用方法を理解して習得するテキスト
、テーブル、ハイパーリンク、および CSS の共通属性の使用方法を理解して習得するその他の要素
また、背景、色、内側と外側の余白、サイズ、角丸などの CSS の基本プロパティの使用をマスターします。実験内容
Experiment-02 に基づいて Maven Web プロジェクトとモジュールを作成します。プロジェクトのパッケージ化タイプは war です。src
/main の下に webapp ディレクトリを作成します。webapp
ディレクトリの下に table.html ファイルを作成し、テスト データを書き込み、データを完成させます。テーブル実行結果の表示
要件 + 設計のヒント
CSS プロパティを定義して上記の HTML コンテンツを最適化することを実現します。
テキスト コンテナ スタイル抽象ラベル テキスト コンテナ スタイルを作成します。デフォルトのラベルの角丸は 3 ピクセル、左右のパディングは 5 ピクセル、フォントは白です。これは、成功したラベル スタイルと特定の意味を
持つ
警告ラベルを強調表示して明示的に作成するために使用されます。特定のスタイルの背景色。スタイル、さまざまな適切な背景色を宣言します。
テキスト コンテナーを使用するには、「カスケード」宣言を使用します。表スタイル
最大幅を占めます。タイトルとコンテンツの両方、パディングは上下左右 10 ピクセルです。行の最下行のみが表示されます。奇数行と偶数行の背景色は異なります。ハイパーリンク ボタン スタイル ボタン スタイル
のハイパーリンク、濃い赤の背景、8 ピクセルの角丸、フォントの色、テキストの下線のキャンセル、内側のマージンの増加、適切な明示的なタイプの宣言、マウス ホバー時のスタイルの変更方法、計算を定義します。
インラインハイパーリンクの行の高さをレンダリングするとき?ページの表示スタイルが以下になるようにHTMLコードを修正し、CSSで宣言したクラスを該当要素に追加します。
バージョン1.0
上記の要件に加えて、シャドウ + グラデーション + トランジションを追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: gainsboro;
}
p{
font-family: "Adobe 宋体 Std L",serif;
font-weight: bold;
}
span.label{
border-radius: 10px;
padding: 0 5px;
color: white;
font-style: italic;
z-index: 1000;
}
span.label-sucess{
background-image: linear-gradient(to bottom right,green, greenyellow);
}
span.label-warning{
background: orange;
background-image: linear-gradient(to bottom right,gold, orange);
}
table{
width: 100%;
border-collapse: collapse;
box-shadow: 5px 5px 1px gray;
table-layout: auto;
}
table th ,table td{
text-align: center;
padding: 10px;
border-bottom: 1px solid #f2f2f2 ;
}
table thead{
background: deepskyblue;
}
tbody tr:nth-child(even){
background: deepskyblue;
}
tbody tr:nth-child(odd){
background: lightskyblue;
}
button.btn{
padding: 10px 25px;
box-sizing: content-box;
font-size: 17px;
text-align: center;
background: rgb(217, 19, 19);
border-radius: 6px;
color: whitesmoke;
display: inline-block;
width: 50px;
height: 25px;
transition: height 400ms,width 400ms;
}
button.btn:hover{
background: red;
width: 55px;
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<h3>学生信息</h3>
<p>说明：以下为2046级学生名单，共4人,
<span class="label label-sucess">成功加载3人</span>。
<span class="label label-warning">警告：列表不包含降级学生</span>。</p>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>班级</th>
<th>Email</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>郭立新</td>
<td>软件工程2046级1班</td>
<td>[email protected]</td>
<td><button class="btn modify" onclick="modifyStudent(1)">修改</button> <button class="btn delete" onclick="deleteStudent(1)">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>黄英</td>
<td>软件工程2046级1班</td>
<td>[email protected]</td>
<td><button class="btn modify" onclick="modifyStudent(2)">修改</button> <button class="btn delete" onclick="deleteStudent(2)">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>吕惠玲</td>
<td>软件工程2046级2班</td>
<td>[email protected]</td>
<td><button class="btn modify" onclick="modifyStudent(3)">修改</button> <button class="btn delete" onclick="deleteStudent(3)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>