凹槽水平、垂直分割线 及垂直居中效果
效果地址： http://jmams.github.io/test/201410/separate.htm
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>凹槽分割线</title>
</head>
<style type="text/css" title="">
body {
background-color: rgb(247, 247, 247)
}
.sparate {
border: 1px solid #e2e2e2;
border-width: 1px 0;
border-bottom-color: #fff;
}
.v-center {
background-color:red;
width:600px;
margin: 0 auto;
height:30px;
text-align:center;
line-height:30px;
}
.lt {
height:100px;
width:600px;
border: 1px solid #ddd;
}
.lt-left {
float:left;
height:100%;
width: 300px;
border-right: 1px solid #e2e2e2;
}
.lt-right {
float:left;
height:100%;
width: 298px;
border-left: 1px solid #fff;
}
</style>
<body >
<h3>单行分割线：</h3>
<div class="sparate" ></div>
<h3>垂直居中:</h3>
<div class="v-center" >垂直居中</div>
</body>
<h3>垂直分割线:</h3>
<div class="lt">
<div class="lt-left"><h4>内容一</h4></div>
<div class="lt-right"><h4>内容二</h4></div>
</div>
</html>
