实训六 Div+CSS布局示例
主要内容:
本周需要完成的任务:根据前几周的设计,
各组创建自己的站点文件夹,并把站点内文件夹结构创建好,搜集相关素材;
使用Div+CSS实现网页框架。
参考图:
操作部分:Div标签及盒子模型
提示:请务必做好准备工作。
在硬盘上创建一个自己的文件夹,专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。
将从FTP上下载下来的”images”文件夹(专门存放图片),存放在自己的“myweb”文件夹内,以备制作网页时使用。
将从FTP上下载下来的 test.html 文件,存放在自己的“myweb”文件夹内,这是一个网页HTML代码的标准模版。
将 test.html 复制一份,重命名之后以记事本的方式打开,开始编辑代码。
1.在上一节制作的网页的基础上,继续修改,使三个盒子都能居中显示。
需要修改CSS文件:
body{ background:url(../images/back1.jpg); margin:0; } #red,#blue,#green{ margin:0 auto; } …… |
保存后测试。
2.会发现得到如下结果:
原因:#red和#blue都被添加了float:left;属性,而#green没有float属性。
结论:margin:0 auto;这种居中对齐方法,对于有浮动属性的div不起作用。
解决办法:将显示在同一行的、需要浮动的盒子,用一个大盒子套起来,这个大盒子不必浮动,也就能使margin:0 auto;这种居中对齐方法有效。
首先修改HTML文件:
…… <body> <div id="main"> <div id="red">左侧</div> <div id="blue">右侧</div> </div> <div id="green">页脚</div> </body> …… |
然后修改CSS文件:
…… #main,#green{ margin:0 auto; } #main{ width:508px; height:200px; } …… |
注意:HTML文件和CSS文件都保存,测试。
知识链接:
使用CSS实现居中的方法:
Margin:0 auto;
注:此方法不适用与具有浮动(float)属性的Div。
Div+CSS应用示例
以如下网页为例,分步讲解:
1.首先,确定网页布局,先横向划分大盒子,划分结果如下:
2.将模版网页test.html复制一份,将复件重命名为“index.html”,使用记事本的方式打开,并编辑代码:
…… <body> <div id="logo"></div> <div id="nav"></div> <div id="banner"></div> <div id="content"></div> <div id="footer"></div> </body> …… |
3.5个盒子中间都没有内容,又没有样式,页面中看不到效果,所以先为盒子添加样式,查看网页布局:
在站点内新建“CSS”文件夹;
在“CSS”文件夹内新建记事本,重命名为“common.css”。
4.在HTML文件中添加:
…… <link type="text/css" rel="stylesheet" href="css/common.css" /> </head> <body> <div id="logo"></div> <div id="nav"></div> <div id="banner"></div> <div id="content"></div> <div id="footer"></div> </body> …… |
保存。
5.以记事本方式打开“common.css”,编辑代码:
body,div,p,h1,img{ padding:0; margin:0; } |
保存。
通常在CSS文件开头,都写这样几行代码,作用是将浏览器对不同块元素默认设置的边距,包括内边距和外边距,都清零,尽量避免出现浏览器不兼容的现象。
6.继续修改CSS文件,设置盒子的样式,看到当前网页的布局:
body,div,p,h1,img{ padding:0; margin:0; } #logo,#nav,#banner,#content,#footer{ width:900px; height:200px; background:blue; border:1px red solid; } |
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论