CSS两列布局

两列布局，采用左列left浮动，右列不浮动，采用margin-left定位的方式。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style type="text/css">
　　body{font-family:'Microsoft YaHei';color:white;}
　　.wraper{width:100%;} 
　　.sider{width:200px; height:1000px; background-color:#333333; float:left;}
　　.main{width:auto; height:1000px; background-color:silver; margin-left:205px;}
</style>
<title></title>
</head>
<body>
　　<div class="wraper">
　　　　<div class="sider">
　　　　　　<ul>
　　　　　　　　<li>显示所有信息</li>
　　　　　　　　<li>添加新成员</li>
　　　　　　　　<li>关于</li>
　　　　　　</ul>
　　　　</div>
　　　　<div class="main"></div>
　　</div>
</body>
</html>

效果如下图：

 

posted @ 2020-09-25 15:05  少司命  阅读(171)  评论(0)  编辑  收藏  举报