表严肃极简博客开发

0x01 总体布局

---

极简博客首页示意图

0x02 首页布局开发代码

html布局代码：

    

        

            QinTin博客
            

                
These are our hours


                This is our time

                
                Out on the verge

                
                Out on the verge of the rest of our lives

                
                Rest of our lives
   
            
        
        

            首页
            技术贴
            关于我
        
        

    
    

        

            

                
HTTP协议
                
作者:QinTin | 时间:2018年2月11日 | 标签:WEB安全
                

        
                
            
        
    

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;
            
        }

效果图：

效果图

更改版首页导航：

        文章分类
        

            
心情随笔
            
超牛技术
            
闲着无聊
            
资源分享
        
    
  

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