第二课的总结
1、背景
a、背景控制
background
background:red ;
background: #c97474;
background: rgb(129,44,44);
background: rgba(129,44,44,0.5);
background :url(http://img.bimg.126.net/photo/31kQlCGP44-34Q5yxvoqmw==/5770237022569104952.jpg) no-repeat;
background-size: 100%;
background: linear-gradient(to right,red,blue);
b、精灵图
background
background: url(static/images/p2.jpg )-100px 0 一般为负数
2、边框
border:
border-top: 1px solid #ccc;
border-left: 3px double #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-collapse: collapse;
box-shadow: 2px 2px 20px #ccc
3、表格与列表
a、表格
tr td
<tr>
<td >一行一列</td>
</tr>
<tr>
<td rowspan="4"><b>爱江山<b></td>
</tr>
<tr>
<td colspan="4"><b>爱江山<b></td>
</tr>
b、列表
ul li
li{list-style: none;}
<ul>
<li>燕麦</li>
</ul>
4、表单元素
input textarea
<input type="text" name="">
<input type="password" name="">
<input type="radio" name="">男
<input type="checkbox" name="">HTML
<input type="checkbox" name="">SQL
<input type="checkbox" name="">PHP
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索">
<textarea></Ttextarea>
<button>提交</button>
实例
<!DOCTYPE html>
<html>
<head>
<title>表单元素</title>
<!-- <link rel="stylesheet" type="text/css" href=""> -->
<style type="text/css">
*{margin: 0;padding: 0;}
/* textarea{
width: 100px;
height: 100px;
margin: 0px auto;
}*/
</style>
</head>
<body>
<form action="url" method="get/post">
用户名：<input type="text" name="">
密码：<input type="password" name="">
<input type="radio" name="">男
<input type="radio" name="">女
<input type="checkbox" name="">HTML
<input type="checkbox" name="">SQL
<input type="checkbox" name="">PHP
<TEXTAREA></TEXTAREA>
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索">
<button>提交</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例