第52章布局相关的样式-盒布局

最新推荐文章于 2025-06-10 00:29:13 发布

iteye_17658

最新推荐文章于 2025-06-10 00:29:13 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

分类专栏：阅-H52

本文链接：https://blog.youkuaiyun.com/iteye_17658/article/details/82644806

阅-H52 专栏收录该内容

35 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Float属性布局</title>
<style>
.box{
	width: 1000px;
	margin: 0 auto;
	display: -moz-box;
	display: -webkit-box;
}
.left{
	/*float: left;*/
	width: 300px;
	padding: 10px;
	background-color: green;
}
.right{
	/*float: right;*/
	width: 300px;
	padding: 10px;
	background-color: #ff39ca;
}
.cont{
	/*float: left;*/
	width: 400px;
	background-color: #0064ff;
}
.left,.cont,.right{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
	<div class="left">
    	<h3>栏目列表</h3>
        <ul>
        	<li><a href="###">栏目名称</a></li>
            <li><a href="###">栏目名称</a></li>
            <li><a href="###">栏目名称</a></li>
            <li><a href="###">栏目名称</a></li>
        </ul>
    </div>
    <div class="cont">
        <p>阅谁问君诵，水落清香浮。</p>
        <p>阅谁问君诵，水落清香浮。</p>
        <p>阅谁问君诵，水落清香浮。</p>
        <p>阅谁问君诵，水落清香浮。</p>
        <p>阅谁问君诵，水落清香浮。</p>
    </div>
    <div class="right">
    	<h3>推荐文章</h3>
        <ul>
        	<li><a href="###">推荐文章</a></li>
            <li><a href="###">推荐文章</a></li>
            <li><a href="###">推荐文章</a></li>
        </ul>
    </div>
</div>
</body>
</html>

效果图：