手记

my note我的三月一日前台入门代码

<!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>
</head>
<style type="text/css">
*{margin:0;padding:0}

wrap{width:1000px;height:600px;margin:0 auto;padding:0;border:1px solid #000000}
top{height:100px;text-align:center;border:hidden;background:#FFCC33;margin:0;position:relative}
top_menu{position:absolute;left:200px;bottom:0}
left{width:200px;height:500px;float:left;background:#6666CC}
content{width:800px;height:500px;float:right;background:#009900;line-height:500px;text-align:center;position:relative}

ul{list-style:none}
.top_li{width:100px;height:30px;line-height:30px;float:left;text-align:center; margin-right:-1px;border:1px solid #000000;background:#66CC99}
.left_li{width:200px;height:70px;line-height:70px;text-align:center; margin-top:1px;border:1px solid #000000;}
table{positon:absolute;left:20%;top:20%}
//th tr td th{width:10px;height:10px}
//table tr td th{border:1px solid #000;}
</style>
<body>
<div id="wrap">
<div id="top">菜单栏
<div id="top_menu">
<ul>
<li class="top_li"><a href="#" >菜单一</a></li>
<li class="top_li"><a href="#" >菜单二</a></li>
<li class="top_li"><a href="#" >菜单三</a></li>
<li class="top_li"><a href="#" >菜单四</a></li>
<li class="top_li"><a href="#" >菜单五</a></li>
<li class="top_li"><a href="#" >……</a></li>
</ul>
</div>
</div>
<div id="left">
<ul>
<li class="left_li"><a href="#" >按钮一</a></li>
<li class="left_li"><a href="#" >按钮二</a></li>
<li class="left_li"><a href="#" >按钮三</a></li>
<li class="left_li"><a href="#" >按钮四</a></li>
</ul>
</div>
<div id="content">主体内容
<table>
<tbody>
<tr>
<th>No.</th>
<th>Column1</th>
<th>Column1</th>
<th>Operation</th>
</tr>
<tr>
<td>1</td>
<td>Row1</td>
<td>Row1</td>
<td>Trash</td>
</tr>
<tr>
<td>2</td>
<td>Row2</td>
<td>Row2</td>
<td>Judge</td>
</tr>
<tr>
<td>Blank</td>
<td>Add</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

0人推荐
随时随地看视频
慕课网APP