如何用css进行网页布局 第4章 三列布局-慕课网

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
<style>
body{margin:0;padding:0;}
div.left{width:200px;height:500px;background-color:#ccc;position:absolute;left:0;top:0;}
div.millde{height:500px;background-color:#999;margin:0 310px 0 210px;}
div.right{width:300px;height:500px;background-color:#ddd;position:absolute;right:0;top:0;}
</style>
</head>

<body>
<div class="left"></div>
<div class="millde">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的,你可以领会要点,举一反三</div>
<div class="right"></div>
</body>
</html>

注意事项:

millde是宽度自适应,所以不设置width

div.millde{height:500px;background-color:#999;margin:0 310px 0 210px;}

  • 空隙:多出来10px

div.millde{margin:0 310px 0 210px;}

  • 绝对定位

position:absolute;


你可能感兴趣的:(如何用css进行网页布局 第4章 三列布局-慕课网)