总结
此次课程我学了如何应用背景background实现背景图的定位显示、颜色渐变、背景size的应用，以及表单的用法，按钮标签input，占位符placeholder提示文字显示。并做了一个案例综合应用。
实例1表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css" media="screen">
table {
width: 300px;
border: 1px solid #ccc;
border-collapse: collapse; /*表格独有的折叠边框 border-collapse collapse*/
text-align: center;
}
td {
border: 1px solid #ccc;
}
ul {
list-style: none; /*取消原来自带样式*/
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">data</td> <!-- rowspan合并行 -->
</tr>
<tr>
<td colspan="4">data</td> <!-- colspan 合并列 -->
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
<ul> <!-- 无序列表 -->
<li>全权</li>
<li>全权</li>
<li>全权</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 2 登陆界面总结应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆WEB界面</title>
<!-- <link rel="stylesheet" type="text/css" href="">
<link rel="icon" type="image/x-icon" href=""> -->
<style type="text/css" media="screen">
*{
margin: 0px 0px;
padding: 0px 0px;
}
html {
height: 100%; /*定义html高 应该是块标签 所以不用定义宽，宽会自适应，高度需要靠内容支撑，设置100%就是根据浏览器窗口高度自适应*/
}
body {
/**/
/*(to 渐变方向，起始颜色，终止颜色) bgsize设置宽、高 100% */
background: linear-gradient(to bottom,#1D85E0,#0B4182) no-repeat 100% 100%;
/*background-size:;*/
}
div {
margin:180px auto;
width: 400px;
height: 300px;
background: #fff;
text-align: center;
background: rgba(255,255,255,0.8); /*背景颜色RGB+透明度0~1*/
border-radius: 6px; /*圆角*/
}
img {
margin: 10px 0px;
border-radius:40px;
width: 80px;
height: 80px;
box-shadow: 2px 2px rgba(0,0,0,0.3); /*图像阴影 水平X垂直Y 阴影大小 让后就是颜色值和透明度取值0~1*/
}
input {
margin: 6px 0px;
width: 200px;
height: 25px;
border: none;
padding-left: 12px; /* 内部顶出12像素*/
border-radius: 6px; /*圆角*/
}
button {
width: 300px;
height: 30px;
margin-top: 20px;
background: #1C80D9; /*背景色*/
border: none;
border-radius: 6px;
color: #fff;
}
.userp {
font-size: 14px;
color: #616366;
}
.pic1 {
display: inline-block; /*将span标签转换成内联块元素，让它同时可以用内联、块的样式元素*/
width: 20px;
height: 20px;
background: url(p1.jpg) -95px -111px no-repeat; /*背景图定位 背景不平铺*/
vertical-align:middle; /*垂直居中*/
border-radius: 10px; /*边框圆角*/
margin-right: 5px; /*向右顶出5像素*/
}
.pic2 {
display: inline-block;
width: 20px;
height: 20px;
background: url(p1.jpg) -54px -192px no-repeat; /*背景图定位 背景不平铺*/
vertical-align:middle;
border-radius: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<img src="http://img4.duitang.com/uploads/item/201412/24/20141224224554_SuYth.thumb.700_0.jpeg" alt="头像">
<p class="userp">请输入用户名和密码<p>
<form action="url" method="get" accept-charset="utf-8">
<span class="pic1"></span><input type="text" name="user" value="" placeholder="请输入用户名...."><br> <!-- placeholder 占位符提示 -->
<span class="pic2"></span><input type="password" name="passwd" value="" placeholder="请输入密码...."><br>
<button type="">登陆</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
