Slim vs HTML

Last Update:2015-01-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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...
混合使用

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‘ Link1a> href=‘url2‘ Link2

a< href=‘url1‘ Link1a< 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" name
input id= "name" type= "text" name= "name"
| Department
Select Name= "department"
option value= "Web" Web
option Value= "a" a
option value= "B" b
option Value= "EB" W
| sort
Select Name= "Sequence"
option value= "Web" Web
option Value= "a" a
option value= "B" b
option Value= "EB" W
| per page
Select Name= "Page"
option value= "Web" Web
option Value= "a" a
option value= "B" b
option Value= "EB" W
| pages
input id= "name" type= "text" name= "page"
input type= "button" value= "Search" id= "Daily-search"
. Daily-content
Table
TR
TD colspan= "2" class= "Table-top"
i class= "fa fa-table fa-1x" daily list
input type= "button" value= "new"
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" name
TD class= "Table-user" colspan= "4"
i class= "FA fa-user fa-1x" Company
TD class= "Table-user"
i class= "FA fa-user fa-1x" division
TD class= "Table-user" colspan= "2"
i class= "fa fa-user fa-1x" creation time
TD class= "Table-user" colspan= "2"
i class= "fa fa-user fa-1x" Update Time
TD class= "Table-user" colspan= "4"
i class= "fa fa-user fa-1x" Operation
TR
TD class= "Table-user"
TD Week
TD colspan= "4" Thousand Sail Crossing
TD UI
TD colspan= "2"
TD colspan= "2"
TD class= "Table-operate" colspan= "4"
input type= "button" value= "View"
input type= "button" value= "edit"
input type= "button" value= "Delete"
input type= "button" value= "Download"
TR
TD
TD
TD colspan= "4" 3
TD
TD colspan= "2" 8
TD colspan= "2"
TD colspan= "4"
TR
TD
TD
TD colspan= "4" 3
TD
TD colspan= "2" 8
TD colspan= "2"
TD colspan= "4"
TR
TD
TD
TD colspan= "4" 3
TD
TD colspan= "2" 8
TD colspan= "2"
TD colspan= "4"
TR
TD
TD
TD colspan= "4" 3
TD
TD colspan= "2" 8
TD colspan= "2"
TD colspan= "4"

<!--<div class= "Daily-top" >
<form>
<label for= "id" >id </label><input id= "id" type= "text" name= "id" >
<label for= "name" > Name </label><input id= "name" type= "text" name= "name" >
Department <select id= "department" name= "department" >
<option value= "Web" >web</option>
<option value= "Saab" >Saab</option>
<option value= "Fiat" >Fiat</option>
<option value= "Audi" >Audi</option>
</select>
Sort <select name= "sequence" >
<option value= "ID" >ID</option>
<option value= "Saab" >Saab</option>
<option value= "Fiat" >Fiat</option>
<option value= "Audi" >Audi</option>
</select>
Per page <select name= "page" >
<option value= "1" >1</option>
<option value= "Saab" >Saab</option>
<option value= "Fiat" >Fiat</option>
<option value= "Audi" >Audi</option>
</select>
Pages <input type= "text" name= "page" >
<input type= "button" value= "Search" id= "Daily-search" >
</form>
<!--</div>
<div class= "Daily-content" >
<table>
<tr>
&LT;TD colspan= "2" class= "Table-top" ><i class= "fa fa-table fa-1x" ></i> daily list <input type= "button" Value= "New" ></td><td></td><td ></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td>< TD&GT;&LT;/TD&GT;&LT;TD&GT;&LT;/TD&GT;&LT;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>
&LT;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> name </td><td class= "Table-user" colspan= "4" ><i class= "FA Fa-user fa-1x "></i> company &LT;/TD&GT;&LT;TD class=" Table-user "><i class=" fa fa-user fa-1x "></i> Department &LT;/TD&GT;&LT;TD class= "Table-user" colspan= "2" ><i class= "fa fa-user fa-1x class=" Table-user "></i> Creation time &LT;/TD&GT;&LT;TD class= "Table-user" colspan= "2" ><i class= "fa fa-user fa-1x" ></i> Update Time </td> &LT;TD class= "Table-user" colspan= "4" ><i class= "fa fa-user fa-1x" ></i> operation </td>
</tr>
<tr>
&LT;TD class= "Table-user" >140</td><td> Zhou Chen </td><td colspan= "4" > Thousand Sail </td><td> UI&LT;/TD&GT;&LT;TD colspan= "2" >2015-1-16</td><td colspan= "2" >2015-1-16</td><td class= " Table-operate "colspan=" 4 "><input type=" button "value=" View "><input type=" button "value=" edit "><input Type= "button" value= "delete" ><input type= "button" value= "Download" ></td>
</tr>
<tr>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>
&LT;TD&GT;1&LT;/TD&GT;&LT;TD&GT;2&LT;/TD&GT;&LT;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>

. 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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Slim vs HTML

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support