博客園頁面展示--前端及樣式代碼

-Advertisement-

這是一個博客園的首頁面的展示前端代碼和樣式代碼樣式代碼CSS採用外部鏈接，建好文件直接複製運行vscode即可，話不多說，直接上代碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mickey - 博客園</title> < ...

這是一個博客園的首頁面的展示前端代碼和樣式代碼

樣式代碼CSS採用外部鏈接，建好文件直接複製運行vscode即可，話不多說，直接上代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mickey - 博客園</title>
        <link rel="stylesheet" href="css/new_file.css"/>
    </head>

    <body>
        <div id="wrap">
            <!-- 頭部開始 -->
            <div id="header">
                <h1><a href="#">Mickey</a></h1>
                <p>
                    隨筆-<span>0</span>
                    文章-<span>0</span>
                    評論-<span>0</span>
                </p>
                <ul>
                    <li><a href="#">博客園</a></li>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">新隨筆</a></li>
                    <li><a href="#">聯繫</a></li>
                    <li><a href="#">訂閱</a></li>
                    <li><a href="#">管理</a></li>
                </ul>
            </div>
            <!-- 頭部結束 -->
            <!-- 主體開始 -->
            <div id="mainbody">
                <!-- 公告 -->
                <div id="news" class="haha">
                    <h3 class="head">公告</h3>
                    <ul>
                        <li>昵稱：<a href="#">willYKYao</a></li>
                        <li>圓齡：<a href="#">1天</a></li>
                        <li>粉絲：<a href="#">0</a></li>
                        <li>關註：<a href="#">0</a></li>
                        <li><a href="#">+加關註</a></li>
                    </ul>
                </div>
                <!-- 日曆 -->
                <div id="time">
                    <h3>
                        <span class="left"><a href="">&lt;</a></span>
                        <span class="right"><a href="">&gt;</a></span>
                        2016年10月
                    </h3>
                    <table>
                        <thead>
                            <tr>日</tr>
                            <tr>一</tr>
                            <tr>二</tr>
                            <tr>三</tr>
                            <tr>四</tr>
                            <tr>五</tr>
                            <tr>六</tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>25</td>
                                <td>26</td>
                                <td>27</td>
                                <td>28</td>
                                <td>29</td>
                                <td>30</td>
                                <td>1</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>7</td>
                                <td>8</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>10</td>
                                <td>11</td>
                                <td>12</td>
                                <td>13</td>
                                <td>14</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>16</td>
                                <td>17</td>
                                <td>18</td>
                                <td>19</td>
                                <td>20</td>
                                <td>21</td>
                                <td>22</td>
                            </tr>
                            <tr>
                                <td>23</td>
                                <td>24</td>
                                <td>25</td>
                                <td>26</td>
                                <td>27</td>
                                <td>28</td>
                                <td>29</td>
                            </tr>
                            <tr>
                                <td>30</td>
                                <td>31</td>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 搜索 -->
            <div id="search">
                <h3 class="head">搜索</h3>
                <div>
                    <input class="txt" type="text">
                    <input type="button" value="找找看"><br>
                    <input class="txt" type="text">
                    <input type="button" value="谷歌搜索">
                </div>
            </div>
            <div id="link" class="haha">
                <h3 class="head">常用鏈接</h3>
                <ul>
                    <li><a href="#">我的隨筆</a></li>
                    <li><a href="#">我的評論</a></li>
                    <li><a href="#">我的參與</a></li>
                    <li><a href="#">最佳評論</a></li>
                    <li><a href="#">我的標簽</a></li>
                </ul>
            </div>
            <!-- 主體結束 -->
            <!-- 尾部開始 -->
            <div id="footer">
                <P>copyright&copy;2016 Mickey</P>
            </div>
            <!-- 尾部結束 -->
        </div>
    </body>
</html>

前端代碼如上所示，簡單編寫了幾個模塊，下麵是CSS樣式代碼

body,h1,h2,h3,h4,h5,h6,p,ul,table,tbody{
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
}
li{
    list-style-type:none;
}

body{
    font-size:12px;
    font-family:"宋體",arial,sans-serif;
    background:#c7cbbd url(../img/header-bg.jpg) no-repeat;
    color:#6a6352;
}
#wrap{
    width:950px;
    margin:0 auto;
}

/*頭部*/
#header{
    height:300px;
    border: 1px solid red;
}
#header h1{
    padding-top:136px;
    font-family:arial;
}
#header h1 a{
    font-size:38px;
    font-weight:normal;
    color:#000;
}
#header h1 a:hover{
    text-decoration:underline;
}
#header p{
    color:#666;
    border: 1px solid red;
    margin:45px 0 0 810px;
}
#header ul{
    margin:10px 0 0 40px;
}
#header ul li{
    font-family: "微軟雅黑";
    float:left;
    text-align: center;
}
#header ul li a{
    display:inline-block;
    width:70px;
    font-size:14px;
    color:#555;
    border: 1px solid red;
}
#header ul li a:hover{
    font-size:18px;
    color:#222;
}

/*主體公告*/
.head{
    color:#55626e;
    font-size:14px;
    font-family:"宋體";
    padding:5px 166px 3px 10px;
    display:inline-block;
    border-bottom:1px solid #d6dddc;
    border: 1px solid red;
}
.haha{
    margin-top:10px;
}
.haha ul{
    padding:15px 0px 0px 10px;
    border: 1px solid red;
}
.haha ul li{
    font-size:12px;
    line-height:18px;
}
.haha ul li a{
    font-family:arial;
    color:#6a6352;
}
.haha ul li a:hover{
    text-decoration:underline;
}

/*日曆*/
#time{
    margin-top:34px;
    position:relative;
    font-size:14px;
    font-family:arial;
    border: 1px solid red;
    
}
#time h3{
    font-size:13px;
    margin:0 0 8px 63px;
    letter-spacing:1px;
}
#time span a{
    font-weight:normal;
    color:#6a6352;
}
#time span a:hover{
    text-decoration:underline;
}
#time table{
    height:145px;
    text-align: center;
    width:207px;
    border: 1px solid red;
    
}
#time table thead{
    font-weight:bold;
}
.active{
    color:red;
}
#time .left{
    position:absolute;
    left:6px;
    top:0px;
}
#time .right{
    position:absolute;
    left:192px;
    top:0px;
}

/*搜索*/
#search div{
    padding-left:10px;
}
#search .txt{
    width:102px;
    height:20px;
    margin-top:5px;
}

/*鏈接*/
#link li{
    line-height:20px;
}

/*尾部*/
#footer{
    height:90px;
    line-height:90px;
    font-family:arial;
    text-align: center;
    font-size:14px;
    border: 1px solid red;
}

樣式代碼中，方便學習，添加了較多的

border: 1px solid red;樣式，用以查看此模塊大小，以上就是全部的頁面展示代碼了
運行成功的話，頁面如下所示：

完畢。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

GD32F103C8T6入門——GPIO配置點亮LED

1.硬體 GD32F103C8T6最小系統板 ST-LINK V2下載器 2.GPIO說明每個通用I/O埠都可以通過兩個32位的控制寄存器(GPIOx_CTL0/ GPIOx_CTL1)和兩個32位的數據寄存器(GPIOx_ISTAT, GPIOx_OCTL)配置為8種模式：模擬輸入，浮空輸入 ...
主從redis部署(docker)

首先，我準備了兩台linux，一臺準備當作master，ip是192.168.241.128，另一臺是當作slave，ip是192.168.241.129。 1. 安裝redis docker pull redis 2. 下載對應版本的redis.conf 可以從github上下載。新建配置環境目錄 ...
語言錄製相容長按跟點擊錄製

錄音需求中，往往有兩種常規操作。長按基本實現流程：監聽觸摸事件，按下時錄製，抬起時停止。點擊基本流程：點擊開始錄製，在次點擊停止錄製但是凡事有絕對，如果需要同時支持長按錄製抬起結束跟點擊錄製在次點擊結束呢？面對如此無理的需求，從技術層面上怎麼如絲滑般去相容呢。需要兩者相容，只能從觸摸事件 ...
TypeScript中的實用工具類型(Utility Types)

為什麼要使用Composition API? 根據官方的說法，vue3.0的變化包括性能上的改進、更小的 bundle 體積、對 TypeScript 更好的支持、用於處理大規模用例的全新 API，全新的api指的就是本文主要要說的組合式api。在 vue3 版本之前，我們復用組件（或者提取和重用 ...
WebSocket與Sock.js介紹

WebSocket與Sock.js介紹今天先到這兒，希望對雲原生，技術領導力，企業管理，系統架構設計與評估，團隊管理, 項目管理, 產品管管，團隊建設有參考作用 , 您可能感興趣的文章: 領導人怎樣帶領好團隊構建創業公司突擊小團隊國際化環境下系統架構演化微服務架構設計視頻直播平臺的系統架構演化微 ...
線上多功能變數名稱實戰

本文博主給大家分享線上多功能變數名稱實戰，當線上主功能變數名稱不可用的情況下，啟用備用功能變數名稱完成網站高可用保障。網站的高可用性一直是網站運維的重中之重。一旦網站宕機，不僅會造成巨大的經濟損失，也會嚴重影響用戶體驗。備份功能變數名稱就是一種實現網站高可用的重要手段。通過備份功能變數名稱，可以在主功能變數名稱不可訪問時快速切換功能變數名稱，保證網站正 ...
Vue基礎知識

模板語法文本插值（text interpolation）最基本的數據綁定形式，使用“Mustache”語法即{{...}} <span>Message:{{msg}}</span> {{}}中的值會被替換為相應組件實例中msg屬性的值，且會同步地更新原始HTML <p>Message:<spa ...
react18中antd的Upload組件上傳頭像，並且拿到伺服器返回的頭像的url地址在頁面中顯示頭像

業務需求：上傳頭像，上傳完畢後拿到頭像的url，把頭像展示在頁面中，最終把頭像url和其他用戶信息一起發送給伺服器上傳頭像流程導入 Upload 組件和圖標(一個加號，一個載入中) import { Upload } from 'antd'; import { PlusOutlined, Loa ...