| The code is as follows: |
Copy code |
<Style type = "text/css">
<! --
Body, td, div, p, span, textarea, select {
Font-size: 12px;
Font-family: verdana, arial, helvetica, sans-serif
}
A {
Color: #003499;
Text-decoration: none;
Font-size: 12px;
}
A: hover {
Color: #000000;
Text-decoration: underline;
Font-size: 12px;
}
Ul {
Margin: 0px;
Padding: 0px;
Width: 265px;
Display: block;
Clear: both;
}
Ul li {
Float: left;
List-style-type: none;
Border-top: #000 solid 1px;
Border-left: #000 solid 1px;
Width: 65px;
}
. Border-r {
Border-right: #000 solid 1px;
}
. Border-B {
Border-bottom: #000 solid 1px;
}
. Border-l {
Border-right: #000 solid 1px;
Border-bottom: #000 solid 1px;
}
-->
</Style> Html code <Ul>
<Li> 1-1 </li>
<Li> 1-2 </li>
<Li> 1-3 </li>
<Li class = "border-r"> 1-4 </li>
</Ul>
<Ul>
<Li> 2-1 </li>
<Li> 2-2 </li>
<Li> 2-3 </li>
<Li class = "border-r"> 2-4 </li>
</Ul>
<Ul>
<Li> 3-1 </li>
<Li> 3-2 </li>
<Li> 3-3 </li>
<Li class = "border-r"> 3-4 </li>
</Ul>
<Ul>
<Li class = "border-B"> 4-1 </li>
<Li class = "border-B"> 4-2 </li>
<Li class = "border-B"> 4-3 </li>
<Li class = "border-l"> 4-4 </li>
</Ul> |
Through the following images and examples, we can easily find that using CSS is very easy to implement a table-like data list style. Next let's look at the code:
