來源：http://itssh.cn/post/898.html
HTML 個人博客框架模板參考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圓夢人生</title>
<!--
@author：SM
@email：sm0210@qq.com
@desc：個人博客框架
-->
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body {
overflow-x:hidden;
font-family:"MS Serif", "New York", serif,Arial, Helvetica, sans-serif;
font-size:14px;
}
.box {
}
/*
導航區(qū)域
*/
.box_left {
position:fixed;
top: 0px;
width:20%;
height:100%;
background:#fff url(images/box_left.jpg) no-repeat;
-webkit-background-size:cover;
background-size:cover;
}
.box_left_title {
color:#ffffff;
font-weight:bold;
font-size:38.5px;
padding:20px;
padding-top:15px;
padding-left:35px;
text-shadow:5px 2px 2px rgba(0,0,0,0.75);
}
/*
內(nèi)容區(qū)域
*/
.box_main {
min-height:100%;
/*background:#CCC;*/
width:80%;
position:absolute;
left:20%;
}
.box_main_nav {
padding:20px;
border-bottom:2px solid #D9D9D9;
}
</style>
</head>
<body>
<div class="box">
<!--left-->
<div class="box_left">
<div class="box_left_title">圓夢人生</div>
</div>
<!--main-->
<div class="box_main">
<div class="box_main_nav">
開啟思想之旅。。。
</div>
</div>
</div>
</body>
</html>
效果：
201606301467278080556160.jpg
