{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts.">
<title>Blog – Layout Examples – Pure</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div id="layout" class="pure-g">
<div class="sidebar pure-u-1 pure-u-md-1-4">
<div class="header">
<h1 class="brand-title">A Sample Blog</h1>
<h2 class="brand-tagline">Creating a blog layout using Pure</h2>
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a class="pure-button" href="http://purecss.io">Pure</a>
</li>
<li class="nav-item">
<a class="pure-button" href="http://yuilibrary.com">YUI Library</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="content pure-u-1 pure-u-md-3-4">
<div>
<!-- A wrapper for all the blog posts -->
<div class="posts">
<h1 class="content-subhead">Pinned Post</h1>
<!-- A single blog post -->
<section class="post">
<header class="post-header">
<img class="post-avatar" alt="Tilo Mitra's avatar" height="48" width="48" src="{% static "img/tilo-avatar.png" %}">
<h2 class="post-title">Introducing Pure</h2>
<p class="post-meta">
By <a href="#" class="post-author">Tilo Mitra</a> under <a class="post-category post-category-design" href="#">CSS</a> <a class="post-category post-category-pure" href="#">Pure</a>
</p>
</header>
<div class="post-description">
<p>
Yesterday at CSSConf, we launched Pure – a new CSS library. Phew! Here are the <a href="https://speakerdeck.com/tilomitra/pure-bliss">slides from the presentation</a>. Although it looks pretty minimalist, we’ve been working on Pure for several months. After many iterations, we have released Pure as a set of small, responsive, CSS modules that you can use in every web project.
</p>
</div>
</section>
</div>
<div class="posts">
<h1 class="content-subhead">Recent Posts</h1>
<section class="post">
<header class="post-header">
<img class="post-avatar" alt="Eric Ferraiuolo's avatar" height="48" width="48" src="{% static 'img/ericf-avatar.png' %}">
<h2 class="post-title">Everything You Need to Know About Grunt</h2>
<p class="post-meta">
By <a class="post-author" href="#">Eric Ferraiuolo</a> under <a class="post-category post-category-js" href="#">JavaScript</a>
</p>
</header>
<div class="post-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</section>
<section class="post">
<header class="post-header">
<img class="post-avatar" alt="Reid Burke's avatar" height="48" width="48" src="{% static 'img/reid-avatar.png' %}">
<h2 class="post-title">Photos from CSSConf and JSConf</h2>
<p class="post-meta">
By <a class="post-author" href="#">Reid Burke</a> under <a class="post-category" href="#">Uncategorized</a>
</p>
</header>
<div class="post-description">
<div class="post-images pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<a href="http://www.flickr.com/photos/uberlife/8915936174/">
<img alt="Photo of someone working poolside at a resort"
class="pure-img-responsive"
src="http://farm8.staticflickr.com/7448/8915936174_8d54ec76c6.jpg">
</a>
<div class="post-image-meta">
<h3>CSSConf Photos</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2">
<a href="http://www.flickr.com/photos/uberlife/8907351301/">
<img alt="Photo of the sunset on the beach"
class="pure-img-responsive"
src="http://farm8.staticflickr.com/7382/8907351301_bd7460cffb.jpg">
</a>
<div class="post-image-meta">
<h3>JSConf Photos</h3>
</div>
</div>
</div>
</div>
</section>
<section class="post">
<header class="post-header">
<img class="post-avatar" alt="Andrew Wooldridge's avatar" height="48" width="48" src="{% static 'img/andrew-avatar.png' %}">
<h2 class="post-title">YUI 3.10.2 Released</h2>
<p class="post-meta">
By <a class="post-author" href="#">Andrew Wooldridge</a> under <a class="post-category post-category-yui" href="#">YUI</a>
</p>
</header>
<div class="post-description">
<p>
We are happy to announce the release of YUI 3.10.2! You can find it now on the Yahoo! CDN, download it directly, or pull it in via npm. We’ve also updated the YUI Library website with the latest documentation.
</p>
</div>
</section>
</div>
<div class="footer">
<div class="pure-menu pure-menu-horizontal">
<ul>
<li class="pure-menu-item"><a href="http://purecss.io/" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="http://twitter.com/yuilibrary/" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="http://github.com/yahoo/pure/" class="pure-menu-link">GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4-2
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 优点：简单 缺点：不兼容IE6 优点：兼容性好 缺点：结构多一点 优点：样式简单 缺点：不兼容IE6 同样适用于不...
- Guideline 4.2.2 - Design - Minimum Functionality We notic...
