背景设置backgroudn:颜色，图片，精灵图
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*背景颜色的线性渐变*/
hr{height: 15px;background: linear-gradient(to left,green,yellow) }
body{
/*background: red; */ /*通过英文单词设置背景颜色*/
/*background: #69BE49; */ /*通过16进制设置背景颜色 #不能忘*/
/*background: rgba(150,150,150,0.5);*/ /*设置背景颜色透明度*/
/*no-repeat图片不重复*/
/*background: url(http://img4.imgtn.bdimg.com/it/u=2492806308,860263630&fm=26&gp=0.jpg) no-repeat; */
/*background-size: 100%; *//* 背景图100%占据整个网页，但是容易失帧，不建议*/
}
div{
width: 80px;
height: 80px;
}
/*精灵图捕捉其他的某个小图片 background: url() x y;起始坐标图片左上角0,0，捕捉的图片*/
.a1{background: url(static/images/p2.jpg) -200px 0;}
.a2{background: url(static/images/p2.jpg) -220px -370px;}
p{
width: 20px;
height: 20px;
background: url(static/images/p1.jpg) -75px -130px;}
</style>
</head>
<body>
<hr>
<div class="a1"></div>
<div class="a2"></div>
<p></p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
边框border的属性，border-radius圆角
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<!-- <link rel="cion" type="image/x-cion" href=""> -->
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width: 200px;
height: 200px;
margin: 20px auto;
/*background: #ABB1BA;*/
}
.d1{
border-top:2px dotted; /*点线设置边框*/
border-right: 2px dashed; /*虚线设置边框*/
border-bottom: 2px solid; /*实线设置边框*/
border-left: 2px double; /* 双实线设置边框*/
}
.d2{
border: 1px solid; /*边框宽度*/
box-shadow: 20px 10px 2px red; /*边框阴影box-shadow:x y 阴影厚度 阴影颜色;*/
border-radius: 20px; /* 边框圆角*/
/*四个不同方向的圆角*/
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
<table>表格行<tr>列<td>,ul无序列表<li>标签
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格与列表</title>
<style type="text/css">
/**{margin: 0;padding: 0;}*/
table{
width: 500px;
height: 20px;
margin: 20px auto;
border: 1px solid blue;
border-collapse: collapse; /*折叠边框*/
}
td{
border: 1px solid;
text-align: center; /*td中文本居中*/
}
li{list-style: none;}
</style>
</head>
<body>
<!-- 表格是由<table>标签组成，一个表格有若干行和若干列，<tr>表示行，<td>表示列 -->
<table>
<tr>
<td>这是一个表格</td>
</tr>
</table>
<table>
<tr> <!-- 合并行 -->
<td rowspan="5">aa</td>
</tr>
<tr> <!-- 合并列 -->
<td colspan="4">11</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
</tr>
<tr>
<td>44</td>
<td>44</td>
<td>44</td>
<td>44</td>
</tr>
</table>
<!-- 无序列表用<li>标签来修饰 -->
<ul>
<li>水果</li>
<li>水果</li>
<li>水果</li>
<li>水果</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
<form>表单,<input>重要标签
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">
*{margin: 0;padding: 0;}
textarea{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<!-- 表单用于收集不同类型的用户输入 <form>表单是一个包含表单元素的区域 ,action是提交的地址，method是提交的方法 -->
<form action="" method="">
<!-- <input>元素：最重要的表单元素，可以根据type的不同类型，变化多种形态 -->
用户名<input type="text" name="">
密码<input type="password" name="">
<!-- radio设置单选框 -->
<input type="radio" name="1">男
<input type="radio" name="1">女
<!-- checkbox设置多选框 -->
<input type="checkbox" name="">php
<input type="checkbox" name="">heml
<input type="checkbox" name="">js
<!-- 文本域 -->
<textarea></textarea>
<!-- 提交表单数据至表单处理程序的按钮 -->
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索">
<button>提交</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
登录框的实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-cion" href="">
<title>登录页面</title>
<style type="text/css">
body{
background: #151517;
}
div{
width: 400px;
height: 350px;
margin: 200px auto;
border: 1px solid;
background: rgba(188,188,188,0.5);
border-radius: 20px;
text-align: center; /*文本居中*/
}
img{
width: 80px;
height: 80px;
margin-top: 40px;
border-radius: 50%;
}
input{
width: 300px;
height: 30px;
margin-top: 20px ;
border: 1px solid;
border-radius: 5px;
padding-left: 15px;
border: none; /*去掉元素自带边框*/
}
button{
width: 200px;
height: 35px;
margin-top: 30px;
border-radius: 5px;
border: none;
box-shadow: 2px 2px 1px #FFFFFF;
background: #151517;
color: #FFFFFF
}
</style>
</head>
<body>
<div>
<img src="http://i2.hdslb.com/bfs/archive/5fb8ca4054ee67cb3898ca8d24c776da36db8595.jpg">
<form action="" method="" >
<!-- placeholder 提示输入信息 -->
<input type="text" name="" placeholder="请输入QQ号"><br>
<input type="password" name="" placeholder="请输入密码"><br>
<button>登录</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
知识点总结
1.background设置背景，background:linear-gradient(to left,green,yellow)渐变色 no-repeat图片不重复，background:rgba()透明度、 background:url() x y 精灵图捕捉
2.border边框属性 border:宽度 样式 颜色；border-radius：px(%) 圆角
3.<table>表格行<tr>列<td>,在td中添加属性：合并行<rowspan>、合并列<colspan>
4.<form>表单重要元素<input>根据type不同类型，变化不同形态：单选框、多选框等 <button>提交按钮
action method不可缺少。