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
网友评论