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>
点击 "运行实例" 按钮查看在线实例