信息安全实践：CSS

html 文件内容

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link id="link" rel="stylesheet" type="text/css" href="./p1a.css">
	<title>CS 142 Project 1, Problem 1</title>
</head>
<body>
<table>
  <tr>
    <th>Item</th>
	<th>Manufacturer</th>
	<th>Size</th>
    <th>Unit Price</th>
	<th>Quantity</th>
	<th>Total price</th>
  </tr>
  <tr>
    <td>Corn Flakes</td>
    <td>Kellogg's</td>
	<td>18 oz</td>
	<td>2.50</td>
	<td>1</td>
	<td>2.50</td>
  </tr>
  <tr>
	<td>Solid White Tuna</td>
	<td>Starkist</td>
	<td>5 oz</td>
	<td>2.79</td>
	<td>2</td>
	<td>5.58</td>
  </tr>
  <tr>
	<td>Cream of Mushroom Soup</td>
	<td>Campbell's</td>
	<td>10.75 oz</td>
	<td>1.00</td>
	<td>2</td>
	<td>2.00</td>
  </tr>
  <tr>
	<td>2 % Lowfat Milk</td>
	<td>Safeway</td>
	<td>0.5 gal</td>
	<td>1.99</td>
	<td>1</td>
	<td>1.99</td>
  </tr>
  <tr>
	<td>Extra-Wide Egg Noodles</td>
	<td>Golden Grain</td>
	<td>12 oz</td>
	<td>0.87</td>
	<td>3</td>
	<td>2.61</td>
  </tr>
  <tr>
	<td>Total</td>
	<td></td>
	<td></td>
	<td></td>
	<td>9</td>
	<td>14.68</td>
  </tr>
</table>
</body>
</html>

css 文件 p1a 内容

body{text-align: center;}
/*
border-collapse 设置表格的边框是否被合并为一个单一的边框
border-spacing 单元格边框间的距离
width: 50% 表格宽度占其父元素的 50%
*/
table{border-collapse:separate; border-spacing: 0px; font-size:13px; margin: auto; width: 50%;letter-spacing:0.1mm;}

/* tr元素定义表格行，
   th元素定义表头，
   td元素定义表格单元格 
*/
table td{ border-top:1px solid #fff; padding: 20px;}
table th{background:#687291; color: #fff; padding: 2px;}

/*
tr:nth-child(odd)  选择器
*/
table tr:nth-child(odd){background:#EEEFF2;}
table tr:nth-child(even){background:#DFE1E7;}

/*
隐藏最后一行
*/
table tr:last-child{display:none;}

/*
表头前三列靠左，后三列居中
*/
table th:nth-child(1),th:nth-child(2),th:nth-child(3){text-align: left;}
table th:nth-child(4),th:nth-child(5),th:nth-child(6){text-align: center;}

table td:nth-child(1){text-align: left;padding:2px 50px 2px 2px;}
table td:nth-child(2){text-align: left;padding:2px 50px 2px 2px;}
table td:nth-child(3){text-align: left;padding:2px 20px 2px 2px;}
table td:nth-child(4){text-align: center;padding:2px 30px;}
table td:nth-child(5){text-align: center;padding:2px 30px;}
table td:nth-child(6){text-align: center;padding:2px 30px;}

css 文件 p1b 内容

/* 唯一的注释符号，不能用 //  */

body
{text-align: center; }

table
{
	/*
	border-style: solid;
	border-width: 10px;
	border-color: #d0d0ff

	border-style 的默认值为 none，即 border-style: none；
	因此，如果想要修改边框相关，就必须声明一个边框样式，即 border-style: solid;

	border-color: #d0d0ff 这样写左上边框颜色正确，右下边框颜色不正确，比左上的深；
	不加 # 颜色变为黑白；
	*/
	
	border: 10px #d0d0ff solid;

	/* 
	合并格子的边框 以及格子与外边框 因此 padding 失效
	默认值是 separate 
	border-collapse: collapse;
	*/
	
	/* border-spacing 设置相邻单元格的边框间的距离 仅用于separate */
	border-collapse: separate;
	border-spacing: 0px;
	
	/* 由外到内的顺序 margin border padding */
	margin: auto;
	padding: 20px;
	width: 50%;
	letter-spacing:0.1mm;
}
/*
表格有外边框和内边框之分，内边框是每个格子的边框；
*/
th, td
{
  border: 0px;
  /* font-family: Tahoma; */
  font-size: 13px;
  text-align: left;
}


/* 修改行，算表头 */
tr:nth-child(7){
  font-weight:bold;
}

/* 
修改第 1 列，不包括表头，但是用此方法无法修改第 2 列 
table tr td:first-child {
  text-align: left;
}
*/

/* 
修改指定的格子，例如第 2 行第 2 列的格子 tr:nth-child(2) > td:nth-child(2) 
n+4 表示从 4 开始
*/
td:nth-child(n+4){
  text-align: center;
}

/* 
在 separate 下使用 tr:nth-child(7) 修改上边框不起作用
可直接使用 table tr:last-child td 
*/
tr:nth-child(7) > td:nth-child(1){
border-top: 2px solid;
}
tr:nth-child(7) > td:nth-child(2){
border-top: 2px solid;
}
tr:nth-child(7) > td:nth-child(3){
border-top: 2px solid;
}
tr:nth-child(7) > td:nth-child(4){
border-top: 2px solid;
}
tr:nth-child(7) > td:nth-child(5){
border-top: 2px solid;
}
tr:nth-child(7) > td:nth-child(6){
border-top: 2px solid;
}

信息安全实践：CSS

猜你喜欢