<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
td {
background-color: #f2f2f2;
width: 100px;
}
body {
width: 350px;
}
</style>
</head>
<body>
<form action="" method="post">
<table>
<thead>
<tr>
<th colspan="2" style="text-align: center;background-color: #808080">用户注册</th>
</tr>
</thead>
<tr>
<td style="text-align: right"><label for="UserName">用户名</label></td>
<td> <input type="text" id="UserName" name="UserName" maxlength="20" required><br></td>
</tr>
<tr>
<td style="text-align: right"><label for="UserPass">密码</label></td>
<td><input type="password" id="UserPass" name="UserPass" maxlength="20" required><br></td>
</tr>
<tr>
<td style="text-align: right"> <label for="sex">性别</label></td>
<td><input type="radio" id="male" name="sex" value="男" checked>
<label for="male">男</label>
<input type="radio" id="female" name="sex" value="女">
<label for="female">女</label></td>
</tr>
<tr>
<td style="text-align: right"><label for="like">爱好</label></td>
<td><input type="checkbox" id="writing" name="like" value="写作">
<label for="writing">写作</label>
<input type="checkbox" id="music" name="like" value="听音乐">
<label for="music">听音乐</label>
<input type="checkbox" id="sports" name="like" value="体育">
<label for="sports">体育</label></td>
</tr>
<tr>
<td style="text-align: right"><label for="province">省份</label></td>
<td><select id="province" name="province">
<option value="shaanxi" selected>陕西省</option>
<option value="shanx">山西省</option>
</select></td>
</tr>
<tr>
<td style="text-align: right"><label for="intro">自我介绍</label></td>
<td><textarea id="intro" name="intro" rows="5" cols="25" default="这个家伙什么也没留下"></textarea><br></td>
</tr>
<tfoot>
<tr>
<td colspan="2" style="text-align: center;background-color:#808080 " ><input type="submit" name="send" value="提交">
<input type="reset" name="reset" value="重置"></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工商银行电子汇款单</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table>
<tr>
<th colspan="2">回单类型</th>
<td>网上转账汇款</td>
<th colspan="2">指令序号</th>
<td>HQH000000000000000013878172</td>
</tr>
<tr>
<th rowspan="4" style="width: 5px">收款人</th>
<td>户名</td>
<td>老牟</td>
<th rowspan="4" style="width: 5px">付款人</th>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<th>卡号</th>
<td>000000000000001</td>
<th>卡号</th>
<td>000000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<th>网点</th>
<td>工商江苏南京业务处理中心</td>
<td>网点</td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<th colspan="2">币种</th>
<td>人民币</td>
<th colspan="2">钞汇标志</th>
<td>钞票</td>
</tr>
<tr>
<th colspan="2">金额</th>
<td>1.00元</td>
<th colspan="2">手续费</th>
<td>0.57元</td>
</tr>
<tr>
<th colspan="2">合计</th>
<td colspan="4">人民币（大写）：壹圆整</td>
</tr>
<tr>
<th colspan="2">交易时间</th>
<td><i>2017年6月1日</i></td>
<th colspan="2">时间戳</th>
<td><i>2017-06-01-13.00.00.00000</i></td>
</tr>
</table>
<span>票据打印时间：2017-0601 15：00：12</span><br/>
<span style="text-decoration:line-through ">票据打印单位：江苏徐州业务中心</span><br/>
<span>操作员：大曾</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业3</title>
<style>
span {
font-size: 0.8em;
}
p {
font-size: 1.2em;
line-height: 1.5;
max-width: 900px;
margin: 20px auto;
}
div {
margin-left: 0;
}
</style>
</head>
<body>
<h1>将进酒 <span>君不见黄河之水天上来</span></h1>
<div style="float: left">
<img alt="" height="650px" src="李白.png" width="250px">
</div>
<p> 君不见黄河之水天上来，奔流到海不复回。</p>
<p> 君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p> 人生得意须尽欢，莫使金樽空对月。</p>
<p> 天生我材必有用，千金散尽还复来。</p>
<p> 烹羊宰牛且为，会须一饮三百杯。</p>
<p> 岑夫子，丹丘生，将进酒，杯莫停。</p>
<p> 与君歌一曲，请君为我侧耳听。</p>
<p> 钟鼓馔玉不足贵，但原长醉不复醒。</p>
<p> 古来圣贤皆寂寞，惟有饮者留其名。</p>
<p> 陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p> 主人何为言少钱，径须沽取对君酌。</p>
<p> 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index1.css" />
<style>
span[class]{
margin-left: 200px;
}
</style>
</head>
<body>
<h2>热门电影模块</h2>
<hr>
<div class="top">
<div class="nav">
<h3 style="display: inline;">最近热门电影</h3>
<div class="title-nav">
<ul class="nav-first">
<li><a href="#">热门</a></li>
<li><a href="#">最新</a></li>
<li><a href="#">豆瓣高分</a></li>
<li><a href="#">冷门佳片</a></li>
<li><a href="#">华语</a></li>
<li><a href="#">欧美</a></li>
<li><a href="#">韩国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">更多>></a></li>
</ul>
</div>
</div>
</div>
<hr>
<img src="img/2.jpg" class="img002"/>
<img src="img/2.jpg" class="img002"/>
<img src="img/2.jpg" class="img002"/>
<img src="img/2.jpg" class="img002"/>
<br>
<span>猜火车8.1</span>
<span class="sp1">贝尔科实验6.0</span>
<span class="sp1">加州公路巡警6.8</span>
<span class="sp1">歌声不绝6.3</span>
<br />
<img src="img/2.jpg" class="img002"/>
<img src="img/2.jpg" class="img002"/>
<img src="img/2.jpg" class="img002"/>
<img src="img/2.jpg" class="img002"/>
<br>
<span>明日的我与昨日的我</span>
<span class="sp1">速度与激情8</span>
<span class="sp1">极速特工</span>
<span class="sp1">金刚狼3：殊死一战</span>
</body>
</html>
css文件
* {
margin: 0; /* 去掉元素的外边距，表示上、右、下、左都为 0 */
/**
有以下几种写法：
margin: 0 5px; 表示上下外边距为0，左右外边距为 5px
margin: 1px 2px 5px; 表示上为 1px，左右为 2px， 下为 5px
margin: 1px 2px 3px 4px; 表示上为 1px，右为 2px，下为 3px，左为 4px
*/
padding: 0; /* 去掉元素的内边距，即元素内容和元素的边框之间的距离，当只有一个值时表示 上、右、下、左都一样 */
}
a {
/*color: #333333;*/
color: black;
/*color: rgba(3,3,3, .8);*/
opacity: 0.9; /* 设置透明度，它的值在 0 ~ 1 之间，0 表示完全透明，1表示完全不透明 */
font-family: "微软雅黑"; /* 设置字体 */
font-weight: normal; /* 设置文字粗细 */
font-size: 14px; /* 设置文字大小 */
text-decoration: none; /* 去掉链接的下划线 */
}
a:hover {
color: #C44F00;
text-decoration: line-through;
}
.top {
width: 100%; /* 设置宽度，值可以是数字，也可以是百分比，如果是百分比，那么它的父组元素一定要有值 */
height: 60px; /* 定义容器的高度，当值为 0 时可以不带单位，如果值为非 0 ，则必须带单位 */
/*border: 1px solid red;*/ /* 定义边框样式*/
margin: auto;
}
.top .nav {
width: 100%;
height: 100%;
background-color: #eeeeee;
position: relative; /* 相对定位 */
}
/* 定义logo 样式 */
.nav img {
width: 200px; /* 设置logo图片宽度为 30px */
margin-left: 2px;
}
.nav .title-nav {
width: 90%;
height: 100%;
/*background-color: #317FE5;*/
float: right; /* 定义浮动，它的值由 left、center 和 right */
}
ul.nav-first {
height: 100%;
list-style: none; /* 去掉无序列表的默认样式 */
}
ul li {
width: 90px;
height: 100%;
float: left;
text-align: center; /* 定义文字水平居中 */
line-height: 60px; /* 定义内容的行高 */
margin-right: 5px; /* 右外边距为 5px */
}
