WEB前端

CSS ul li美化 CSS ul li表格效果

位置:首页 > WEB前端 > css教程,2017-03-03
CSS ul li美化 CSS ul li表格效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS  ul li美化 CSS  ul li表格效果</title>
<style>
#t {
width: 404px;
margin: 5px auto;
padding:0px;
border-top: #0066cc 1px solid;
border-left: #0066cc 1px solid;
display:table;
}
#t li {
float: left;
width: 100px;
height: 50px;
list-style-type: none;
border-right:#0066cc 1px solid;
border-bottom: #0066cc 1px solid;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>

<ul id="t">
<li style="width:403px;">表格</li>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
</ul>

</body>
</html>

TAGS:CSS ul li表格效果

猜你喜欢

NewHot