|
|
|
|
@ -0,0 +1,213 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>两列布局-绝对定位法</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
background: #ff9;
|
|
|
|
|
font: 13px 1.5 Arial;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
text-indent: 2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounded {
|
|
|
|
|
border-radius: 25px;
|
|
|
|
|
border: 2px solid #996600;
|
|
|
|
|
box-shadow: 6px 6px 10px #9f741e;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.footer p {
|
|
|
|
|
text-align: right;
|
|
|
|
|
color: #888;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#header,
|
|
|
|
|
#pagefooter,
|
|
|
|
|
#side,
|
|
|
|
|
#container {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
width: 1100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#container {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 500px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#side {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-left: 600px;
|
|
|
|
|
width: 500px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="header">
|
|
|
|
|
<div class="rounded">
|
|
|
|
|
<h2>Page Header</h2>
|
|
|
|
|
<div class="main"></div>
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<p>查看详细信息>></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="container">
|
|
|
|
|
<div id="content">
|
|
|
|
|
<div class="rounded">
|
|
|
|
|
<h2>Page Content1</h2>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<p>
|
|
|
|
|
这是圆角框中的示例文字，CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。这是圆角框中的示例文字。CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<p>查看详细信息>></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="side">
|
|
|
|
|
<div class="rounded">
|
|
|
|
|
<h2>Side Bar</h2>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<p>
|
|
|
|
|
这是圆角框中的示例文字，CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。这是圆角框中的示例文字。CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。CSS的功能十分强大而又灵活。
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<p>查看详细信息>></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="pagefooter">
|
|
|
|
|
<div class="rounded">
|
|
|
|
|
<h2>Page Footer</h2>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<p>这是一行文本，这里作为样例，显示在布局框中。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<p>查看详细信息>></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
22222222
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
<title>进货单</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.record {
|
|
|
|
|
font: 14px 宋体;
|
|
|
|
|
border: 2px #777 solid;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.record td {
|
|
|
|
|
border: 1px #777 dashed;
|
|
|
|
|
}
|
|
|
|
|
.record th {
|
|
|
|
|
border: 1px #777 solid;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<table class="record">
|
|
|
|
|
<caption>
|
|
|
|
|
商品进货单
|
|
|
|
|
</caption>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>商品名</th>
|
|
|
|
|
<th>库存</th>
|
|
|
|
|
<th>价格</th>
|
|
|
|
|
<th>今日售出</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>苹果</th>
|
|
|
|
|
<td>20</td>
|
|
|
|
|
<td>17</td>
|
|
|
|
|
<td>14</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>香蕉</th>
|
|
|
|
|
<td>20</td>
|
|
|
|
|
<td>16</td>
|
|
|
|
|
<td>15</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>菠萝</th>
|
|
|
|
|
<td>21</td>
|
|
|
|
|
<td>18</td>
|
|
|
|
|
<td>12</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>橘子</th>
|
|
|
|
|
<td>16</td>
|
|
|
|
|
<td>12</td>
|
|
|
|
|
<td>16</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>柠檬</th>
|
|
|
|
|
<td>26</td>
|
|
|
|
|
<td>22</td>
|
|
|
|
|
<td>12</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>葡萄</th>
|
|
|
|
|
<td>15</td>
|
|
|
|
|
<td>18</td>
|
|
|
|
|
<td>9</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
333333
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
<script>
|
|
|
|
|
class Foods {
|
|
|
|
|
constructor(color, weight, price) {
|
|
|
|
|
this.color = color;
|
|
|
|
|
this.weight = weight;
|
|
|
|
|
this.price = price;
|
|
|
|
|
}
|
|
|
|
|
sold() {
|
|
|
|
|
console.log("商品已售出");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let foods1 = new Foods("red", "10kg", "200元");
|
|
|
|
|
console.log(foods1.color);
|
|
|
|
|
console.log(foods1.weight);
|
|
|
|
|
console.log(foods1.price);
|
|
|
|
|
console.log(foods1.sold());
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body></body>
|
|
|
|
|
</html>
|
