Experimental principle
By creating a CSS style file, understand the role and meaning of the basic properties of CSS style.
Purpose
Understand the basic concepts and functions
of CSS Understand the design principles of CSS styles
Understand and master the basic declaration methods of CSS styles
Understand and master the use of various CSS selectors Understand and master
the usage methods of common attributes of text, tables, hyperlinks and other elements
And master the use of CSS basic properties such as background, color, inner and outer margins, size, rounded corners, etc.Experimental content
Create a maven web project and module based on experiment-02, the project packaging type is war
under src/main, create a webapp directory
under the webapp directory, create a table.html file, write test data, and complete a data tablerun display result
Requirements + Design Tips
Realize, optimize the above html content by defining CSS properties
Text container style Create an abstract label text container style. The default label rounded corners are 3px, left and right padding is 5px, and the font is white. It is used to highlight and explicitly create successful label styles and warning labels with specific meaning
in the background color of the specific style.
Styles, declare different appropriate background colors
Use "cascading" declarations to use text containersTable style
Occupies the maximum width; both the title and the content, and the padding is 10px from top to bottom; only the bottom line of the row is displayed; the background colors of odd and even rows are differentHyperlink button style
Define the hyperlink of the button style, dark red background, 8px rounded corners, font color, cancel text underline, increase padding, declare appropriate explicit type, how to change the style when the mouse is hovering, calculate when rendering the
line height of inline hyperlink?Modify the html code, add the class declared by CSS to the appropriate element, so that the display style of the page is
version 1.0
In addition to the above requirements, add shadows + gradients + transitions
<!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>