138 lines
3.0 KiB
HTML
138 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>个人博客系统</title>
|
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
<link href="css/left.css" rel="stylesheet" type="text/css">
|
|
<script type="text/javascript" src="js/left.js"></script>
|
|
<script type="text/javascript">
|
|
</script>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
|
|
</head>
|
|
<style>
|
|
|
|
.container {
|
|
width: 800px;
|
|
height: 600px;
|
|
overflow: hidden;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
#top {
|
|
font-family: "Source Code Pro";
|
|
color: #FFFDFF;
|
|
font: 13px white;
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
top: 0px;
|
|
bottom: auto;
|
|
left: 0px;
|
|
right: 0px;
|
|
width: 800px;
|
|
height: 50px;
|
|
z-index: 0;
|
|
padding: 24px 0px 0px 0px;
|
|
background: #0b58a2;
|
|
border: 1px solid rgb(187, 187, 187);
|
|
overflow: auto;
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
#top li {
|
|
display: inline-block;
|
|
margin: 3px 10px;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
border: #0a0a0a 1px ;
|
|
background: #1d5987;
|
|
}
|
|
#sidebar {
|
|
margin-top: 1px;
|
|
padding-left: 0px;
|
|
display: inline-block;
|
|
bottom: 0px;
|
|
}
|
|
#container{
|
|
position: absolute;
|
|
display: grid;
|
|
top:74px;
|
|
margin: auto;
|
|
width:800px;
|
|
height: 600px;
|
|
grid-column-gap: 1px;
|
|
}
|
|
#container #right{
|
|
margin-top: 3px;
|
|
background: #FFFDFF;
|
|
display: inline-grid;
|
|
width: 680px;
|
|
float: top;
|
|
border: #0b93d5 solid 1px;
|
|
border-radius: 1px;
|
|
height: 100%;
|
|
grid-column-start: 2;
|
|
grid-column-end: 12;
|
|
}
|
|
#footer{
|
|
position: absolute;
|
|
bottom: 0px;
|
|
background: #FFFDFF;
|
|
width: 800px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="js/scripts.js">
|
|
</script>
|
|
<body class="container">
|
|
<div id="top">
|
|
<div style="display: inline;float: right">书山有路勤为径，学海无涯苦做舟</div>
|
|
<div id="sidebar">
|
|
<ul style="padding-left: 0px">
|
|
<li>文章</li>
|
|
<li>项目</li>
|
|
<li>杂文</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="container">
|
|
<div id="left">
|
|
|
|
<!--包裹层-->
|
|
<div class="navMenuBox" >
|
|
<!--一级菜单-->
|
|
<ul class="navMenu" id="navMenu">
|
|
<!--菜单项-->
|
|
<li>
|
|
<!--arrow类给具有下级菜单项添加箭头图标-->
|
|
<a href="#" class="arrow">分类1</a>
|
|
<!--子菜单-->
|
|
<ul class="subMenu">
|
|
<li><a href="#">分类1</a></li>
|
|
<li><a href="#">分类1</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="right">
|
|
<div style="width: 670px; height: 160px; border-bottom: #0b58a2 solid 1px ;margin: 5px 5px 5px 5px;">
|
|
<div class="title" style="font-size: 12px;font-weight: bold">
|
|
<p style="display: inline;margin-left: 5px;">2019-08-04 </p>
|
|
<p style="display: inline;margin-left: 5px;">测试</p>
|
|
<p style="display: inline;margin:0px;float: right; margin-right: 20px">作者: 管理员</p>
|
|
</div>
|
|
<div style="width: 100%;height: 140px;font-size: 10px;margin-top: 10px;">
|
|
"测试"
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
<p style="font-size: 5px;margin: auto;width: 250px;text-align: center">个人网站,备案号: 闽ICP备19002644号-1</p>
|
|
<p style="font-size: 5px;margin: auto;width: 150px;text-align: center">testingcloud.club</p>
|
|
<p style="font-size: 5px;margin: auto;width: 150px;text-align: center">技术交流</p>
|
|
</div>
|
|
</body>
|