<!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=utf-8" />
<title>数据加载</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<style>
body{ overflow:hidden;}
ul{width:706px; margin-left:1px;background:url(images/tdmain_05.png); height:365px;padding-top:25px;}
ul li{ display:inline-block;width:228px;margin-bottom:15px; }
#lastli{ border:none;width:700px;}
#li1{width:465px;}
.sp1{ float:left; width:120px; text-align:right;}
.sp2{ float:right; width:100px; text-align:left; color:#fff;}
.sp3{ float:right; width:335px; text-align:left; color:#fff;}
.sp4{ float:right; width:570px; text-align:left; color:#fff;}
.ul1{ border:1px solid #000;}
.liborder{border-right:1px solid #000;}
.libg1{background:url(images/tdmain_04.png)}
.libg2{background:url(images/tdmain_01.png)}
.libg3{background:url(images/tdmain_02.png)}
</style>
</head>
<body>
<div id="wrap">
<div class="text_nr">
<ul class="clearfix ul1">
<li><span class="sp1">姓名 ：</span><span class="sp2 libg2">曹立成</span></li>
<li><span class="sp1">卡号 ：</span><span class="sp2 libg2">12321312121</span></li>
<li><span class="sp1">骨密度 ：</span><span class="sp2 libg2">21414</span></li>
<li><span class="sp1">血糖 ：</span><span class="sp2 libg2">21231</span></li>
<li id="li1"><span class="sp1">身份证 ：</span><span class="sp3 libg2">12341424</span></li>
<li><span class="sp1">骨密度是啊啊 ：</span><span class="sp2 libg2">21414</span></li>
<li><span class="sp1">骨密度 ：</span><span class="sp2 libg2">21414</span></li>
<li><span class="sp1">骨密度 ：</span><span class="sp2 libg2">21414</span></li>
<li id="lastli"><span class="sp1">医生建议 ：</span><span class="sp4 libg2">欢迎你的到来</span></li>
</ul>
<div>
</div>
</body>
</html>
由于表格加载数据过慢，每次都是一次性加载一个表格。导致页面的加载速度的缓慢。加重页面的负担。所以现在都流行用<div></div>里面加<ul></ul>来制作表格形式的界面。用<ul></ul>制作有2中对齐方式。一种是左对齐，一种是右对齐。上面的实例是右对齐。。左对齐就只需要text-align:left;就可以了。。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数据加载</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<style>
body{ overflow:hidden;}
ul{width:706px; margin-left:1px;background:url(images/tdmain_05.png); height:365px;padding-top:25px;}
ul li{ display:inline-block;width:228px;margin-bottom:15px; }
#lastli{ border:none;width:700px;}
#li1{width:465px;}
.sp1{ float:left; width:120px; text-align:right;}
.sp2{ float:right; width:100px; text-align:left; color:#fff;}
.sp3{ float:right; width:335px; text-align:left; color:#fff;}
.sp4{ float:right; width:570px; text-align:left; color:#fff;}
.ul1{ border:1px solid #000;}
.liborder{border-right:1px solid #000;}
.libg1{background:url(images/tdmain_04.png)}
.libg2{background:url(images/tdmain_01.png)}
.libg3{background:url(images/tdmain_02.png)}
</style>
</head>
<body>
<div id="wrap">
<div class="text_nr">
<ul class="clearfix ul1">
<li><span class="sp1">姓名 ：</span><span class="sp2 libg2">曹立成</span></li>
<li><span class="sp1">卡号 ：</span><span class="sp2 libg2">12321312121</span></li>
<li><span class="sp1">骨密度 ：</span><span class="sp2 libg2">21414</span></li>
<li><span class="sp1">血糖 ：</span><span class="sp2 libg2">21231</span></li>
<li id="li1"><span class="sp1">身份证 ：</span><span class="sp3 libg2">12341424</span></li>
<li><span class="sp1">骨密度是啊啊 ：</span><span class="sp2 libg2">21414</span></li>
<li><span class="sp1">骨密度 ：</span><span class="sp2 libg2">21414</span></li>
<li><span class="sp1">骨密度 ：</span><span class="sp2 libg2">21414</span></li>
<li id="lastli"><span class="sp1">医生建议 ：</span><span class="sp4 libg2">欢迎你的到来</span></li>
</ul>
<div>
</div>
</body>
</html>
由于表格加载数据过慢，每次都是一次性加载一个表格。导致页面的加载速度的缓慢。加重页面的负担。所以现在都流行用<div></div>里面加<ul></ul>来制作表格形式的界面。用<ul></ul>制作有2中对齐方式。一种是左对齐，一种是右对齐。上面的实例是右对齐。。左对齐就只需要text-align:left;就可以了。。
扫一扫
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
