slim vs html

时间：2015-01-19 18:56:52 阅读：662 评论：0 收藏：0 [点我收藏+]

标签：

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;
}

slim vs html

标签：

原文地址：http://www.cnblogs.com/zz-pin/p/4234319.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行