实训-个人博客02（静态详情）

于 2021-06-07 10:51:35 发布
阅读量143 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46302173/article/details/117477024
版权

博客详情页面

文章目录

1，复制index.html更改为blog.html

在这里插入图片描述

2，修改页面，删除中间内容，其余的不变

在这里插入图片描述

3，头部

            <div class="ui top attached segment">
                <div class="ui  horizontal link list">
                    <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">周璐</a></div>
                    </div>
                    <!--日期-->
                    <div class="item">
                        <i class="calendar icon"></i>2017-10-01
                    </div>
                    <!--浏览次数-->
                    <div class="item">
                        <i class="eye icon"></i>2342
                    </div>
                </div>
            </div>

效果
在这里插入图片描述

4，图片区域

            <div class="ui attached segment">
                <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui fluid rounded image">
            </div>

效果
在这里插入图片描述

5，内容

            <div class="ui attached padded segment">
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label">原创</div>
                </div>
                <h2 class="ui center aligned header">关于刻意练习的清单</h2>
                <br>
                <div id="content" class="m-padded-lr-responsive m-padded-tb-large">
                    <p>最近几天在读「刻意练习」这本书，书中的一些概念与方法论让我受益非浅。「刻意练习」是适用于任何领域技能的一套有效的学习方法。在学习一项技能的时候，尽量的靠近「刻意练习」的原则，是非常有效的。这里结合自己的学习经验，总结对大家普遍适用的核心的概念与方法论以「清单」的形式分享，与君共勉。</p>
                    <h2>1</h2>
                    <p>不论在什么行业或领域，提高技能与能力的最有效方法全都遵循一系列普遍原则，就是刻意练习。成为任何领域高手的关键因素不是文化，不是艺术，不是哲学，不是制度，不是自虐，而是刻意练习。</p>
                    <h2>2</h2>
                    <p>关于刻意练习，被误读最久的一个概念是"一万小时定律”。事实上，想把自己变成高手，光知道"一万小时“毫无意义，因为真正的关键根本不在训练时间，而是训练的方法。</p>
                    <h2>3</h2>
                    <p>功夫就在功夫上，“功夫在诗外"就是一句谎言。技能是人脑中的一种硬件结构，是"长"在人脑中的。要高度针对性地重复练习基本功，想要学什么功夫，就应该练什么功夫。</p>
                    <h2>4</h2>
                    <p>心理学家把人的知识和技能分为层层嵌套的三个圆形区域:最内一层是"舒适区”，是我们已经熟练掌握的各种技能;最外一层是“恐慌区”，是我们暂时无法学会的技能;二者中间则是“学习区”。</p>
                    <h2>5</h2>
                    <p>在"舒适区"做事，叫生活;在"学习区”做事，才叫练习。有效的练习必须发生在"学习区”，一旦你学会了某个东西，就不该在上面继续花时间，要立即转入下一个难度。凡是达到我闭着眼睛都能……"这个程度的人都废了，高手不会闭着眼睛做事。</p>
                    <h2>6</h2>
                    <p>刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>
                    <h2>7</h2>
                    <p>刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>
                    <h2>总结</h2>
                    <p>刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>
                </div>
                <!--标签-->
                <div class="m-padded-lr-responsive m-padded-tb-large">
                    <div class="ui basic teal left pointing label">方法论</div>
                </div>
                <!--赞赏-->
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQR flowing popup  transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit">
                            <div class="image">
                                <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

效果
在这里插入图片描述

6，标签与赞赏

 <!--标签-->
                <div class="m-padded-lr-responsive m-padded-tb-large">
                    <div class="ui basic teal left pointing label">方法论</div>
                </div>
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQR flowing popup  transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit">
                            <div class="image">
                                <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>

效果
在这里插入图片描述

7，博客信息

<div class="ui attached positive message">
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ul class="list">
                            <li>作者：李仁密（联系作者）</li>
                            <li>发表时间：2017-10-02 09：08</li>
                            <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                            <li>公众号转载：请在文末添加作者公众号二维码</li>
                        </ul>
                    </div>
                    <div class="five wide column">
                        <img src="./static/images/wechat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
                    </div>
                </div>
            </div>

效果
在这里插入图片描述

8，评论列表

            <div class="ui bottom attached segment">
            <!--留言区域列表-->
                <div class="ui teal segment">
                    <div class="ui comments">
                        <h3 class="ui dividing header">Comments</h3>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                    <span class="date">Today at 5:42PM</span>
                                </div>
                                <div class="text">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--提交留言-->
                <div class="ui form">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论信息..."></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="姓名">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" name="email" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                        </div>
                    </div>
                </div>
            </div>

效果
在这里插入图片描述

9，全部css

body{
    background: url("../images/bg.jpg");
}

.m-padded-mini{
    padding: 0.2em !important;
}
.m-padded-tiny{
    padding: 0.3em !important;
}
/*----不同的上下间距----*/
.m-padded-tb-mini{
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}
.m-padded-tb-tiny{
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
}
.m-padded-tb-small{
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}
.m-padded-tb{
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}
.m-padded-tb-large{
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}
.m-padded-tb-big{
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}
.m-padded-tb-huge{
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}
.m-padded-tb-massive{
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}
.m-padded-lr-responsive{
    padding-left: 4em !important;
    padding-right: 4em !important;
}
/*----text----*/

.m-text{
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
}
.m-text-thin{
    font-weight: 300 !important;
}
.m-text-spaced{
    letter-spacing: 1px !important;
}
.m-text-lined{
    line-height: 1.8;
}

/*----margin----*/
.m-margin-top-small{
    margin-top: 0.5em !important;
}
.m-margin-top {
    margin-top: 1em !important;
}
.m-margin-top-large {
    margin-top: 2em !important;
}
.m-margin-tb-tiny{
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
}
.m-margin-bottom-small{
    margin-bottom: 0.5em !important;
}
/*----opacity----*/
.m-opacity-mini{
    opacity: 0.8 !important;
}
.m-opacity-tiny{
    opacity: 0.6 !important;
}


/*----position----*/
.m-right-top{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}
/*----display----*/
.m-inline-block{
    display: inline-block !important;
}

/*----color----*/
.m-black {
    color: #333 !important;
}
/*----container----*/
.m-container {
    max-width: 70em !important;
    margin: auto !important;
}
.m-container-small {
    max-width: 60em !important;
    margin: auto !important;
}

.m-mobile-show {
    display: none !important;
}
@media screen and (max-width: 768px){
    .m-mobile-hide {
        display: none !important;
    }
    .m-mobile-show {
        display: block !important;
    }
    .m-padded-lr-responsive{
        padding-left: 0 !important;
        padding-right: 0 !important; ;
    }
    .m-mobile-wide{
        width: 100%;
    }
}

10，全部blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./static/css/me.css">
    <title>博客详情</title>
</head>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui  icon inverted transparent input">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"  >
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container"><!--container:自适应改变大小-->
            <!--头部-->
            <div class="ui top attached segment">
                <div class="ui  horizontal link list">
                    <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">周璐</a></div>
                    </div>
                    <!--日期-->
                    <div class="item">
                        <i class="calendar icon"></i>2017-10-01
                    </div>
                    <!--浏览次数-->
                    <div class="item">
                        <i class="eye icon"></i>2342
                    </div>
                </div>
            </div>
            <!--图片区域-->
            <div class="ui attached segment">
                <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui fluid rounded image">
            </div>
            <!--内容-->
            <div class="ui attached padded segment">
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label">原创</div>
                </div>
                <h2 class="ui center aligned header">关于刻意练习的清单</h2>
                <br>
                <div id="content" class="m-padded-lr-responsive m-padded-tb-large">
                    <p>最近几天在读「刻意练习」这本书，书中的一些概念与方法论让我受益非浅。「刻意练习」是适用于任何领域技能的一套有效的学习方法。在学习一项技能的时候，尽量的靠近「刻意练习」的原则，是非常有效的。这里结合自己的学习经验，总结对大家普遍适用的核心的概念与方法论以「清单」的形式分享，与君共勉。</p>
                    <h2>1</h2>
                    <p>不论在什么行业或领域，提高技能与能力的最有效方法全都遵循一系列普遍原则，就是刻意练习。成为任何领域高手的关键因素不是文化，不是艺术，不是哲学，不是制度，不是自虐，而是刻意练习。</p>
                    <h2>2</h2>
                    <p>关于刻意练习，被误读最久的一个概念是"一万小时定律”。事实上，想把自己变成高手，光知道"一万小时“毫无意义，因为真正的关键根本不在训练时间，而是训练的方法。</p>
                    <h2>3</h2>
                    <p>功夫就在功夫上，“功夫在诗外"就是一句谎言。技能是人脑中的一种硬件结构，是"长"在人脑中的。要高度针对性地重复练习基本功，想要学什么功夫，就应该练什么功夫。</p>
                    <h2>4</h2>
                    <p>心理学家把人的知识和技能分为层层嵌套的三个圆形区域:最内一层是"舒适区”，是我们已经熟练掌握的各种技能;最外一层是“恐慌区”，是我们暂时无法学会的技能;二者中间则是“学习区”。</p>
                    <h2>5</h2>
                    <p>在"舒适区"做事，叫生活;在"学习区”做事，才叫练习。有效的练习必须发生在"学习区”，一旦你学会了某个东西，就不该在上面继续花时间，要立即转入下一个难度。凡是达到我闭着眼睛都能……"这个程度的人都废了，高手不会闭着眼睛做事。</p>
                    <h2>6</h2>
                    <p>刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>
                    <h2>7</h2>
                    <p>刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>
                    <h2>总结</h2>
                    <p>刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>
                </div>
                <!--标签-->
                <div class="m-padded-lr-responsive m-padded-tb-large">
                    <div class="ui basic teal left pointing label">方法论</div>
                </div>
                <!--赞赏-->
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQR flowing popup  transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit">
                            <div class="image">
                                <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--博客信息-->
            <div class="ui attached positive message">
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ul class="list">
                            <li>作者：李仁密（联系作者）</li>
                            <li>发表时间：2017-10-02 09：08</li>
                            <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                            <li>公众号转载：请在文末添加作者公众号二维码</li>
                        </ul>
                    </div>
                    <div class="five wide column">
                        <img src="./static/images/wechat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
                    </div>
                </div>
            </div>
            <!--留言区域-->
            <div class="ui bottom attached segment">
            <!--留言区域列表-->
                <div class="ui teal segment">
                    <div class="ui comments">
                        <h3 class="ui dividing header">Comments</h3>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                    <span class="date">Today at 5:42PM</span>
                                </div>
                                <div class="text">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--提交留言-->
                <div class="ui form">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论信息..."></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="姓名">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" name="email" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底部footer-->
    <footer class="ui inverted  vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/images/wechat.jpg" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email:2392347073@qq.com</a>
                        <a href="#" class="item">QQ:2392347073</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">Lirenmi</h4>
                    <p class="">这是我的个人博客，会分享关于编程、写作、思考相关的任何内容，希望可以给来到这里的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright  2016-2017 Lirenmi DESIGNED BYlIRENMI </p>
        </div>

    </footer>
<script src="./static/js/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });
        // 赞赏
        $('#payButton').popup({
            popup : $('.payQR.popup'),
            on : 'click',
            position:'bottom center'
        });
    </script>
</body>
</html>

11,整体效果

在这里插入图片描述

羔羊深
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值