- 1、本文档共17页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
《十天学会we标准(divcss)》2
?《十天学会web标准 div+css 》第2天:一列布局今天我们开始学习《十天学会web标准 div+css 》的一列布局,包含以下几种形式:
一列固定宽度
一列固定宽度居中
一列自适应宽度
一列自适应宽度居中
一列二至多块布局
前 一节我们回顾了xhtml基础和css基础部分,今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅。 相信之前您已经用过这个软件了,具体怎么使用我就不讲了。为了照顾部分朋友,今天课程的css部分我们是以可视化生成方式,不过建议大家能手写的尽量还是 手写,这样有助于提高效率。
一、一列固定宽度
我们先看一下一列固定宽度,首先要新建一个页面:
注意:这里的文档类型是过渡型,目前我们采用这种宽松验证方式。
接下来在页面中插入一个div标签,我们可以点击工具栏的“插入DIV标签”按钮,在打开的对话框中ID项给这个div命一下名,我们给它起个名叫layout(名称根据自己需要命名)。
插入div后,在右侧的css样式面板中,定义id为layout的样式,确定后在打开的css编辑对话框的方框选项中设计宽度500,高度300。为了看清楚起见,我们把这个div设置个背景色,这样就能预览出大小和位置了。
这里选择高级,然后在选择器中填写:#layout,如果是选中div后,再点击添加,它会自动添加上。因为是定义ID,所以前面需要加#,后面会有id和class的详细讲解
我们预览一下,看看在IE中的显示效果,一列固定宽度就这样做成了,简单吧!CSS代码及在IE中显示如下:
style type text/css #layout height: 300px; width: 400px; background: #99FFcc; 二、一列固定宽度居中
一列固定宽度居中和一列固定宽度相比,我们要解决的问题就是居中。这里我们用到css的外边距属性:margin。在IE6及以上版本和标准的浏览器当中,当设置一个盒模型的的margin:auto;时,可以让这个盒模型居中。我们下边在css样式表中加上这个属性看看效果:
#layout height: 300px; width: 400px; background: #99FFcc; margin: auto;
在dreamweaver的设计视图中我们选中看看,是不是已经居中了,我们再在IE下预览一下,同样居中。
三、一列自适应宽度
自适应宽度是相对于浏览器而言,盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时,它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看:
#layout height: 300px; background: #99FFcc;
有 些朋友可能要问了,那为什么还有那么宽的白边呢?这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时,body,h1-h6,ul等元 素默认有外边距或其它样式的。这里我们在css样式中增加一项:body margin:0; ,就可以把body默认的外边距去掉,这时再预览一下,白边就没了。
body margin: 0px; #layout height: 300px; background: #99FFcc;
这 里的选择器类型是新手朋友最容易迷糊的地方,类:是指定义一个class,可以多个对象引用;标签:指对默认的html标签进行重新定义,如可以定义 body margin:0 ,意思是?将body的外边距设置为0,h2 color:#f00 是将所有h2标签的文字颜色设置为红色;高级它把ID 和伪类放到一块了,是一个设置不合理的地方,在cs4版本中已经分开了。ID是以#开始,id只能作用于一个对象,不能作用于多个对象,优先级高于 class,这是id和class的区别。伪类会在第九节时详细讲解
如果我们需要按浏览器的80%显示,那么设置宽度为80%,当改变浏览器窗口大小时,盒模型的宽度也会跟着改变。
body margin: 0px; #layout margin:auto; height: 300px; background: #99FFcc; width: 80%;
五、一列二至多块布局
一般的网站整体可以分为上中下结构,即:头部、中间主体、底部。那么我们可以用三个div块来划分,分别给它们起名为:头部(header)、主体(maincontent)、底部(footer)。
采用固定宽度居中的方式,代码如下:
body margin:0; padding:0; #header margin:5px auto; width:500px; he
您可能关注的文档
- ★名著推荐与阅《水浒传》(施耐庵)学习材料(练习).doc
- 《 某某大学211级思想政治理论课暑假社会实践报告》.doc
- 《2010-211年福建省支持推广的农业机械产品目录》.doc
- 《Window XP超级技巧 1000 例》6-2.doc
- 《“一国两制”祖国统一》教学设计及反思.doc
- 《“保护自然,我家园”手抄报》教学设计.doc
- 《上海对外贸易院上海大学生创新活动计划立项申请表》.doc
- 《两位数乘两位》教学设计 于都三门圩小学 邱丽华.doc
- 《两位数减一位和整十数》练习(一)教案.doc
- 《中国特色社会义的总任务》下试卷.docx
- GB/T 39560.10-2024电子电气产品中某些物质的测定 第10部分:气相色谱-质谱法(GC-MS)测定聚合物和电子件中的多环芳烃(PAHs).pdf
- 中国国家标准 GB/T 39560.10-2024电子电气产品中某些物质的测定 第10部分:气相色谱-质谱法(GC-MS)测定聚合物和电子件中的多环芳烃(PAHs).pdf
- 《GB/T 39560.10-2024电子电气产品中某些物质的测定 第10部分:气相色谱-质谱法(GC-MS)测定聚合物和电子件中的多环芳烃(PAHs)》.pdf
- GB/T 39560.302-2024电子电气产品中某些物质的测定 第3-2部分:燃烧-离子色谱法(C-IC)筛选聚合物和电子件中的氟、氯和溴.pdf
- 中国国家标准 GB/T 39560.2-2024电子电气产品中某些物质的测定 第2部分:拆解、拆分和机械制样.pdf
- 中国国家标准 GB/T 39560.302-2024电子电气产品中某些物质的测定 第3-2部分:燃烧-离子色谱法(C-IC)筛选聚合物和电子件中的氟、氯和溴.pdf
- GB/T 39560.2-2024电子电气产品中某些物质的测定 第2部分:拆解、拆分和机械制样.pdf
- 《GB/T 39560.2-2024电子电气产品中某些物质的测定 第2部分:拆解、拆分和机械制样》.pdf
- 《GB/T 39560.303-2024电子电气产品中某些物质的测定 第3-3部分:配有热裂解/热脱附的气相色谱-质谱法(Py/TD-GC-MS)筛选聚合物中的多溴联苯、多溴二苯醚和邻苯二甲酸酯》.pdf
- 中国国家标准 GB/T 39560.303-2024电子电气产品中某些物质的测定 第3-3部分:配有热裂解/热脱附的气相色谱-质谱法(Py/TD-GC-MS)筛选聚合物中的多溴联苯、多溴二苯醚和邻苯二甲酸酯.pdf
文档评论(0)