《《十天学会web标准(div+css)》2》由会员分享，可在线阅读，更多相关《《十天学会web标准(div+css)》2（17页珍藏版）》请在金锄头文库上搜索。
1、主机蛋（http:/ web 标准标准(div+css)第第 2 天：一列布局天：一列布局今天我们开始学习十天学会 web 标准(div+css)的一列布局，包含以下几 种形式： 一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局前 一节我们回顾了 xhtml 基础和 css 基础部分，今天我们正式开始使用网 页制作软件adobe 公司出品的 dreamweaver 来开始网页设计之旅。 相信之 前您已经用过这个软件了，具体怎么使用我就不讲了。为了照顾部分朋友，今 天课程的 css 部分我们是以可视化生成方式，不过建议大家能手写的尽量还是 手写，这样有助于提高效率。一
2、、一列固定宽度一、一列固定宽度我们先看一下一列固定宽度，首先要新建一个页面：注意：这里的文档类型是过渡型，目前我们采用这种宽松验证方式。接下来在页面中插入一个 div 标签，我们可以点击工具栏的“插入 DIV 标 签”按钮，在打开的对话框中 ID 项给这个 div 命一下名，我们给它起个名叫 layout（名称根据自己需要命名）。主机蛋（http:/ div 后，在右侧的 css 样式面板中，定义 id 为 layout 的样式，确定 后在打开的 css 编辑对话框的方框选项中设计宽度 500，高度 300。为了看清楚 起见，我们把这个 div 设置个背景色，这样就能预览出大小和位置了。这里选
3、择高级，然后在选择器中填写：#layout，如果是选中 div 后，再点击添加，它会自动添加上。因为是定义 ID，所以前面需要加#，后面会有 id 和 class 的详细讲解 主机蛋（http:/ IE 中的显示效果，一列固定宽度就这样做成了，简 单吧！CSS 代码及在 IE 中显示如下：#layout height: 300px; width: 400px; background: #99FFcc; 主机蛋（http:/ 里我们用到 css 的外边距属性：margin。在 IE6 及以上版本和标准的浏览器当 中，当设置一个盒模型的的 margin:auto;时，可以让这个盒模型居中。我们下
4、边在 css 样式表中加上这个属性看看效果：#layout height: 300px; width: 400px; background: #99FFcc; margin: auto; 在 dreamweaver 的设计视图中我们选中看看，是不是已经居中了，我们再 在 IE 下预览一下，同样居中。主机蛋（http:/ 改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对 于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看：#layout height: 300px; background: #99FFcc;主机蛋（http:/ 些朋友可能要问了，那为什么还有那么宽的白边
5、呢？这个是由 body 默 认的外边距造成的。当我们不用任何样式表进行定义时，body，h1h6，ul 等 元 素默认有外边距或其它样式的。这里我们在 css 样式中增加一项：body margin:0;，就可以把 body 默认的外边距去掉，这时再预览一下，白边就没 了。body margin: 0px; #layout height: 300px; background: #99FFcc;主机蛋（http:/ 里的选择器类型是新手朋友最容易迷糊的地方，类：是指定义一个 class，可以多个对象引用；标签：指对默认的 html 标签进行重新定义，如可以定义 bodymargin:0，意思是
6、将 body的外边距设置为 0，h2color:#f00是将所有 h2 标签的文字颜色设置为红色；高级它把 ID 和伪类放到一块了，是一个设置不合理的地方，在 cs4 版本中已经分开了。ID 是以#开始，id 只能作用于一个对象，不能作用于多个对象，优先级高于 class，这是 id 和 class 的区别。伪类会在第九节时详细讲解 主机蛋（http:/ 80%显示，那么设置宽度为 80%，当改变浏览器窗 口大小时，盒模型的宽度也会跟着改变。主机蛋（http:/ margin: 0px; #layout margin:auto; height: 300px; background: #99FF
7、cc; width: 80%; 主机蛋（http:/ 我们可以用三个 div 块来划分，分别给它们起名为：头部（header）、主体 （maincontent）、底部（footer）。采用固定宽度居中的方式，代码如下：body margin:0; padding:0; #header margin:5px auto; width:500px; height:80px; background:#9F9; #main margin:5px auto; width:500px; height:400px; background:#9FF; #footer margin:5px auto; width
8、:500px; height:80px; background:#9f9;主机蛋（http:/ 另外两个 div 块给置好，整个效果就出来了。这是一个大多数网站采用的上中 下布局结构。主机蛋（http:/ 1、CSSCSS 可视化生成、格式化可视化生成、格式化本教程便 于新手学习，采用 dw 的 css 可视化生成方式，熟练后的朋友尽 量手写，这样可以提高工作效率。目前来说，希望常用的大家都能记住。关于 css 的格式化，指 css 的排版方式，细心的朋友已发现，我在这里贴出的 css 代码，每个类或 ID 都是写在一行的。可能你的还是分成多行，怎么把它们弄到 一行上呢？请看下面 的代码和图示
9、：body margin:0;padding:0;#header margin:5px auto;width:500px;主机蛋（http:/ margin:5px auto;width:500px;height:400px;background:#9FF;#footer margin:5px auto;width:500px;height:80px;background:#9f9;主机蛋（http:/ 2、CSSCSS 缩写缩写css 的许多属性是可以简写的，这样便于阅读和修改，减少代码量，设置 方法如下：把需要缩写的项目选中，再生成的 css 代码即为简写形式了。这里所说的 是多个属性合并
10、到一块的简写方式，另外像颜色值了也可以简写的。比如颜色 值为#ff6600;可以简写为#f60;两位两位一样的才可以简写，像#c2c2c2 是不可 以简写的。3 3、CSSCSS 语法语法如图所示，CSS 语法由如下三部分构成，选择器：可以是 ID、CLASS 或标 签；属性和值是用来定义这个物件的某一个特性。如一张桌子的长 120cm，宽 60cm，套用 css 的格式为，桌子长:120cm;宽:60cm;，这样是不是容易理解。 主机蛋（http:/ 4、IDID 和和 CLASSCLASS 选择器选择器id 只能在页面中对应一个元素，就像我们的身份证号一样，每个人的都不 一样；class 为类，可以对应多个元素，比如说一年级三班的学生，它所对应 的可能是 10 个 20 个学生。id 的优先级高于 class，比如说今天三班的学生上体育课，小明留下来打 扫卫生。那么三班的学生上体育课这是一个类，而小明打扫卫生这是个 id，虽 然小明也是三班的学生，但 id 高于 class，所以小明执行打扫卫生的任务。更多网站建设及运营推广的资讯请访问主机蛋（http:/ 您提供免费空间，高速稳定，无广告，送数据库。
