博客园页面展示--前端及样式代码

2023-04-22 14:47 由 Mickeybo 发表于 #前端开发

这是一个博客园的首页面的展示前端代码和样式代码

样式代码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;样式，用以查看此模块大小，以上就是全部的页面展示代码了
运行成功的话，页面如下所示：

完毕。