2016年1月14日 11:16:54 星期四
效果图:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
/*-----*/
</style>
</head>
<body>
<div class="form">
<form action="" method="post">
<div class="field">
<label>嘿嘿:</label>
<input type="text" name="uid" placeholder="嘿嘿">
</div>
<div class="field">
<label>咻咻:</label>
<input type="text" name="order_id" placeholder="咻咻">
</div>
<div class="field">
<button type="submit">查询</button>
</div>
</form>
</div> <table class="table">
<caption>Log表</caption>
<thead>
<tr>
<th class="large">嘿嘿</th>
<th class="medium">咻咻</th>
<th class="small">啊啊</th>
</tr>
</thead>
<tbody>
<tr>
<td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td>
<td>咻咻咻咻咻咻咻咻咻咻咻咻咻咻 咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻</td>
<td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
</tr>
<tr>
<td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td>
<td>咻咻咻咻咻咻咻咻咻咻咻咻咻咻 咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻</td>
<td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
</tr>
<tr>
<td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td>
<td>咻咻咻咻咻咻咻咻咻咻咻咻咻咻 咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻</td>
<td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
</tr>
</tbody>
</table>
</body>
</html>
css:
/*字体样式, 行内块*/
.form .field {
font-size: 1em;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
display: inline-block;
} /*input框样式*/
.form .field input[type="text"] {
height: 2em;
border: 1px solid lightgrey;
border-radius: 5px;
padding-left: 0.2em;
} /*提交按钮*/
.form .field button {
width: 5em;
line-height: 2em;
text-align: center;
font-weight: bold;
border-radius: 5px;
overflow: hidden;
border-style: none;
} /*充满屏幕, 边框样式, 去掉表格空隙*/
.table {
width: 100%;
border: 1px solid lightgrey;
border-collapse: collapse;
} .table caption {
font-weight: bold;
margin: 5px;
} .table thead {
background-color: #F9F9F9;
} /*边框样式, 字符截断(配合width使用)*/
.table th, .table td {
border-right: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
word-break: break-all; /*以字母为单位折断*/
word-wrap: break-word; /*以单词为单位折断*/
white-space: pre-wrap; /*汉字*/
} /*偶数行变色*/
.table tbody tr:nth-child(even) {
background-color: #F9F9F9;
} /*用来控制td的宽度*/
.table .large {
width: 300px;
}
.table .medium {
width: 200px;
} .table .small {
width: 100px;
}