第一天页面布局列的固定
<html>
<head>
<style type=”text/css”>
#layout{height:500px;width:800px;background:#ff0000;}
</style>
</head>
<body>
<div id="layout">此处显示id的layout内容</div>
</body>
</html>
1）一列固定宽度
#layout{height:500px;width:800px;background:#ff0000;}
2）一列固定宽度居中：当margin属性设置为auto，自动居中。
#layout{height:500px;width:800px;background:#ff0000;margin:auto}
3）一列自适应宽度：
#layout{height:500px;background:#ff0000;}
此时周围有白边，为body的margin。如要无白边，加下列css：
body{margin:0px;}
定义css样式时，以#开头的是对id进行设置，只能作用于一个对象，因为id值全局唯一；以“.”开头的是对class属性值的定义，可以作用于多个对象；也可以直接对html标签进行设置css，例如body，id的优先级高于class选择器。
4）一列二至多块布局
5）两列固定宽度居中
默认情况下，每一个div都当作块级元素来处理，块级元素默认占一行。第二个div自动会占据第二行。要想div跑到右侧，就需要css的浮动来实现。
#content {height=300px;width:800px;margin:0auto;}
#side { background: #9F9;height: 300px; width: 120px; float: left; }
#main {background:#9FF;height:300px;width:680px;margin-left: 120px; }
<body>
<divid="content">
<div id="side">此处显示id "side" 的内容</div>
<div id="main">此处显示id "main" 的内容</div>
</div>
</body>
6）块级元素：就是一个方块，像段落一样，默认占据一行出现；诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。如: 表单元素<input>、超级链接<a>、图像<img>、<span> .......
块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。可以用css 的display:inline将块级元素改变为内联元素，也可以用display:block 将内联元素改变为块元素。
7） 三列固定宽度
body { margin:0;}
#content { width:470px;margin:0 auto;}
#left { background: #99FF99;height: 300px; width: 120px; float: left; }
#right { background: #99FF99;height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
<body>
<div id="content">
<div id="left">left content</div>
<div id="right">right content</div>
<div id="main">maincontent</div>
</div>
</body>
注意，id为right的div放置在第二个位置，不能放置第三个位置，否则，right层将位于第二行。
2325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
