4.表格
创建表格的要求如下:
边框为2px;
宽为100%;
cellspacing为0;
cellpadding为6;
标题内容为本周财政计划;
在 <style> 标签里设置文本为居中对齐。
首先这基本格式先写出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
其次,写表格body具体实现代码
<style>
body{
margin:30px;
}
table{
/*居中对齐*/
text-align:center;
}
</style>
<!--设置表格-->
<table border="2" cellspacing="0" cellpadding="6" width="100%">
<caption>本周财政计划</caption>
<tr>
<td rowspan="2" colspan="2" >项目</td>
<td colspan="2">本周发生</td>
<td rowspan="2">备注</td>
</tr>
<tr>
<td>收入</td>
<td>支出</td>
</tr>
<tr>
<td rowspan="3" >收入</td>
<td>贷款收回</td>
<td>8700</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>内部转款</td>
<td>6000</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>收入合计</td>
<td>14700</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td rowspan="3" >支出</td>
<td>采购支出</td>
<td>0</td>
<td>5000</td>
<td></td>
</tr>
<tr>
<td>工资支出</td>
<td>0</td>
<td>7000</td>
<td></td>
</tr>
<tr>
<td>支出合计</td>
<td>0</td>
<td>12000</td>
<td></td>
</tr>
</table>
5表单类的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
width: 40%;
margin: 20px auto;
}
.common{
width:230px;
height: 30px;
}
span{
display:inline-block;
width: 150px;
text-align: right;
}
div{
margin-bottom: 10px;
}
</style>
</head>
<body>
<form class="container">
<!-- ********* Begin ********* -->
<div>
<span>用户名:</span>
<input type="text" class="common"/>
</div>
<div>
<span>昵称:</span>
<input type="text" class="common"/>
</div>
<div>
<span>性别:</span>
<label for="male" name="sex">
<input type="radio" id="male" />男</label>
<label for="female">
<input type="radio" id="female" name="sex"/>
女</label>
<label for="other">
<input type="radio" id="other" name="sex" disabled="disabled" />
保密</label>
</div>
<div>
<span>教育程度:</span>
<select class="common"/>
<option class="common" value="">高中</option>
<option class="common" value="">中专</option>
<option class="common" value="">大专</option>
<option class="common" value="" selected="selected">本科</option>
<option class="common" value="">硕士</option>
<option class="common" value="">博士</option>
<option class="common" value="">其他</option>
</select>
</div>
<div>
<span>婚姻状况:</span>
<label for="single">
<input type="radio" id="single" name="state" checked="checked"/>
未婚</label>
<label for="married">
<input type="radio" id="married" name="state"/>
已婚</label>
<label for="secret">
<input type="radio" id="secret" name="state" />
保密</label>
</div>
<div>
<span>兴趣爱好:</span>
<label for="football">
<input type="checkbox" id="football" name="hobby" />
踢足球</label>
<label for="basketball">
<input type="checkbox" id="basketball" name="hobby"/>
打篮球</label>
<label for="film">
<input type="checkbox" id="film" name="hobby" checked="checked" />
看电影</label>
</div>
<div>
<span>描述自己的特点:</span><textarea class="common" maxlength="20"></textarea>
</div>
<div>
<span></span>
<input type="submit" class="common" value="提交"/>
</div>
<!-- ********* End ********* -->
</form>
</body>
</html>
6网页综合项目实践(知识点回忆)
1.header头部用float属性实现
2.hover选择器在鼠标滑过该元素时添加的特殊样式
3.swiper轮番图
4.css3移动,放大:transform,transition
5.box-shadow: 10px 10px 10px #000;
6.清除浮动.clearfix{zoom: 1;}