表嚴肅極簡博客開發

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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容