BootStrap实战四之网站内容添加(上)
2016-11-13 17:19
357 查看
网站内容代码:
对应的 app.css 文件内容:
<section class="content-wrap"> <div class="container"> <div class="row"> <main class="col-md-8 main-content"> <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shuo"> <div class="post-head"> <h1 class="post-title"> <a href="#">Node.js v4 LTS 成为 Ghost 推荐版本</a> </h1> <div class="post-meta"> <span class="author"> 作者 <a href="#">王赛</a> </span> • <time class="date" datetime="2015-10-10">2015年10月10日</time> </div> </div> <div class="post-content"> <p> 从这周起,我们将 Ghost 推荐 Node.js 版本升级为 Node.js v4 LTS。 我们这样做其实已经落后于计划了。然而,经过大量测试之后,我们确信 Ghost 可以在 Node.js v4 平台上流畅的运行并且内存消耗比原来也减少了。目前,Ghost(Pro) 上托 </p> </div> <div class="post-permalink"> <a href="#" class="btn btn-default">阅读全文</a> </div> <div class="footer clearfix"> <hr> <div class="pull-left tag-list"> <a href="#">Ghost</a> <a href="#">深度玩转</a> <a href="#">助手函数</a> </div> </div> </main> </div> </div> </section>
对应的 app.css 文件内容:
/*网站内容(上)*/ .post{ padding: 35px; background:#ffffff; margin-bottom: 35px; position: relative; overflow: hidden; } .post .post-head{ text-align: center; } .post .post-head .post-title{ margin: 0; font-size: 2.5em; line-height: 1em; } .post .post-head .post-title a{ color: #303030; } .post .post-head .post-meta{ color:#959595; margin: 14px 0 0px; } .post-content{ font:400 18px/1.62 "Glyphicons Halflings"; color:#444443; } .post-content p{ margin-top: 0; margin-bottom: 1.46em; } .btn-default{ border:1px solid #e67e22; background: #e67e22; color: #ffffff; transition: all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out;; } .btn{ padding: 7px 14px; border-radius: 2px; } .post .post-footer{ margin-top: 30px; border-top:1px solid #ebebeb; padding-height:21px 0 0; } .post .post-footer .tag-list{ color: #959595; line-height: 28px; }
相关文章推荐
- BootStrap实战四之网站内容添加(下)
- BootStrap实战二之网站 Logo 添加
- 25种方式给网站添加优质内容
- 25种方式给网站添加优质内容
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
- Bootstrap历练实例:向列表组添加内容
- krpano全球漫游相同的声音和声音添加的场景(文章内容已移至krpano中国网站)
- 给网站添加优质内容的25种方式
- Bootstrap项目实战之子栏目资讯内容
- bootstrap设计网站中添加代码高亮插件
- bootstrap设计网站中添加代码高亮插件
- Bootstrap项目实战之首页内容介绍(全)
- WSS3SDK之:如何添加内容类型到网站
- 复制网站文章内容时自动添加版权信息的JS代码
- 25种方式给网站添加优质内容
- 5cms使用sql语句给网站添加内容
- 25种方式给网站添加优质内容
- 网站添加优质内容的25种绝招
- 关于网站数据挖掘的方向或者实战内容有哪些好的网站、博客或者书籍等资料? - 知乎
- 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息