slim vs html

浏览数：19 / 时间：2015年06月09日

body
  p
    |
      This is a test of the text block.

<body><p>This is a test of the text block.</p></body>

body
  p
    | This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
           And so on...
混合使用

<html>
  head
    title Example
  <body>
    - if articles.empty?
    - else
      table
        - articles.each do |a|
          <tr><td>#{a.name}</td><td>#{a.description}</td></tr>
  </body>
</html>

body
  p
    / This line won‘t get displayed.
      Neither does this line.
    /! This will get displayed as html comments.

<body><p><!--This will get displayed as html comments.--></p></body>

/[if IE]
    p Get a better browser.

<!--[if IE]><p>Get a better browser.</p><![endif]-->

img src="image.png"/

a> href=‘url1‘ Link1
a> href=‘url2‘ Link2

a< href=‘url1‘ Link1
a< href=‘url2‘ Link2

a<> href=‘url1‘ Link1

ul
  li.first: a href="/a" A link
  li: a href="/b" B link

ul
  li.first: a[href="/a"] A link
  li: a[href="/b"] B link

body
  h1 id="headline" Welcome to my site.

body
  h1 id="headline"
    | Welcome to my site.

<!DOCTYPE html>
html lang="zh-cn"
head
meta charset="utf-8"
link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
link rel="stylesheet" href="manage/office/categories.css"

body
.daily-top
form
label for="id" ID
input id="id" type="text" name="id"
label for="name"姓名
input id="name" type="text" name="name"
|部门
select name="department"
option value="web"web
option value="a"a
option value="b"b
option value="eb"w
|排序
select name="sequence"
option value="web"web
option value="a"a
option value="b"b
option value="eb"w
|每页
select name="page"
option value="web"web
option value="a"a
option value="b"b
option value="eb"w
|页数
input id="name" type="text" name="page"
input type="button" value="搜索" id="daily-search"
.daily-content
table
tr
td colspan="2" class="table-top"
i class="fa fa-table fa-1x"日报列表
input type="button" value="新增"
td
td
td
td
td
td
td
td
td
td
td
td class="table-top-right"
i class="fa fa-square-o fa-1x"
i class="fa fa-minus fa-1x"
td class="table-top-right"
i class="fa fa-expand fa-1x"
i class="fa fa-close fa-1x"
tr
td class="table-user"
i class="fa fa-user fa-1x"ID
td class="table-user"
i class="fa fa-user fa-1x"姓名
td class="table-user" colspan="4"
i class="fa fa-user fa-1x"公司
td class="table-user"
i class="fa fa-user fa-1x"部门
td class="table-user" colspan="2"
i class="fa fa-user fa-1x " 创建时间
td class="table-user" colspan="2"
i class="fa fa-user fa-1x "更新时间
td class="table-user" colspan="4"
i class="fa fa-user fa-1x "操作
tr
td class="table-user"140
td 周
td colspan="4" 千帆渡
td ui
td colspan="2" 2014
td colspan="2" 2014
td class="table-operate" colspan="4"
input type="button" value="查看"
input type="button" value="编辑"
input type="button" value="删除"
input type="button" value="下载"
tr
td
td
td colspan="4" 3
td
td colspan="2" 8
td colspan="2" 10
td colspan="4" 13
tr
td
td
td colspan="4" 3
td
td colspan="2" 8
td colspan="2" 10
td colspan="4" 13
tr
td
td
td colspan="4" 3
td
td colspan="2" 8
td colspan="2" 10
td colspan="4" 13
tr
td
td
td colspan="4" 3
td
td colspan="2" 8
td colspan="2" 10
td colspan="4" 13

.daily-top{
min-height: 85px;
width: 100%;
font-size: 20px;
}
.daily-top form{
padding:30px;
padding-left: 0px;
min-height: 35px;
}
.daily-top input{
border: 1px solid gray;
width: 9%;
min-height: 30px;
margin-right: 20px;
}
.daily-top select{
width: 7%;
margin-left: 8px;
margin-right: 20px;
border: 1px solid rgb(163,163,163);
}
.daily-content{
width: 100%;
}
.daily-content table{
border: 1px solid #7c8c9f;
width: 100%;
/*min-height: 400px;*/
}
.daily-content table tr{
border: 1px solid #7c8c9f;
height: 40px;
}
.daily-content table td{
border: 1px solid #7c8c9f;
width: 6%;
height: 40px;

}
tr:nth-of-type(2n+1){
background-color: #ededed;
}
tr:nth-of-type(1){
background-color: #7c8c9f;
}
tr:nth-of-type(2){
background-color: #ededed;
}
.table-top{
padding-left: 5px;
margin: 0px;
font-size: 18px;
color: #ffffff;
}
.table-top input{
background-color: red;
float: right;
margin-right: 20px;
background-color: #f0a545;
color: #ffffff;
padding: 1px;
font-size: 16px;
border-radius: 3px;
}
#daily-search{
background-color: rgb(10,138,197);
width: 6%;
height: 30px;
border-radius: 5px;
color: #ffffff;
}
.table-top-left{
font-size: 18px;
color: #ffffff;

}
.table-top-right {
padding:0px;
}
.table-top-right i{
margin-right: 20px;
margin-left: 20px;
font-size: 18px;
}
.table-user{
padding-left: 30px;
font-size: 18px;
}
td{
padding-left: 30px;
font-size: 18px;
}
.table-operate input{
padding: 1px;
border: 1px solid gray;
margin-right: 20px;
border-radius: 3px;
background-color: #ffffff;
}