定制私人博客

导航栏:http://www.php100.com/html/plugin/pic/2013/0911/544.html

 

CSS3 Maker
这款工具[3] 非常强大,可在线演示渐变、阴影、旋转、动画等非常多的效果,并生成对应效果的代码,
CSS3 Generator
非常不错的各种 CSS3 代码生成器,支持圆角、渐变、旋转和阴影等众多特性,带预览效果。
CSS3 Please
帅且酷的一款 CSS3 工具,可即时在线修改代码并预览效果,还有详细的浏览器兼容情况。
 
讨论区模板
 
http://segmentfault.com/q/1010000002578030?sort=created#answers-title
<!-- 
<link href="//static.segmentfault.com/build/global/css/global.49298ea7.css" rel="stylesheet"></link>
<link href="//static.segmentfault.com/build/blog/css/blog_all.801c2b7a.css" rel="stylesheet"></link>
<link href="//static.segmentfault.com/build/global/css/responsive.2e038079.css" rel="stylesheet"></link>
!-->
<html>

<head>
<style>
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.taglist--inline,.taglist--block{list-style:none;padding:0;font-size:0}
.taglist--inline li,.taglist--block li{padding:0;font-size:13px}
.ib.taglist--inline,.ib.taglist--block{margin:0;display:inline-block}
.taglist--inline>li{display:inline-block;margin-right:5px}
.taglist--inline>li:last-child{margin-right:0}
.taglist--inline.multi>li{margin-bottom:5px}
.pull-left{float:left !important}
/* ------------------------------ */
.text-center{text-align:center}
.btn{margin-left:0}

.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open>.btn-success.dropdown-toggle{color:#fff;background-color:#449d44;border-color:#398439}
.btn-success:active,.btn-success.active,.open>.btn-success.dropdown-toggle{background-image:none}
.btn-success.disabled,.btn-success.disabled:hover,.btn-success.disabled:focus,.btn-success.disabled:active,.btn-success.disabled.active,.btn-success[disabled],.btn-success[disabled]:hover,.btn-success[disabled]:focus,.btn-success[disabled]:active,.btn-success[disabled].active,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success:hover,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#4cae4c}
.btn-success .badge{color:#5cb85c;background-color:#fff}

.btn-default{color:#333;background-color:#fff;border-color:#ccc}
.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open>.btn-default.dropdown-toggle{color:#333;background-color:#e6e6e6;border-color:#adadad}
.btn-default:active,.btn-default.active,.open>.btn-default.dropdown-toggle{background-image:none}
.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active{background-color:#fff;border-color:#ccc}
.btn-default .badge{color:#fff;background-color:#333}

.btn-success{border-color:#51b351;background-color:#5cb85c;-webkit-box-shadow:none;box-shadow:none;background-image:-webkit-linear-gradient(top, #5cb85c 0%, #55b555 100%);background-image:-o-linear-gradient(top, #5cb85c 0%, #55b555 100%);background-image:linear-gradient(to bottom, #5cb85c 0%, #55b555 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5CB85C', endColorstr='#FF55B555', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false)}
.btn-success:hover,.btn-success:focus{border-color:#47a447;background-color:#4cae4c}
.btn-success:active,.btn-success.active{background-color:#4cae4c;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}
.btn-success.disabled:hover,.btn-success.disabled:active,.btn-success[disabled]:hover,.btn-success[disabled]:active{border-color:#60ba60;background-color:#60ba60}

.btn-default{border-color:#f7f7f7;background-color:#fff;-webkit-box-shadow:none;box-shadow:none;background-image:-webkit-linear-gradient(top, #fff 0%, #fafafa 100%);background-image:-o-linear-gradient(top, #fff 0%, #fafafa 100%);background-image:linear-gradient(to bottom, #fff 0%, #fafafa 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFFAFAFA', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#ccc;color:#666}.btn-default:hover,.btn-default:focus{border-color:#ebebeb;background-color:#f2f2f2}.btn-default:active,.btn-default.active{background-color:#f2f2f2;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn-default.disabled:hover,.btn-default.disabled:active,.btn-default[disabled]:hover,.btn-default[disabled]:active{border-color:#fff;background-color:#fff}
.btn-default:hover{border-color:#aaa}

.mr10,.mr-10{margin-right:10px}
/*----------------------------------------------------------*/
.list-unstyled{padding-left:0;list-style:none}
.text-muted{color:#777}
.mt5,.mt-5{margin-top:5px}
.mt30,.mt-30{margin-top:30px}
a{background:transparent}
a:active,a:hover{outline:0}
a{color:#008E59;text-decoration:none}
a:hover,a:focus{color:#004229;text-decoration:underline}
a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}

/*----------------------------------------------------------*/
.post-title {
    padding-bottom: 15px;
    border-bottom: 2px solid rgb(204, 204, 204);
}

h4, .h4 {
    font-size: 18px;
}
h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 10.5px;
    margin-bottom: 10.5px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}
* {
    -moz-box-sizing: border-box;
}
*:before, *:after {
    -moz-box-sizing: border-box;
}

/*------------------------------------------------------*/
.widget-comments {
    list-style: none outside none;
    margin: 0px 0px 15px;
    font-size: 13px;
    color: rgb(102, 102, 102);
    padding: 10px;
    background-color: rgb(246, 246, 246);
    border-radius: 2px;
}
.widget-comments .widget-comments__item {
    margin-bottom: 10px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAEUlEQVQIHWO4e/fufxBmgAIAWVEHLYEgi9EAAAAASUVORK5CYII=") repeat-x scroll center bottom transparent;
    transition-duration: 1s;
}
.widget-comments .votes {
    position: relative;
    text-align: center;
    float: left;
    margin: 5px 10px 0px 0px;
    width: 20px;
    height: 30px;
    line-height: 40px;
    font-size: 12px;
    background: none repeat scroll 0% 0% transparent;
    box-shadow: none;
}
.widget-comments .votes button {
    position: absolute;
    left: 0px;
    top: 0px;
    outline: medium none;
    padding: 0px;
    width: 100%;
    height: 100%;
    border: medium none;
    background: url("http://static.segmentfault.com/build/global/img/vote-bg@2x.947a5de3.png") no-repeat scroll -120px 0px / auto 54px transparent;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0px;
}
.widget-comments .comment-content {
    overflow: auto;
}
.wordbreak {
    word-break: break-all;
}

.widget-comments .fmt {
    font-size: 13px;
}

.widget-comments .widget-comments__item .editTextarea {
    resize: none;
    min-height: 56px;
}
textarea.form-control {
    height: auto;
}
.hidden {
    display: none !important;
    visibility: hidden !important;
}
.form-control {
    display: block;
    width: 100%;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: rgb(85, 85, 85);
    background-color: rgb(255, 255, 255);
    background-image: none;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 3px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
textarea {
    overflow: auto;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0px;
}

.mt10, .mt-10 {
    margin-top: 10px;
}
p {
    margin: 0px 0px 10.5px;
}

.wordbreak {
    word-break: break-all;
}
</style>


</head>
<body>

<div class="article fmt"> 整个文章
</div>
<div class="clearfix">
    <ul class="taglist--inline pull-left">
        <li class="tagPopup">
            <a aria-describedby="popover118697" class="tag" href="/t/flask/blogs" data-toggle="popover" data-img="http://sfault-avatar.b0.upaiyun.com/516/611/516611241-1040000000125263_huge100" data-placement="top" data-original-title="flask" data-id="1040000000125263">flask</a>
            <div style="top: 6362.5px; left: -101.5px; display: none;" id="popover118697" class="popover tag-popup tag-popup-1040000000125263 fade top in">
                <div class="arrow"></div>
                <h3 class="popover-title">flask</h3>
                <div class="popover-content">Flask 是一个轻量级的 Web应用框架 , 使用 Python 编写。基于 Werkzeug WSGI 工具箱和 Jinja2 模板引擎...</div>
                <div class="popover-footer">
                    <a href="/t/flask">查看</a>
                    <span class="text-muted">·</span>
                    <a href="/t/flask/edit">编辑</a>
                    <div class="pull-right">
                        <span class="text-muted followers">262 人</span>
                        <button class="btn btn-default btn-xs tagfollow " data-id="1040000000125263">加关注</button>
                    </div>
                </div>
            </div>
        </li>
        <li class="tagPopup">
            <a aria-describedby="popover116335" class="tag" href="/t/ueditor/blogs" data-toggle="popover" data-img="" data-placement="top" data-original-title="ueditor" data-id="1040000000154694">ueditor</a>
            <div style="top: 6401.5px; left: -47.5px; display: none;" id="popover116335" class="popover tag-popup tag-popup-1040000000154694 fade top in">
                <div class="arrow"></div>                
                <h3 class="popover-title">ueditor</h3>                
                <div class="popover-content">
                    <span class="text-muted">目前还没有关于这个标签的解释</span>
                </div>
                <div class="popover-footer">
                    <a href="/t/ueditor">查看</a>
                    <span class="text-muted">·</span>
                    <a href="/t/ueditor/edit">编辑</a>
                    <div class="pull-right">
                        <span class="text-muted followers">0 人</span>
                        <button class="btn btn-default btn-xs tagfollow " data-id="1040000000154694">加关注</button>
                    </div>
                </div>
            </div>
        </li>
        <li class="tagPopup"><a aria-describedby="popover779384" class="tag" href="/t/%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/blogs" data-toggle="popover" data-img="" data-placement="top" data-original-title="图片上传" data-id="1040000000605444">图片上传</a><div style="top: 6401.5px; left: 19px; display: none;" id="popover779384" class="popover tag-popup tag-popup-1040000000605444 fade top in">                <div class="arrow"></div>                <h3 class="popover-title">图片上传</h3>                <div class="popover-content"><span class="text-muted">目前还没有关于这个标签的解释</span></div>                <div class="popover-footer">                    <a href="/t/%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0">查看</a>                    <span class="text-muted">·</span>                    <a href="/t/%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/edit">编辑</a>                    <div class="pull-right">                        <span class="text-muted followers">0 人</span>                        <button class="btn btn-default btn-xs tagfollow " data-id="1040000000605444">加关注</button></div>                </div>            </div></li>
    </ul>

    <ul class="pull-right article-operation list-inline">
        <li><a href="#911" data-toggle="modal" data-target="#911" data-type="article" data-id="1190000002429055" data-typetext="文章">举报</a></li>
    </ul>
</div>

<div class="text-center">
    <button type="button" id="mainLike" data-id="1190000002429055" class="btn btn-success mr10">2 推荐</button>
    <button type="button" id="mainBookmark" data-type="article" data-id="1190000002429055" class="btn btn-default ">收藏</button>
</div>

<ul class="list-unstyled text-muted mt30">
    <li>上一篇:<a href="/blog/digwtx/1190000002413863">Flask子域名及通配符子域</a></li>
    <li class="mt5">下一篇:<a href="/blog/digwtx/1190000002436865">Flask 项目集成富文本编辑器 CKeditor</a></li>
</ul>

<h2 class="h4 post-title">讨论区</h2>
<ul class="widget-comments" id="comment-1190000002429055" data-id="1190000002429055">
    <li class="widget-comments__item hover-show " id="1050000002571469">
        <div class="votes widget-vote">
            <button class="like " data-id="1050000002571469" type="button" data-do="like" data-type="comment"></button>
            <span class="count">&nbsp;</span>
        </div>
        <div class="comment-content wordbreak">
            <div class="content fmt">
                <p>大大,请问如何才能在 flask-admin 的后台里面使用富文本编辑器呢?</p>
            </div>
            <textarea name="text" rows="3" id="commentText-1050000002571469" class="editTextarea form-control hidden">大大,请问如何才能在flask-admin的后台里面使用富文本编辑器呢?</textarea>
            <p class="comment-meta mt10">
                <a href="/c/1050000002571469" class="text-muted">#1</a>&nbsp;
                <a href="/u/nogamenolife" class="commentUser" data-userid="1030000000794102" data-username="NoGameNoLife" data-userslug="nogamenolife" data-useravatar="http://sfault-avatar.b0.upaiyun.com/403/316/4033163998-54c24c6a55001_medium40"><strong>NoGameNoLife</strong></a>
                <span class="createdDate">4天前</span>
                <a href="#" class="commentReply" data-userid="1030000000794102" data-id="1050000002571469" data-username="NoGameNoLife">回复</a>
                <span class="pull-right commentTools hover-show-obj">
                    <a href="#911" class="ml10" data-toggle="modal" data-target="#911" data-type="comment" data-id="1050000002571469" data-typetext="评论" data-placement="top" title="举报">举报</a>
                </span>
            </p>
        </div>
    </li>
    <li class="widget-comments__item hover-show " id="1050000002573584">
        <div class="votes widget-vote">
            <button class="like " data-id="1050000002573584" type="button" data-do="like" data-type="comment"></button>
            <span class="count">&nbsp;</span>
        </div>
        <div class="comment-content wordbreak">
            <span>回复 <a href="/u/nogamenolife">NoGameNoLife</a></span>
            <div class="content fmt">
                <p>可以参考这个例子 <a target="_blank" rel="nofollow" href="https://github.com/mrjoes/flask-admin/tree/master/examples/wysiwyg">https://github.com/mrjoes/flask-admin/tree/master/examples/wysiwyg</a></p>
            </div>
            <textarea name="text" rows="3" id="commentText-1050000002573584" class="editTextarea form-control hidden">可以参考这个例子 https://github.com/mrjoes/flask-admin/tree/master/examples/wysiwyg</textarea>
            <p class="comment-meta mt10">
                <a href="/c/1050000002573584" class="text-muted">#2</a>&nbsp;
                <a href="/u/digwtx" class="commentUser" data-userid="1030000000208407" data-username="digwtx" data-userslug="digwtx" data-useravatar="http://sfault-avatar.b0.upaiyun.com/204/068/2040684262-54af359a0ccbe_medium40"><strong>digwtx</strong></a>
                · 
                <span class="createdDate">2天前</span>
                · 
                <a href="#" class="commentReply" data-userid="1030000000208407" data-id="1050000002573584" data-username="digwtx">回复</a>
                <span class="pull-right commentTools hover-show-obj">
                    <a href="#911" class="ml10" data-toggle="modal" data-target="#911" data-type="comment" data-id="1050000002573584" data-typetext="评论" data-placement="top" title="举报">举报</a>
                </span>
            </p>
        </div>
    </li>
    <li class="widget-comments__item hover-show " id="1050000002578829">
        <div class="votes widget-vote">
            <button class="like " data-id="1050000002578829" type="button" data-do="like" data-type="comment"></button>
            <span class="count">&nbsp;</span>
        </div>
        <div class="comment-content wordbreak">
            <span>回复 <a href="/u/digwtx">digwtx</a></span>
            <div class="content fmt"><p>好的,谢谢</p></div>
            <textarea name="text" rows="3" id="commentText-1050000002578829" class="editTextarea form-control hidden">好的,谢谢</textarea>
            <p class="comment-meta mt10">
                <a href="/c/1050000002578829" class="text-muted">#3</a>&nbsp;
                <a href="/u/nogamenolife" class="commentUser" data-userid="1030000000794102" data-username="NoGameNoLife" data-userslug="nogamenolife" data-useravatar="http://sfault-avatar.b0.upaiyun.com/403/316/4033163998-54c24c6a55001_medium40"><strong>NoGameNoLife</strong></a>
                · 
                <span class="createdDate">1天前</span>
                · 
                <a href="#" class="commentReply" data-userid="1030000000794102" data-id="1050000002578829" data-username="NoGameNoLife">回复</a>
                <span class="pull-right commentTools hover-show-obj">
                    <a href="#911" class="ml10" data-toggle="modal" data-target="#911" data-type="comment" data-id="1050000002578829" data-typetext="评论" data-placement="top" title="举报">举报</a>
                </span>
            </p>
        </div>
    </li>
    <li class="widget-comments__form row">
        <div class="col-md-12">请先 <a class="commentLogin" href="javascript:void(0);">登录</a> 后评论</div>
    </li><!-- /.widget-comments__form -->
</ul>
</body>
</html>

 

posted @ 2015-03-01 23:15  carlo-z  阅读(301)  评论(0编辑  收藏  举报