PART ONE: CSS 样式控制同一HTML页面 实现下面两种样式
p1.html
<!DOCTYPE HTML>
<html>
<head>
<title>CS 142 Project 1, Problem 1</title>
<link rel="stylesheet" href="./p1a.css">
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Totalprice</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>
Version A
p1a.css
table {border-collapse:separate; border-spacing:0; font-size:13px; font-family:Tahoma;}
table td{ border-top:1px solid #fff; }
table th{background:#687291; color: #fff;}
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 td:nth-child(1),td:nth-child(2){padding:4px 40px 4px 4px;}
table td:nth-child(3){padding:4px 0px 4px 4px;}
table td:nth-child(n+4){padding:4px 35px;}
Version B
p1b.css
table {border-collapse:separate; border-spacing:0; font-family:Tahoma; font-size:13px; border:solid 10px #d0d0ff; padding:20px;}
table td{ border-top:1px solid #fff; }
table th{font-weight:bold; text-align: left;}
table th:nth-child(1){text-align: center;}
table tr:last-child td{font-weight:bold; border-top:solid 2px #000000;}
table th:nth-child(n+4){text-align: center;}
table td:nth-child(1),td:nth-child(2),td:nth-child(3){text-align: center; padding:2px 30px 2px 2px;}
table td:nth-child(3){padding:2px 0px 2px 2px;}
table td:nth-child(n+4){text-align: center;padding:2px 30px;}
PART TWO： 配置zoobar 网站 并寻找css漏洞
实验要求
Manage your profile in the zoobar website, make your zoobars appear more than you really own. That is, after you modify your profile, when others or yourself look up your profile, they will see more zoobars than you actually own.
配置myzoo网站
把myzoo文件夹放到目录 /var/www 下
把 /etc/apache2/sites-available 下的default 文件里 DocumentRoot 后面改成该文件夹的目录
DocumentRoot /var/www/myzoo
重启apache2:sudo service apache2 restart;
此时，使用http://localhost应该可以访问zoobar网站。
利用css漏洞
利用标签 会自动发送请求 可以找一张图片放在数字的位置让profile看起来更多，由于网络不好可能会出现加载不出来的情况，这里选择使用标签的 alt 属性 — 在src加载不出来的时候会用alt中的文字替换图片，利用style属性控制文字位置
在用户的profile里输入：
<img src="" style="position:relative;top:-52px;right:-61px;width:34px;height:21px" alt="000"/>
切换用户b查看用户a发现a的profile多了三个0