You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!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>
这是圆角框中的示例文字， ， ，
</p>
</div>
<div class="footer">
<p>查看详细信息>></p>
</div>
</div>
</div>
<div id="side">
<div class="rounded">
<h2>Side Bar</h2>
<div class="main">
<p>
这是圆角框中的示例文字， ， ，
</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>
