2. 程式人生 > 其它 >簡要部落格園製作

簡要部落格園製作

阿新 • • 發佈：2022-05-26 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部落格園頁面</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>

    <div  class = "blog-left" >
        <div class = "blog-avator">
            <img src="
 
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-5eb2cc0689065b097d1f57860c6f7e60_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656140006&t=18e31a28254fc0dde0f36269873a8df5" alt="">
        </div>
        <div class
 
 = "blog-title">
            <p>老司機的部落格</p>
        </div>
        <div class = "blog-info">
            <p>該司機飛了，什麼都沒有留下</p>
        </div>
        <div class = “blog-link”>
            <ul>
                <li><a href="">關於我</a></li>
                <li><a href=""
 
>微博</a></li>
                <li><a href="">微信公眾號</a></li>
            </ul>
        </div>
        <div class="blog-tag">
            <ul>
                <li><a href="">#Python</a></li>
                <li><a href="">#Java</a></li>
                <li><a href="">#Golang</a></li>
            </ul>
        </div>
    </div>
    <div class= "blog-right" >
        <div class = "article">
            <div class = "article-tittle">
                <span class =titile>論開車的重要性</span>
                <span class = data>2020/5/14</span>
            </div>
            <div class = article-body>
                <p>Janson老師！</p>
            </div>
            <div class = article-bottom>
                <span>#Python</span>&nbsp&nbsp<span>#JavaScript</span>
            </div>
        </div>
         <div class = "article">
            <div class = "article-tittle">
                <span class =titile>論開車的重要性</span>
                <span class = data>2020/5/14</span>
            </div>
            <div class = article-body>
                <p>Janson老師！</p>
            </div>
            <div class = article-bottom>
                <span>#Python</span>&nbsp&nbsp<span>#JavaScript</span>
            </div>
        </div>
         <div class = "article">
            <div class = "article-tittle">
                <span class =titile>論開車的重要性</span>
                <span class = data>2020/5/14</span>
            </div>
            <div class = article-body>
                <p>Janson老師！</p>
            </div>
            <div class = article-bottom>
                <span>#Python</span>&nbsp&nbsp<span>#JavaScript</span>
            </div>
        </div>
         <div class = "article">
            <div class = "article-tittle">
                <span class =titile>論開車的重要性</span>
                <span class = data>2020/5/14</span>
            </div>
            <div class = article-body>
                <p>Janson老師！</p>
            </div>
            <div class = article-bottom>
                <span>#Python</span>&nbsp&nbsp<span>#JavaScript</span>
            </div>
        </div>
         <div class = "article">
            <div class = "article-tittle">
                <span class =titile>論開車的重要性</span>
                <span class = data>2020/5/14</span>
            </div>
            <div class = article-body>
                <p>Janson老師！</p>
            </div>
            <div class = article-bottom>
                <span>#Python</span>&nbsp&nbsp<span>#JavaScript</span>
            </div>
        </div>
    </div>
</body>
</html>
css:
/*部落格園首頁樣式檔案*/
/*通用樣式*/
body{
    margin: 0;
    background-color: #eeeeee;
}
a{
    text-decoration: None;
}

ul{
    list-style: none;
    padding-left: 0;
}

/*左側從樣式*/

.blog-left{
    float:left;
    width: 20%;
    height: 100%;
    position: fixed;
    background-color: #4e4e4e;
}
.blog-avator{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid white;
    margin: 20px auto;
    overflow: hidden;
}

.blog-avator img{
    max-width: 100%;
}

.blog-title,.blog-info{
    color: darkgrey;
    font-size: 18px;
    text-align: center;
}
.“blog-link”,.blog-tag{
    font-size: 24px;
}
.“blog-link” a,.blog-tag a{
    color: darkgrey;
}
.“blog-link” a:hover,.blog-tag a:hover{
    color: white;
}
    ul{
        text-align: center;
        margin-top:60px;
    }
/*右側樣式*/
.blog-right{
    float:right;
    width: 80%;
    height: 100%;
}

.article{
    background-color: white;
    margin: 20px 40px 10px 10px;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.titile{
    font-size: 36px;
    font-family: KaiTi;
}
.data{
    float: right;
    margin:20px ;
    font-weight:bolder ;
}
.article-tittle{
    border-left: 5px solid red;
    text-indent: 1em;
}
.article-body{
    font-size: 20px;
    text-indent: 39px;
    border-bottom: 1px solid black;
}
.article-bottom{
    padding: 10px 39px;
    font-size: 20px;

}

相關推薦

簡要部落格園製作

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>部落格園頁面</title>

分享一個部落格園面板製作腳手架

前言 最近本著新年新氣象的想法，想換套新的部落格園面板。 之前自己做了一套製作面板的解決方案，這是當時分享面板以及解決方案的部落格：分享一款部落格園面板及其解決方案。

HTML+CSS製作部落格園主頁

　　這學期學習了PHP這門課程，老師在前兩週教我們CSS和HTML致死，這次製作部落格園主頁便是對前兩週的學習作為總結吧，個人審美天賦不高，製作的還是稍微有點亂以後慢慢改進。下面是我的效果圖以及實驗程式碼：

Spring Boot實戰（七）：Spring Boot實現仿部落格園傳送通知郵件

郵件服務已經是基礎性服務了 ，是網站的必備功能之一，當註冊了某些網站的時候，郵箱裡通常會收到一封註冊成功通知郵件或者點選啟用賬號的郵件，部落格園也是如此。本文使用Spring Boot，通過QQ郵箱來模仿部落格園傳

Python如何基於selenium實現自動登入部落格園

這篇文章主要介紹了Python如何基於selenium實現自動登入部落格園,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Python 批量刷部落格園訪問量指令碼過程解析

今早無聊。。。7點起來突然想寫個刷訪問量的。。那就動手吧 僅供測試，不建議刷訪問量哦~~

在部落格園博文中新增自定義右鍵選單的方法詳解

頁面設計 首先將這三個功能以一個列表<ul>的形式放置。滑鼠移入時樣式改變，移出時還原

[轉]max(min)-device-width和max(min)-width的區別 - 申文哲 - 部落格園(轉載請刪除括號裡的內容)

(轉載請刪除括號裡的內容) 在網頁自適應設計中，max-device-width和max-width是不可缺少的兩大CSS屬性，但是可能大家在使用的選擇上沒有太多講究，認為用其中一個即可。確實，如果沒有特定要求，用任何一個都沒有什麼

一個釋出文章到部落格園的 Python 指令碼

原文地址 我的個人獨立部落格是基於 Hexo 搭建的，因為小站，Google 搜尋引擎收錄文章比較慢，還搜不到

部落格園美化介面

首先進入設定，在設定中勾選禁用模板預設css， 然後就可以把對應的程式碼複製上去了

上傳python筆記，看看部落格園的編輯器的效果

一、Python 中的檔案操作 1.1 檔案操作需要了解的前置知識 1.1.1 為什麼需要用到檔案操作

部落格園文章新增目錄

前提 部落格側邊欄公告開通js支援，按照說明操作即可； 步驟一 頁面定製 CSS 程式碼中貼上如下程式碼，目的是修改生成的html的樣式

部落格園自定義程式碼塊樣式

一直都用部落格園寫部落格，後面自己曾經想自己寫一個部落格專案，但是因為各種各樣的事情最後做了一半就沒能繼續做下去。但是中間定製markdawn樣式的時候接觸到的程式碼高亮外掛highlight.js倒是給我留下了很深的影

SpringSecurity動態鑑權流程解析 | 部落格園新人第二彈

如果不能談情說愛，我們可以自憐自愛。 楔子 上一篇文我們講過了SpringSecurity的認證流程，相信大家認真讀過了之後一定會對SpringSecurity的認證流程已經明白個七八分了，本期是我們如約而至的動態鑑權篇，看這篇

SpringSecurity啟動流程原始碼解析 | 部落格園新人第三彈

別辜負生命，別辜負自己。 楔子 前面兩期我講了SpringSecurity認證流程和SpringSecurity鑑權流程，今天是第三期，是SpringSecurity的收尾工作，講SpringSecurity的啟動流程。

[轉]用 async/await 來處理非同步 - SamWeb - 部落格園

　　昨天看了一篇vue的教程，作者用async/ await來發送非同步請求，從服務端獲取資料，程式碼很簡潔，同時async/await 已經被標準化，也是需要學習一下了。

部落格園裝飾——（二）滾動到頁面頂部或底部

部落格園裝飾——（二）滾動到頁面頂部或底部 一、功能描述 1.1 文字描述 當頁面向下滾動一定距離時，向下滾動到底部的按鈕以淡入的效果出現，並以固定定位顯示。且滾動到一定距離(快接近所設定的底部)時，該按鈕又

部落格園裝飾——（一）置頂選單欄

部落格園裝飾——（一）置頂選單欄 一、功能描述 1.1 文字描述 當頁面向下滾動到選單欄上邊沿觸碰到瀏覽器視窗上邊沿時，選單欄會固定地顯示在瀏覽器視窗上方(貼緊)，即達到了置頂選單欄的效果。而當頁面向上滾動到

部落格園樣式管理總結（個人部落格園裝修指南）

一、如何自定義部落格園的各級標題樣式 參考部落格：https://www.cnblogs.com/maxiaodoubao/p/9854705.html

部落格園美化日記

搞了一整天，沒做多好，以後再做吧。 首頁佈局還可以，開啟一篇文章就亂了，心累。