实例 一 背景，精灵图，边框，实列登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景，精灵图，边框，表格与列表，表格元素，实列登录页面-3月12日</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{
background: url(http://pic1.16pic.com/00/47/21/16pic_4721352_b.jpg) no-repeat ;
background-size: 100%;
}
.kk{
width: 500px;
height: 400px;
background: rgba(49, 51, 115, 0.4); /*背景颜色RGB+透明度0~1*/
margin: 200px auto;
border-radius: 10px;
text-align: center;
box-shadow: 2px 2px 20px #fff; /* 边框阴影:box-shadow:x y 阴影宽度 阴影颜色;*/
border:1px solid #fff;
}
h1{
color: #fff;
text-align: center;
line-height: 50px;
}
img{
width: 80px;
height: 80px;
border-radius: 50%;
margin-top: 30px;
box-shadow: 2px 2px 20px #fff;
}
input{
width: 300px;
height: 30px;
margin-top: 20px;
border-radius: 6px;
border: none;
}
button{
width: 100px;
background: #ff9d00;
height: 50px;
margin-top: 30px;
border: none;/*去掉边框默认的样式*/
border-radius: 10px;/*增加圆角*/
}
hr{
width: 150px;
height: 10px;
background: linear-gradient(to right,yellow,blue,green);/*(to 渐变方向，起始颜色，终止颜色)bgsize设置宽、高 100% */
margin: 30px auto;
}
.p1{
background: url(images/p1.jpg) -367px -34px ;
display: inline-block;/*将span标签转换成内联块元素，让它同时可以用内联、块的样式元素*/
width: 20px;
height: 20px;
vertical-align: middle;/*垂直居中*/
border-radius: 10px;
margin-right: 5px
}
.p2{
background: url(images/p1.jpg) -368px -198px ;
display: inline-block;/*将span标签转换成内联块元素，让它同时可以用内联、块的样式元素*/
width: 20px;
height: 20px;
vertical-align: middle;/*垂直居中*/
border-radius: 10px;
margin-right: 5px
}
</style>
</head>
<body>
<div class="kk">
<h1>登录框实例</h1>
<img src="http://img.qqzhi.com/uploads/2018-12-06/122543127.jpg" alt="周润发">
<form action="url">
<span class="p1"></span><input type="text" name="" placeholder="请输入用户名...."><br>
<span class="p2"></span><input type="password" name="" placeholder="请输入密码...."><br>
<button>登录</button>
</form>
<hr>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 二 - 表单 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<style type="text/css">
body{
background: #333;
color: #fff;
}
table{
border-collapse: collapse;/*折叠边框*/
margin: 30px auto;
width: 550px;
height: 70px;
}
td{
border: 1px solid #fff; text-align: center;
}
ul{
text-align: center;
}
li{
list-style: none;
}
</style>
</head>
<body>
<table><!-- 表格 -->
<tr><!-- 行 -->
<td>这是一个一行一列的表格</td><!-- 列 -->
</tr>
</table>
<table>
<tr>
<!-- 合并行 -->
<td rowspan="4">商品</td>
</tr>
<tr>
<!-- 合并列 -->
<td colspan="4">商品</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> 标签定义） -->
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例