Skip to content

CSS基础实验

1 实验类型

验证型，2学时，必选实验

2 实验目的

学习CSS语法和常见属性；掌握如何使用CSS控制网页元素的样式

3 实验要求

验证参考代码；修改参考代码，实现自己的设计；将关键结果截图及源代码整理成实验报告

4 实验环境

Windows7、浏览器（推荐使用Chrome/Microsoft Edge/Firefox等）、Visual Studio Code(VS Code)

5 实验步骤

创建工作目录：{盘符}:/{学号}/exp2_2

基础语法

使用不同方式编写CSS样式规则对页面进行修饰，步骤如下：

内部CSS

创建文件：css_gramma_1.html，使用内部CSS修饰网页元素，尝试修改页面背景颜色，参考代码如下：

内部CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>

</html>

外部CSS

  1. 在css_gramma_1.html页面基础上将样式规则改为外部引用方式，将样式规则提取到独立文件：css_gramma_2.css，参考代码如下：

    被引用样式：css_gramma_2.css
    1
2
3
4
5
6
7
8
    body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}

  2. 修改链接方式后另存为css_gramma_2.html，参考代码如下：

    主页面：css_gramma_2.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css_gramma_2.css">
</head>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>

</html>

  3. 测试链接是否生效

常见属性

使用盒模型中的padding,margin等常见属性对<div>标签进行修饰

  1. 创建文件：css_common_1.html，编写CSS代码修饰div元素理解CSS盒模型，修改背景颜色、宽度、边框宽度、内容边框间距等属性，参考代码如下：

    div留白
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <!DOCTYPE html>
<html>

<head>
  <style>
    div {
      background-color: lightgrey;
      width: 300px;
      border: 15px solid green;
      padding: 30px;
      margin: 10px;
    }
  </style>
</head>

<body>
  <h1>演示</h1>
  <p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边
    框、内边距（填充）、外边距以及实际的内容。</p>
  <div>此文本是盒子里的内容。我们添加了 50px 的内边距，20px 的外边距和 15px
    的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的
    内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。
  </div>
</body>

</html>

  2. 创建文件：css_common_2.html，使用CSS创建带边框的超链接，尝试改度不同状态下超链接的外观，参考代码如下：

    带边框的超链接
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    <!DOCTYPE html>
<html>

<head>
  <style>
    a:link,
    a:visited {
      background-color: white;
      color: black;
      border: 2px solid green;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
    }

    a:hover,
    a:active {
      background-color: green;
      color: white;
    }
  </style>
</head>

<body>
  <a href="javascript:alert('Are you OK?');">点我</a>
</body>

</html>

  3. 创建文件：css_common_3.html，用CSS美化table，使用ID选择器定义外观并修改常见外观属性，参考代码如下：

    CSS美化table
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    <!DOCTYPE html>
<html>

<head>
  <style>
    #customers {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    #customers td,
    #customers th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    #customers tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    #customers tr:hover {
      background-color: #ddd;
    }

    #customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>

<body>
  <table id="customers">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Address</th>
      <th>City</th>
    </tr>
    <tr>
      <td>Alibaba</td>
      <td>Ma Yun</td>
      <td>No. 699, Wangshang Road, Binjiang District</td>
      <td>Hangzhou</td>
    </tr>
    <tr>
      <td>APPLE</td>
      <td>Tim Cook</td>
      <td>1 Infinite Loop Cupertino, CA 95014</td>
      <td>Cupertino</td>
    </tr>
  </table>
</body>

</html>

文字排版

创建文件：css_word_1.html，选择一首小诗或小短文，使用标题，段落，链接，列表等标签对文字进行排版，并使用字体，颜色，大小，对齐等样式属性对版面进行美化。参考代码如下：

文字排版
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>排版</TITLE>
  <style>
    P {
      font-family: LiSu;
      font-size: 18px;
      color: black;
      text-align: center;
    }

    H2 {
      background-color: rgb(245, 245, 245);
      text-align: center;
    }

    .author {
      font-family: SimSun;
      font-size: 12px;
      color: rgb(139, 0, 0);
      text-align: center;
    }

    .word {
      color: gray;
    }

    .detail {
      color: gray;
    }

    A {
      text-decoration: none;
    }

    A:visited {
      text-decoration: none;
    }

    A:hover {
      text-decoration: underline;
    }
  </style>
</HEAD>

<BODY>
  <H2>出塞</H2>
  <p class="author">作者：<a href="#a2" class="word">王昌龄</a></p>
  <P>秦时明月汉时关，</P>
  <p>万里长征人未还。</p>
  <p>但使<a href="#a2" class="word">龙城</a>飞将在，</p>
  <p>不教胡马度<a href="#a3" class="word">阴山</a>。</p>
  <br>
  <hr>
  <b>【注释】</b>
  <ol>
    <li><a name="a1" class="detail">王昌龄</a>： (698年—757年)字少伯,唐朝时期大臣，著名边塞诗人。</li>
    <li><a name="a2" class="detail">龙城</a>：龙城是匈奴祭天集会的地方。</li>
    <li><a name="a3" class="detail">阴山</a>：昆仑山的北支，起自河套西北，横贯绥远、察哈尔及热河北部，是我国北方的屏障。</li>
  </ol>
</BODY>

</HTML>

综合

导航菜单

使用Html+Css实现页面顶部的导航菜单

  1. 创建文件：css_nav_1.html，用列表和CSS创建导航菜单，尝试改变菜单的外观，参考代码如下：
导航菜单
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>

<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a,
    .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover,
    .dropdown:hover .dropbtn {
      background-color: red;
    }

    li.dropdown {
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">运动</a>
      <div class="dropdown-content">
        <a href="#">足球</a>
        <a href="#">篮球</a>
        <a href="#">排球</a>
      </div>
    </li>
  </ul>
  <h1>导航栏内的下拉菜单</h1>
  <p>请悬停到 "运动" 链接上，以查看下拉菜单。</p>
</body>

</html>

对话框

创建文件：css_model_1.html，使用Html+Css实现具有标题、正文和关闭按钮的模式对话框，参考代码如下：

对话框
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>模式对话框</title>

  <style>
    body {
      color: #333;
      font-family: 'Helvetica', arial;
    }

    .wrap {
      padding: 40px;
      text-align: center;
    }

    hr {
      clear: both;
      margin-top: 40px;
      margin-bottom: 40px;
      border: 0;
      border-top: 1px solid #aaa;
    }

    h1 {
      font-size: 30px;
      margin-bottom: 40px;
    }

    p {
      margin-bottom: 20px;
    }

    .btn {
      background: #428bca;
      border: #357ebd solid 1px;
      border-radius: 3px;
      color: #fff;
      display: inline-block;
      font-size: 14px;
      padding: 8px 15px;
      text-decoration: none;
      text-align: center;
      min-width: 60px;
      position: relative;
      transition: color 0.1s ease;
    }

    .btn:hover {
      background: #357ebd;
    }

    .btn.btn-big {
      font-size: 18px;
      padding: 15px 20px;
      min-width: 100px;
    }

    .btn-close {
      color: #aaa;
      font-size: 30px;
      text-decoration: none;
      position: absolute;
      right: 5px;
      top: 0;
    }

    .btn-close:hover {
      color: #919191;
    }

    .modal:before {
      content: "";
      display: none;
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
    }

    .modal:target:before {
      display: block;
    }

    .modal:target .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      top: 20%;
    }

    .modal-dialog {
      background: #fefefe;
      border: #333 solid 1px;
      border-radius: 5px;
      margin-left: -200px;
      position: fixed;
      left: 50%;
      top: -100%;
      z-index: 11;
      width: 360px;
      -webkit-transform: translate(0, -500%);
      -ms-transform: translate(0, -500%);
      transform: translate(0, -500%);
      -webkit-transition: -webkit-transform 0.3s ease-out;
      -moz-transition: -moz-transform 0.3s ease-out;
      -o-transition: -o-transform 0.3s ease-out;
      transition: transform 0.3s ease-out;
    }

    .modal-body {
      padding: 20px;
    }

    .modal-header,
    .modal-footer {
      padding: 10px 20px;
    }

    .modal-header {
      border-bottom: #eee solid 1px;
    }

    .modal-header h2 {
      font-size: 20px;
    }

    .modal-footer {
      border-top: #eee solid 1px;
      text-align: right;
    }
  </style>

</head>

<body>
  <div class="wrap">
    <a href="#modal-one" class="btn btn-big">打开模式对话框</a>
  </div>

  <div class="modal" id="modal-one" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-header">
        <h2>这是标题</h2>
        <a href="#" class="btn-close" aria-hidden="true">×</a>
      </div>
      <div class="modal-body">
        <p>哇！这是正文</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn">关闭</a>
        <a href="#" class="btn">保存</a>
      </div>
    </div>
  </div>

</body>

</html>

在浏览器中打开页面，改变浏览器窗口大小并观察效果

表单与表格

使用CSS对Html基础实现中创建的学生表输入界面(表单)和输出(表格)进行美化

  1. 创建文件：student_form.css，为学生表表单编写美化代码，参考代码如下：

    学生表表单界面样式
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    input[type=text], input[type=number], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

  2. 修改文件：student_form.html，添加CSS引用，参考代码如下：

    学生表界面
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
  <link rel="stylesheet" type="text/css" href="STUDENT_form.css">
</head>

<body>
  <h3>学生表</h3>
  <div class="container">
    <form action="#">
      <div>
        <label for="no">学号:</label>
        <input type="text" id="no" name="no" placeholder="请输入学号..">
      </div>
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名..">
      </div>
      <div>
        <label for="gender">性别:</label>
        <input type="text" id="gender" name="gender" placeholder="请输入性别..">
      </div>
      <div>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" placeholder="请输入年龄..">
      </div>
      <div>
        <label for="dept">所在系:</label>
        <input type="text" id="dept" name="dept" placeholder="请输入所在系..">
      </div>

      <button type="submit">提交</button>
    </form>
  </table>
</body>

</html>

  3. 创建文件：student_table.css，为学生表表格界面编写美化代码，参考代码如下：

    学生表表格界面样式
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    #STUDENT {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  width: 100%;
  border-collapse: collapse;
}

#STUDENT td,
#STUDENT th {
  font-size: 1em;
  border: 1px solid rgb(223, 224, 225);
  padding: 3px 7px 2px 7px;
}

#STUDENT th {
  font-size: 1.1em;
  text-align: left;
  padding-top: 5px;
  padding-bottom: 4px;
  background-color: rgb(223, 224, 225);
  color: #000000;
}

#STUDENT tr.alt td {
  color: #000000;
  background-color: rgb(222,226,230);
}

  4. 修改文件：student_table.html，添加CSS引用，参考代码如下：

    学生表表格界面
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
  <link rel="stylesheet" type="text/css" href="STUDENT_table.css">
</head>

<body>
  <h3>学生表</h3>
  <table id="STUDENT" border="1">
    <thead>
      <th><input type="checkbox"></th>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>所在系</th>
      <th>操作</th>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>200215121</td>
        <td>李勇</td>
        <td>男</td>
        <td>20</td>
        <td>CS</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>200215122</td>
        <td>刘晨</td>
        <td>女</td>
        <td>19</td>
        <td>CS</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>200215123</td>
        <td>王敏</td>
        <td>女</td>
        <td>18</td>
        <td>MA</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>200515125</td>
        <td>张立</td>
        <td>男</td>
        <td>19</td>
        <td>IS</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

拓展练习

  1. 使用CSS美化课程表的表单和表格界面