前沿：晚上直播，干活很多，灭绝老师讲的也很嗨！我听的有点懵，只能看回放一个一个知识点自己过，我想还是有一部分英语不懂导致的原因，白天已经花时间熟悉昨天用到的一些单词，不至于听到这些单词不知道是干什么的。
一、前段文件夹布局
小扩展：static 下css、js 等
所有的静态文件放在static文件夹
二、背景控制
背景图、背景颜色（英文单词 16进制颜色 rgb颜色）
background-color，设置背景色，通常情况不用写 -color；
背景色透明度 语法：background:rgba(129,11,23,0.3)；
透明度是0~1的值；
背景色的线性渐变 语法：background: linear-gradient(方向,起始颜色,终止颜色)
背景图控制 语法：background-image:url(图片地址)
no-repeat 不平铺
background-size: 100%; 设置背景图100%填充；
精灵图 语法：background-position:背景图片定位 x y坐标
background：url（图片地址）-100px 0；
精灵图的优点：利于优化，缺点，页面不能大的改动，
实例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{
/*background: red;*/
/*background: #000000;*/
/*background: rgb(120,32,33);*/
/*背景色透明度*/
/* background: rgba(123,22,32,0.5);*/
/*背景色的线性渐变*/
/*background: url(http://hbimg.b0.upaiyun.com/6bbe9dc4c7d5358d1f386c3f30addc313e5a33bf599f9-3Pq0Te_fw658) no-repeat;*/
background-size: 100%;
}
hr{
height: 10px;background: linear-gradient(to right,red,blue)
}
div{
width: 80px;
height: 80px;
}
.pic2{background: url(static/images/p2.jpg) -200px 0;}
</style>
</head>
<body>
<hr>
<div class="pic1"></div>
<div class="pic2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、边框
边框属性：border ：宽度 样式 颜色 语法：border:1px dashed #ccc;
边框样式有:dotted:点线边框、dashed:虚线边框、solid:实线边框、double:两个边框)
边框阴影：box-shadow:x y 阴影宽度 阴影颜色; 语法：box-shadow: 2px 2px 20px #ccc;
边框圆角： border-radius; 语法：border-radius: 10px；
圆形边框： border-radius；
控制单边框圆角： 语法：border-top-left-radius: 20px; / border-top-right-radius: 20px; / border-bottom-left-radius: 20px; / border-bottom-right-radius: 20px; （上左、上右，下左，下右）
实例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>边框</title>
<style type="text/css">
*{margin: 0; padding: 0;}
div{
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px dashed;
}
p{
width: 300px;
height: 300px;
margin: 100px auto;
box-shadow: 2px 2px 20px #ccc;
/*border-radius: 50%;*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
</style>
</head>
<body>
<div>
</div>
<p></p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、表格与列表
<table> 表格由 <table> 标签来定义每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）
border-collapse: collapse; 折叠边框的，只有table里有的属性
rowspan 合并边行： 语法列子：<td rowspan="4">商品</td>
colspan 合并边列： 语法列子：<td colspan="4">商品</td>
无序列表
无序列表由 <ul> 标签来定义 ,每个列表均有若干列表项（由 <li> 标签定义）
实例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>表格与列表</title>
<style type="text/css">
/**{margin: 0; padding: 0;}*/
table{
width: 500px;
margin: 30px auto;
border: 1px solid #ccc;
border-collapse: collapse;
}
td{border: 1px solid #ccc; text-align: center;}
li{
list-style: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>一行</td>
<td>一行</td>
<td>一行</td>
<td>一行</td>
</tr>
<tr>
<td>一行</td>
<td>一行</td>
<td>一行</td>
<td>一行</td>
</tr>
<tr>
<td>一行</td>
<td>一行</td>
<td>一行</td>
<td>一行</td>
</tr>
</table>
<ul>
<li>无序列表1</li>
<li>无序列表1</li>
<li>无序列表1</li>
<li>无序列表1</li>
<li>无序列表1</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、表单元素
表单用于收集不同类型的用户输入， <form>表单是一个包含表单元素的区域；
语法： <form action="url" method="get/post">
页面中的表单都放在 <form></form>里
action="url" 放的是后台地址，就是当前页面需要提交的地方；
method="get/post" 传值的方式，
<input> 元素: 最重要的表单元素 该元素根据不同的 type 属性，可以变化为多种形态
<input type="text" name=""> 定义供文本输入的单行输入
<input type="password" name=""> 定义密码字段
单选框 语法：<input type="radio" name="">男
多选框 语法：<input type="checkbox" name="">php
<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>提交</button> 最常用的按钮
实例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>表单元素</title>
<style type="text/css">
*{margin: 0; padding: 0;}
</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="">php
<input type="checkbox" name="">web
<input type="checkbox" name="">sql
<textarea></textarea>
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索">
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、实战登录页面
border: none; 去掉元素自带边框
实例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{
background: #000;
}
div{
width: 400px;
height: 350px;
margin: 300px auto;
background: rgba(188,185,198,0.4);
border-radius: 15px;
text-align: center;
}
img{
width: 80px;
border-radius: 50%;
margin-top: 50px;
}
input{
width: 300px;
height:30px;
margin-top: 15px;
border-radius: 6px;
border: none;
padding-left: 15px;}
button{
border: none;
width: 200px;
height: 35px;
border-radius: 6px;
background: #151517;
color: #fff;
margin-top: 30px;}
</style>
</head>
<body>
<div>
<img src="http://img1.imgtn.bdimg.com/it/u=1218485516,264644399&fm=26&gp=0.jpg">
<form action="" method="">
<input type="text" name="" placeholder="请输入用户名...."><br>
<input type="password" name="" placeholder="请输入密码...."><br>
<button>登录</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：