[分享]css修饰页面实验报告

本次实验我们学习了如何使用CSS来修饰页面，使其更加美观和清晰。通过改变页面的颜色、字体、排版、背景图以及添加边框等方法，我们成功地将静态的HTML页面变得更加生动。下面是本次实验中使用的部分CSS代...

本次实验我们学习了如何使用CSS来修饰页面，使其更加美观和清晰。通过改变页面的颜色、字体、排版、背景图以及添加边框等方法，我们成功地将静态的HTML页面变得更加生动。

下面是本次实验中使用的部分CSS代码：

/* 改变页面背景颜色 */
body {
  background-color: #f4f4f4;
}

/* 添加页面边框 */
body {
  border: 1px solid #ddd;
}

/* 更改页面字体和颜色 */
h1 {
  font-family: Arial, sans-serif;
  color: #333;
}

/* 将页面中的表格添加斑马线样式 */
table {
  border-collapse: collapse;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:nth-child(odd) {
  background-color: #e6e6e6;
}

/* 更改列表样式 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  padding-left: 20px;
  background-image: url('bullet.png');
  background-repeat: no-repeat;
  background-position: 0 50%;
} 

通过这些CSS代码的使用，我们成功地修改了页面布局、字体、字号、颜色、边框和表格斑马线等各个方面，使得页面更加美观、清晰而富有层次感。