第二个meteor学习项目——(css和main.html)

一、搞定 CSS

CSS 文件将被 Meteor 自动加载并简化。因此,不同于其它的静态文件都被放置于/public 文件夹,请将 CSS
文件放入/client 文件夹。请创建一个client/stylesheets/ 文件夹并将以下style.css 文件放置入内。

.grid-block, .main, .post, .comments li, .comment-form {
background: #fff;
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
body {
background: #eee;
color: #666666; }
#main {
position: relative;
}
.page {
position: absolute;
top: 0px;
width: 100%;
}
.navbar {
margin-bottom: 10px; }
/* line 32, ../sass/style.scss */
.navbar .navbar-inner {
border-radius: 0px 0px 3px 3px; }
#spinner {
height: 300px; }
.post {
/* For modern browsers */
/* For IE 6/7 (trigger hasLayout) */
*zoom: 1;
position: relative;
opacity: 1; }
.post:before, .post:after {
content: "";
display: table; }
.post:after {
clear: both; }
.post.invisible {
opacity: 0; }
.post.instant {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none; }
.post.animate{
-webkit-transition: all 300ms 0ms;
-moz-transition: all 300ms 0ms ease-in;
-o-transition: all 300ms 0ms ease-in;
transition: all 300ms 0ms ease-in; }
.post .upvote {
display: block;
margin: 7px 12px 0 0;
float: left; }
.post .post-content {
float: left; }
.post .post-content h3 {
margin: 0;
line-height: 1.4;
font-size: 18px; }
.post .post-content h3 a {
display: inline-block;
margin-right: 5px; }
.post .post-content h3 span {
font-weight: normal;
font-size: 14px;
display: inline-block;
color: #aaaaaa; }
.post .post-content p {
margin: 0; }
.post .discuss {
display: block;
float: right;
margin-top: 7px; }
.comments {
list-style-type: none;
margin: 0; }
.comments li h4 {
font-size: 16px;
margin: 0; }
.comments li h4 .date {
font-size: 12px;
font-weight: normal; }
.comments li h4 a {
font-size: 12px; }
.comments li p:last-child {
margin-bottom: 0; }
.dropdown-menu span {
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #bbb;
white-space: nowrap; }
.load-more {
display: block;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
text-align: center;
height: 60px;
line-height: 60px;
margin-bottom: 10px; }
.load-more:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.1); }
.posts .spinner-container{
position: relative;
height: 100px;
}
.jumbotron{
text-align: center;
}
.jumbotron h2{
font-size: 60px;
font-weight: 100;
}
@-webkit-keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
.errors{
position: fixed;
z-index: 10000;
padding: 10px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;
}
.alert {
animation: fadeOut 2700ms ease-in 0s 1 forwards;
-webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
-moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
width: 250px;
float: right;
clear: both;
margin-bottom: 5px;
pointer-events: auto;
}

二、修改client文件夹下面的main.html

 1 <head>
 2 <title>Microscope</title>
 3 </head>
 4 <body>
 5 <div class="container">
 6 <header class="navbar navbar-default" role="navigation">
 7 <div class="navbar-header">
 8 <a class="navbar-brand" href="/">Microscope</a>
 9 </div>
10 </header>
11 <div id="main">
12 {{> postsList}}
13 </div>
14 </div>
15 </body>

就先这么多吧,下一节做模板文件

时间: 2024-11-05 22:28:50

第二个meteor学习项目——(css和main.html)的相关文章

第二章 开始学习C++

第二章  开始学习C++ 2.1  main函数 简单代码如下: #include <iostream> int main() { //This is my first program using namespace std; cout << "Hello C++!" << endl; return 0; } C++中所有的语句都以分号(;)结束.return 0;叫做返回语句. 2.1.1  作为接口的函数头 函数头描述了函数与调用它的函数的接口.

WPF学习- 新建项目后自定义Main()[Type &#39;App&#39; already defines a member called &#39;Main&#39; with the same parameter types]

问题点: 在App.xaml.cs中自己添加Main方法,编译会出现如下报错: 错误 CS0111 类型“App”已定义了一个名为“Main”的具有相同参数类型的成员  错误 Type 'App' already defines a member called 'Main' with the same parameter types  错误 CS0017 程序定义了多个入口点.使用 /main (指定包含入口点的类型)进行编译.  原因: 默认方式新建WPF项目时,编译时会自动生成Main方法(

(转).net开发者对android第二周的学习体会

这一周相对没有春节时这么闲了,白天也比较多的工作要做,每天晚上又要被我三岁的女儿折腾到十点, 实在没有多少时间学习.在前一周的基础上,这周我试着自己练习写了一个个人管理的android的程序,主要实现万年历,日程,随手便贴,短信群发等一些功能.下面总结一下自己在其过程中的一些心得和体会,都是一些没技术含量的活,我只写下自己的思路,不贴具体的代码了.苦于周围没有人可交流,大部分功能都是自己闭门造车或参考网上的资料实现,也不知道是否合理,望高手能加以指正. 1.   页面布局技巧 页面布局是andr

GitHub 上 57 款最流行的开源深度学习项目

转载:https://www.oschina.net/news/79500/57-most-popular-deep-learning-project-at-github 本文整理了 GitHub 上最流行的 57 款深度学习项目(按 stars 排名).最后更新:2016.08.09 1.TensorFlow 使用数据流图计算可扩展机器学习问题 TensorFlow 是谷歌的第二代机器学习系统,按照谷歌所说,在某些基准测试中,TensorFlow 的表现比第一代的 DistBelief 快了2

《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 &mdash; 第二节:MVC5项目结构

第一境 ASP.Net MVC5项目初探 第一节:运行第一个MVC5项目 第二节:MVC5项目结构 第三节:View层简单改造 第四节:打造首页面 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explorer]项来打开解决方案资源管理器.这是一个树形结构的视图,根节点是解决方案,解决方案节点下,就是一个一个的项目了,目前,我们的解决方案里只有一个项目(HonorShop.Web). 接下来,展开(Hon

20175325 第二周结对编程项目 四则运算

20175325 第二周结对编程项目 四则运算 一.需求分析: 实现一个命令行程序,要求: 自动生成小学四则运算题目(加.减.乘.除) 支持整数 支持多运算符(比如生成包含100个运算符的题目) 支持真分数 统计正确率 题目去重 能多次生成四则运算题目 能根据用户输入的数字生成四则运算的题目数量 多语言支持: 简体中文, 繁體中文, English 文件: 处理生成题目并输出到文件 完成题目后从文件读入并判题 用户能够选择是否开始答题 二. 设计思路: 产生随机数并且考虑符号的优先级. 能实现整

深度学习优质学习项目大放送!-AI Studio精选开源项目合集推荐

近期 在AI Studio上发现了不少优质的开源深度学习项目,从深度学习入门到进阶,涵盖了CV.NLP.生成对抗网络.强化学习多个研究方向,还有最新的动态图,都以NoteBook的方式直接开源出来,并且AI Studio还提供了免费算力,可直接在线运行跑训练任务,推荐深度学习开发者和学习者收藏和研究. 算力获取链接:https://aistudio.baidu.com/aistudio/questionnaire?activityid=667 A. 深度学习新手入门合集 本集合分为四小节,从零介

LostRoutes项目日志——在main.js中添加多分辨率适配

初始的Cocos2d-JS项目中的main.js代码的内容为: /** * A brief explanation for "project.json": * Here is the content of project.json file, this is the global configuration for your game, you can modify it to customize some behavior. * The detail of each field is

NET开发学习项目资源

最近在整理资料时发现自己当初学习NET的一些项目资源,一直放在硬盘里不如拿来分享给初学者学习还是不错的. 项目代码为<精通ASP.NET20+SQL Server2005项目开发>书中源码,请不要原封不动的下载后用于商业用途. 点击标题链接即可下载. 目录: 1.电子通讯录系统 功能包括用户注册.用户登录.修改密码.添加好友.添加好友联系方式.修改好友联系方式.删除好友联系方式等. 2.网上选课系统 通过该系统,学校不同角色的用户可以通过网路完成选课系统功能:管理员通过该系统实现对学生.教师.