0x01 總體布局
極簡博客首頁示意圖
0x02 首頁布局開發代碼
html布局代碼：
<body>
<div id="sideBar">
<div class="header">
<a href="./index.html" class="logo">QinTin博客</a>
<div class="intro">
<p>These are our hours<br/>
This is our time<br/>
Out on the verge<br/>
Out on the verge of the rest of our lives<br/>
Rest of our lives</p>
</div>
</div>
<div class="nav">
<a href="#" class="item">首頁</a>
<a href="#" class="item">技術貼</a>
<a href="#" class="item">關于我</a>
</div>
<div class="tag"></div>
</div>
<div id="mainCon">
<div class="article-list">
<div class="item">
<div class="title">HTTP協議</div>
<div class="status">作者:QinTin | 時間:2018年2月11日 | 標簽:WEB安全</div>
<div class="content">
</div>
</div>
</div>
</div>
</body>
CSS樣式代碼：
/*清楚所有元素的margin和padding*/
*{
margin: 0px;
padding: 0px;
}
/*給body添加一個背景顏色*/
body{
background: #454545;
line-height: 1.7;
}
/*設置body和a的字體顏色為#eee*/
a,body{
color: #eee;
}
/*清楚a的下劃線*/
a{
text-decoration: none;
}
#sideBar{
float: left;
width: 15%;
}
/*將sideBar元素的所有子元素全部往進推一點padding*/
#sideBar > *{
padding: 10px 15px;
}
#sideBar .logo{
font-size: 30px;
line-height: 1;
padding: 20px;
border:5px solid #eee;
display: inline-block;
margin-bottom: 10px;
}
#sideBar .nav a{
font-size: 14px;
font-weight: 700;
}
/*sideBar元素下的nav和tag的a元素以塊元素顯示*/
#sideBar .nav a,#sideBar .tag a{
display: block;
padding: 8px 5px;
color: #888;
}
#sideBar .nav a:hover,#sideBar .tag a:hover{
color: #eee;
transition: color 500ms;
}
#mainCon{
float:right;
width:85%;
color:#454545;
font-size: 16px;
}
#mainCon .article-list{
margin-right: 25%;
background: #fff;
padding: 20px;
box-shadow: 0 0 5px 3px rgba(0,0,0,0.5)
}
#mainCon .article-list .item > *{
margin:10px 0;
}
#mainCon .article-list .item{
margin-bottom: 30px;
}
#mainCon .article-list .item .title{
font-size: 25px;
font-weight: 800;
}
#mainCon .article-list .item .status{
font-size: 14px;
font-weight: 400;
color:#ccc;
}
效果圖：
效果圖
更改版首頁導航：
<div id="nav">
<span id="span1">文章分類</span>
<ul id="ul1">
<li><a href="./heart.html">心情隨筆</a></li>
<li><a href="./tec.html">超牛技術</a></li>
<li><a href="./wuliao.html">閑著無聊</a></li>
<li><a href="./ziyuan.html">資源分享</a></li>
</ul>
</div>
js隱藏導航代碼：
var Onav = document.getElementById('nav');
var Oul = document.getElementById('ul1');
Onav.onmouseover=function(){
Oul.style.display = 'block';
};
Onav.onmouseout=function(){
Oul.style.display='none';
};
nav.JPG
