jude使用入门

学nodejs时，看到项目里面的jade。于是去看了看，写了个小例子。

就直接上代码吧。

首先是布局的layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block navigation
    block content
    block footer

然后是index.jade

extends layout

block navigation
    div.navigation
        ul
            - var arr =[{name:'首页',value:'www.abc.com'},{name:'新闻',value:'news.abc.com'},{name:'体育',value:'sports.abc.com'},{name:'娱乐',value:'entertainment.abc.com'}]
            - for(var i=0;i

最后是样式

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before,q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
body {
    background: #1e1e1e;
}
.navigation {
    width:960px;
    margin:0 auto;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(30,88,155,1) 20%, rgba(41,135,214,1) 50%, rgba(30,88,154,1) 80%, rgba(32,84,204,1) 100%, rgba(45,149,229,1) 100%, rgba(30,87,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(20%,rgba(30,88,155,1)), color-stop(50%,rgba(41,135,214,1)), color-stop(80%,rgba(30,88,154,1)), color-stop(100%,rgba(32,84,204,1)), color-stop(100%,rgba(45,149,229,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,88,155,1) 20%,rgba(41,135,214,1) 50%,rgba(30,88,154,1) 80%,rgba(32,84,204,1) 100%,rgba(45,149,229,1) 100%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,88,155,1) 20%,rgba(41,135,214,1) 50%,rgba(30,88,154,1) 80%,rgba(32,84,204,1) 100%,rgba(45,149,229,1) 100%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,88,155,1) 20%,rgba(41,135,214,1) 50%,rgba(30,88,154,1) 80%,rgba(32,84,204,1) 100%,rgba(45,149,229,1) 100%,rgba(30,87,153,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(30,88,155,1) 20%,rgba(41,135,214,1) 50%,rgba(30,88,154,1) 80%,rgba(32,84,204,1) 100%,rgba(45,149,229,1) 100%,rgba(30,87,153,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 );
    border-radius:50px;
    padding:0 15px;
}
.navigation li {
   display: inline-block;
    padding:5px 30px;
}
.navigation a {
    color: #fff;
    font-size: 32px;
}
a {
  color: #00B7FF;
    text-decoration: none;
}


.content {
    margin:0 auto;
    width: 960px;
    background:#2e2e2e;
}
#first {
    background: #22B71F;
    border-radius: 30px;
}
#footer-wraper {
    height: 40px;
    background: #3e3e3e;
}
.container {
    margin:0 auto;
    width: 960px;
}
.container p{
    position: relative;
    bottom: -10px;
}