为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
CSS3

<!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>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消