文档章节

pure.css 模板

被玩坏的熊孩子
 被玩坏的熊孩子
发布于 2016/09/01 13:57
字数 744
阅读 56
收藏 0

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>博客</title>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
         <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
    </head>

    <body>
        <div class="layout pure-g" >
                <div class="aside pure-u-1 pure-u-md-1-4">
                    <div class="header">
                        <h1>A SAMPLE BLOG</h1>
                        <h2>Creating a blog layout using Pure</h2>
                        <nav class="nav">
                            <ul class="nav-list">
                                <li><button class="pure-button ">PURE</button></li>
                                <li><button class="pure-button ">YUI LIBRARY</button></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="content pure-u-1 pure-u-md-3-4">
                    <div class="posts">
                        <h1 class="content-subhead">PINNED POST</h1>
                        <section class="post">
                            <h2 class="post-title">Introducing Pure</h2>
                            <img class="avatar" src="img/tilo-avatar.png"/>
                            <p class="post-meta">
                                By
                                <a href="#" class="post-author">Tilo Mitra </a>
                                under
                                <a href="#"class="post-meta-css">CSS</a>
                                <a href="#" class="post-meta-pure">Pure</a>
                            </p>
                            <p class="post-description">Yesterday at CSSConf, we launched Pure – a new CSS library. Phew! Here are the slides from the presentation. 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>
                        </section>
                        </div>
                    <div class="posts">
                        <h1 class="content-subhead">RECENT POSTS</h1>
                        <section class="post">
                            <h2 class="post-title">Everything You Need to Know About Grunt</h2>
                            <img class="avatar" src="img/ericf-avatar.png"/>
                            <p class="post-meta">
                                By
                                <a href="#" class="post-author">Eric Ferraiuolo  </a>
                                under
                                <a href="#"class="post-meta-javascript">JavaScript</a>
                            </p>
                            <p class="post-description">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>
                            
                        </section>    
                    </div>
                    <div class="posts post-img">
                        <h2 class="post-title">Photos from CSSConf and JSConf</h2>
                        <img class="avatar"  src="img/reid-avatar.png"/>
                            <p class="post-meta">
                                By
                                <a href="#" class="post-author"> Reid Burke  </a>
                                under
                                <a href="#"class="post-meta-uncategorized">Uncategorized</a>
                            </p>
                            <div class="pure-g ">
                                <div class="pure-u-1-2">
                                <img class="pure-img" src="img/img-1.jpg"/>
                                </div>
                                <div class="pure-u-1-2">
                                <img class="pure-img" src="img/img-2.jpg"/>
                                </div>
                            </div>
                            
                    </div>
                    <div class="posts">
                        <h2 class="post-title">YUI 3.10.2 Released</h2>
                        <img class="avatar" src="img/andrew-avatar.png"/>
                            <p class="post-meta">
                                By
                                <a href="#" class="post-author">Andrew Wooldridge </a>
                                under
                                <a href="#"class="post-meta-yui">YUI</a>
                            </p>
                            <p class="post-description"> 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>
                    <div class="footer">
                        <a href="#">About</a>
                        <a href="#">Twitter</a>
                        <a href="#">GitHub</a>
                    </div>    
                </div>
        </div>
    </body>

</html>

 

 

@charset "utf-8";
.layout{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}
.layout .aside{
    background:#3D4F5D ;
    color: white;
}
.layout .aside .header{
    text-align: center;
    top: auto;
}
.layout .header h2{
    color: #B0CADB;
    font-weight: normal;
}
.header .nav .nav-list li{
    display: inline-block;
    border: 2px solid #B0CADB;
    margin-right: 4px;
}
.header .nav .nav-list li .pure-button{
    color: white;
    background: #3D4F5D;
    font-size: 14px;
}
.layout .content .posts .content-subhead{
    font-size: 80%;
    font-weight: 500;
    border-bottom: 1px solid  #eeeeee;
    color: #aaa;
    line-height: 25px;
}
.posts .post-title{
    float: left;
    width: 50%;
    font-size: 32px;
    color: #222;
    margin-bottom: 2px;
}
.posts .post-meta{
    clear: both;
    color: #999;
    font-size: 90%;
    margin-bottom: 15px;
    
}
.posts .post-meta .post-author{
    color: rgb(61, 146, 201);
    text-decoration: none;
}
.posts .post .post-meta .post-meta-pure{
    color: white;
    background: #4d85d1;
    text-decoration: none;
    padding: 1px 7px;
}
.posts .post .post-meta .post-meta-css{
    color: white;
    background: #5aba59;
    margin: 2px;
    text-decoration: none;
    padding: 1px 7px;
}
.posts .post .post-description{
    line-height: 30px;
}
.content {
    padding: 2em 1em 0;
    box-sizing:border-box;
}
.posts .post .post-meta .post-meta-javascript{
    color: white;
    background: #DF2D4F;
    margin: 2px;
    text-decoration: none;
    padding: 1px 7px;
}
.posts .post-meta .post-meta-uncategorized{
    color: white;
    background: #999999;
    margin: 2px;
    text-decoration: none;
    padding: 1px 7px;
}
.posts .post-meta .post-meta-yui{
    color: white;
    background: #8156A7;
    margin: 2px;
    text-decoration: none;
    padding: 1px 7px;
}
.layout .content .post-img{
    margin: 60px 0px 40px ;
}
.footer{
    margin-top: 100px;
    text-align: center;}
    
.footer a{
    color:#ccc;
    text-decoration: none;
    line-height: 70px;
    margin-right: 30px;
}
.posts .avatar{
    float: right;
    border-radius: 50px;
    width: 50px;
    margin-top: 15px;
}
@media (min-width: 48em) {
    .content {
        padding: 2em 3em 0;
        margin-left: 25%;
    }

    .header {
        margin: 80% 2em 0;
        text-align: right;
    }

    .aside {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

 

© 著作权归作者所有

被玩坏的熊孩子
粉丝 0
博文 1
码字总数 744
作品 0
合肥
程序员
私信 提问
onice/Jira Tool Box

Jira Tool Box (JTB) info Jira Tool Box(short just JTB) is designed to speed up your workflow. It's simple to use! You can easily direct to a JIRA ticket just by enter the ID. Yo......

onice
2017/09/14
0
0
轻量灵活的CSS框架--mobi.css

Mobi.css是一个专用于手机的轻量灵活的CSS框架。 介绍 1. 压缩后只有3.6kb,低于Skeleton, Pure.css , Bootstrap v4等。 2. 大量使用 flexbox,非常灵活,主页自定义样式少于10行。 3. 专用...

匿名
2016/09/07
6.2K
2
2015年最全的移动WEB前端UI框架

目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。下面在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下...

mdoo
2016/09/13
252
0
github上值得关注的前端项目

综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单。 front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。 Front-end-Interview-questions 史...

施长成
2016/08/16
164
0
前端工程师必须收藏的 CSS 资源大全

我想很多程序员应该记得 GitHub 上有一个 Awesome:XXX 系列的资源整理。awesome-css 是 sotayamashita 发起维护的 CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名...

你好明天ll
2017/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊rocketmq的AccessChannel

序 本文主要研究一下rocketmq的AccessChannel AccessChannel rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/AccessChannel.java public enum AccessChannel { /** ......

go4it
昨天
4
0
自己实现 aop 和 spring aop

上文 说到,我们可以在 BeanPostProcessor 中对 bean 的初始化前化做手脚,当时也说了,我完全可以生成一个代理类丢回去。 代理类肯定要为用户做一些事情,不可能像学设计模式的时候创建个代...

sanri1993
昨天
4
0
Java 8 Stream Api 中的 skip 和 limit 操作

1. 前言 Java 8 Stream API 中的skip()和limit()方法具有类似的作用。它们都是对流进行裁剪的中间方法。今天我们来探讨一下这两个方法。 2. skip() skip(lang n) 是一个跳过前 n 个元素的...

码农小胖哥
昨天
8
0
看中华小当家第二集片段记录

最近正好在学习做饭,看看这片子,燃烧燃烧做饭的热情 哈哈,以下是摘的一些句子和个人理解 My name is Liu Mao Xing . More commonly known as Mao. 个人理解:我的名字叫 刘昴星, (commo...

T型人才追梦者
昨天
3
0
Python基础-6

1、注释 # 单行注释'''多行注释'''"""多行注释"""# 中文编码声明注释 ,在文件开头加上下面这行注释# encoding=utf-8或者# -*- encoding:utf-8 -*- (-*- 只是为了美观,没有实际......

zfskkk
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部