首页 > 代码库 > slim vs html
slim vs html
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="http://www.mamicode.com/image.png"/
a> href=http://www.mamicode.com/‘url1‘ Link1>a< href=http://www.mamicode.com/‘url1‘ Link1>a<> href=http://www.mamicode.com/‘url1‘ Link1ul li.first: a href="http://www.mamicode.com/a" A link li: a href="http://www.mamicode.com/b" B link
ul li.first: a[href="http://www.mamicode.com/a"] A link li: a[href="http://www.mamicode.com/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="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/web"web
option vhttp://www.mamicode.com/alue="a"a
option value="http://www.mamicode.com/b"b
option value="http://www.mamicode.com/eb"w
|排序
select name="sequence"
option value="http://www.mamicode.com/web"web
option vhttp://www.mamicode.com/alue="a"a
option value="http://www.mamicode.com/b"b
option value="http://www.mamicode.com/eb"w
|每页
select name="page"
option value="http://www.mamicode.com/web"web
option vhttp://www.mamicode.com/alue="a"a
option value="http://www.mamicode.com/b"b
option value="http://www.mamicode.com/eb"w
|页数
input id="name" type="text" name="page"
input type="button" value="http://www.mamicode.com/搜索" id="daily-search"
.daily-content
table
tr
td colspan="2" class="table-top"
i class="fa fa-table fa-1x"日报列表
input type="button" value="http://www.mamicode.com/新增"
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="http://www.mamicode.com/查看"
input type="button" value="http://www.mamicode.com/编辑"
input type="button" value="http://www.mamicode.com/删除"
input type="button" value="http://www.mamicode.com/下载"
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
<!-- <div class="daily-top">
<form>
<label for="id">ID </label><input id="id" type="text" name="id">
<label for="name">姓名 </label><input id="name" type="text" name="name">
部门 <select id="department" name="department">
<option value="http://www.mamicode.com/web">web</option>
<option value="http://www.mamicode.com/saab">Saab</option>
<option value="http://www.mamicode.com/fiat">Fiat</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</select>
排序<select name="sequence">
<option value="http://www.mamicode.com/ID">ID</option>
<option value="http://www.mamicode.com/saab">Saab</option>
<option value="http://www.mamicode.com/fiat">Fiat</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</select>
每页<select name="page">
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/saab">Saab</option>
<option value="http://www.mamicode.com/fiat">Fiat</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</select>
页数<input type="text" name="page">
<input type="button" value="http://www.mamicode.com/搜索" id="daily-search">
</form> -->
<!-- </div>
<div class="daily-content">
<table>
<tr>
<td colspan="2" class="table-top"><i class="fa fa-table fa-1x"></i>日报列表 <input type="button" value="http://www.mamicode.com/新增"></td><td></td><td ></td><td></td><td></td><td></td><td></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><i class="fa fa-minus fa-1x"></i></td><td class="table-top-right"><i class="fa fa-expand fa-1x"></i><i class="fa fa-close fa-1x"></i></td>
</tr>
<tr>
<td class="table-user"><i class="fa fa-user fa-1x"></i>ID</td><td class="table-user"><i class="fa fa-user fa-1x"></i>姓名</td><td class="table-user" colspan="4"><i class="fa fa-user fa-1x"></i>公司</td><td class="table-user"><i class="fa fa-user fa-1x"></i>部门</td><td class="table-user" colspan="2"><i class="fa fa-user fa-1x class="table-user"></i>创建时间</td><td class="table-user" colspan="2"><i class="fa fa-user fa-1x"></i>更新时间</td><td class="table-user" colspan="4"><i class="fa fa-user fa-1x"></i>操作</td>
</tr>
<tr>
<td class="table-user">140</td><td>周琴</td><td colspan="4">千帆渡</td><td>ui</td><td colspan="2">2015-1-16</td><td colspan="2">2015-1-16</td><td class="table-operate" colspan="4"><input type="button" value="http://www.mamicode.com/查看"><input type="button" value="http://www.mamicode.com/编辑"><input type="button" value="http://www.mamicode.com/删除"><input type="button" value="http://www.mamicode.com/下载"></td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
<tr>
<td>1</td><td>2</td><td colspan="4">3</td><td>7</td><td colspan="2">8</td><td colspan="2">10</td><td colspan="4">13</td>
</tr>
</table>
</div>
</body>
</html> -->
.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