背景色background分为(英文单词 16进制颜色 rgb颜色)，英文单词如red,blue等，16进制需加#，如#ffffff.rge颜色可带背景透明度，0-1之间。no-repeat为不平铺
实例为css定义body
body{
/*background: red;/*body背景定义为红色*/
/*background: url(http://www.baidu.com/1.jpg) no-repeat;背景图片为url的地址,no-repeat为不平铺*/
/*background: #f2f2f2;用16进制定义背景色*/
/*background: rgb(124,44,44);用rgb颜色定义背景色*/
background: rgba(123,44,44,0.5);/*用rgb颜色定义并且透明度为0.5*/
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例hr线条css中渐变效果
hr{height: 10px;background: linear-gradient(to right,red,blue)}/*hr高位10像素，linear-gradient背景色渐变效果(从左由红色变为蓝色)*/运行实例 »
点击 "运行实例" 按钮查看在线实例
实例css中定义class=pic1，精灵图中取xy坐标
语句为(background:url 背景图片 定位 x y坐标)
.pic1{background: url(static/images/p2.jpg) -100px 0 ;}/*定义class=pic1，url为精灵图地址，x坐标为-100px，y坐标为0*/运行实例 »
点击 "运行实例" 按钮查看在线实例
第二节为border边框
边框属性:border:宽度 样式 颜色; (样式:dotted:点线边框、dashed:虚线边框、solid:实线边框、double:两个边框)
边框阴影:box-shadow:x y 阴影宽度 阴影颜色;
边框圆角: border-radius;
重点：当border-radius:10px和border-radius:50%同时在CSS中赋值时。按顺序给与覆盖。最终执行border-radius:50%
实例
/*控制单边框圆角:*/ border-top-left-radius: 20px;/*边框头部左边圆角赋予20像素*/ border-top-right-radius: 20px;/*边框头部右边圆角*/ border-bottom-right-radius: 20px;/*边框底部右边圆角*/ border-bottom-left-radius: 20px;/*边框底部左边圆角*/
运行实例 »
点击 "运行实例" 按钮查看在线实例
第三节表格与列表
表格由table标签定义，tr定义行，td定义列，
实例
<td colspan="4"></td>此td合并4列 <tr colspan="4"></tr>此tr合并4行
运行实例 »
点击 "运行实例" 按钮查看在线实例
列表分为有序列表和无序列表，有序列表如ol标签带有数字排序,对应li标签使用。
无序列表如ul标签，对应li标签使用，重点无序标签会存在.为标头，需在css中给ul赋予list-style:none去除.
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="images-icon" href="favicon.ico">
<title>去除.的无序标签</title>
<style type="text/css">
ul{
list-style: none;
}
</style>
</head>
<body>
<ul><li>第一个人</li><li>第一个人</li><li>第一个人</li></ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
第四节为表单元素，
表单用于收集不同类型的用户输入 <form>表单是一个包含表单元素的区域
<form action="url" method="get/post">action=url整个表单上传的数据地址，method为传输方式分为get和post，get：提交的数据量要小于1024字节，表单提交时表单域数值（表单请求的信息：账号、密码…）将在地址栏显示。post:传递的数据量不受限制，表单提交时表单的域值（表单请求的信息：账号、密码…）不会在地址栏显示，安全性能较高，对信息进行了隐藏，一般在开发中采用post。
form中重要元素有input、textarea(文本域)、button（提交按钮）
实例
<form action="url" method="get/post"> <!-- <input> 元素: 最重要的表单元素 该元素根据不同的 type 属性，可以变化为多种形态--> 用户名:<input type="text"><!-- text定义供文本输入的单行输入 --> 密码: <input type="password" name=""><!-- password定义密码字段 --> <!-- type="radio"单选 --> <input type="radio" name="">男 <input type="radio" name="">女 <!-- checkbox多选框 --> <input type="checkbox" name="">php <input type="checkbox" name="">web <input type="checkbox" name="">sql <!-- 文本域 --> <textarea></textarea> <!-- 定义提交表单数据至表单处理程序的按钮 --> <input type="submit" name="" value="提交"> <input type="button" name="" value="搜索"><!-- 定义按钮 --> <button>提交</button> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
第五节实现登录页面的实列
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="images-icon" href="favicon.ico">
<title>登录页面</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #151517;/*背景颜色取16进制*/
}
div{
width: 400px;
height: 350px;
background: rgba(188,185,198,0.1);/*背景颜色取rgb，透明度0.1*/
margin: 100px auto;
border-radius: 20px;/*边框圆角为20像素*/
text-align: center;/*文字类块居中包含img*/
}
img{
width: 100px;
border-radius: 50%;/*边框圆角50%即圆形*/
margin-top: 30px;/*顶部外边距30像素*/
}
input{
width: 300px;
height: 30px;
margin-top: 25px;
padding-left: 20px;/*左内边距为20像素*/
border-radius: 5px;
border: none;/*去除背景框装饰*/
}
.button1{
width: 130px;
height: 25px;
background: #626464;
color:#ffffff;
margin-top: 25px;
border: none;
border-radius: 5px;
}
.button2{
width: 130px;
height: 25px;
background: #626464;
color:#ffffff;
margin-top: 25px;
border: none;
border-radius: 5px;
margin-left: 50px;
}
a{
text-decoration: none;/*去除字体下回线*/
color: #ffffff;/*字体颜色*/
}
</style>
</head>
<body>
<div><img src="http://img3.imgtn.bdimg.com/it/u=1296535952,1461014635&fm=26&gp=0.jpg">
<form action="url" method="post"><!-- 提交表单地址url，传输方式为post大数据传输 -->
<input type="text" name="" placeholder="请输入用户名"><br><!-- placeholder框内显示文字 -->
<input type="password" name="" placeholder="请输入密码"><br>
<button class="button1">登录</button>
<button class="button2"><a href="http://www.baidu.com">注册</a></button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
placeholder为input框内显示内容。