草庐IT

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

Mickeybo101 2023-10-18 原文

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

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

 完毕。

博客园博客spancolorstyleHtml/Css

有关博客园页面展示--前端及样式代码的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  3. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  4. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  5. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  6. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  7. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  8. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  9. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  10. 程序员如何提高代码能力？ - 2

    前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源

随机推荐