导航栏：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"> </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> <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"> </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> <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"> </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> <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>