- 1、本文档共9页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
实训六 Div+CSS布局示例
主要内容:
本周需要完成的任务:根据前几周的设计,
各组创建自己的站点文件夹,并把站点内文件夹结构创建好,搜集相关素材;
使用Div+CSS实现网页框架。
参考图:
操作部分:Div标签及盒子模型
提示:请务必做好准备工作。
在硬盘上创建一个自己的文件夹,专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。
将从FTP上下载下来的”images”文件夹(专门存放图片),存放在自己的“myweb”文件夹内,以备制作网页时使用。
将从FTP上下载下来的 test.html 文件,存放在自己的“myweb”文件夹内,这是一个网页HTML代码的标准模版。
将 test.html 复制一份,重命名之后以记事本的方式打开,开始编辑代码。
在上一节制作的网页的基础上,继续修改,使三个盒子都能居中显示。
需要修改CSS文件:
body{
background:url(../images/back1.jpg);
margin:0;
}
#red,#blue,#green{
margin:0 auto;
}
……
保存后测试。
会发现得到如下结果:
原因:#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应用示例
以如下网页为例,分步讲解:
首先,确定网页布局,先横向划分大盒子,划分结果如下:
将模版网页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
……
5个盒子中间都没有内容,又没有样式,页面中看不到效果,所以先为盒子添加样式,查看网页布局:
在站点内新建“CSS”文件夹;
在“CSS”文件夹内新建记事本,重命名为“common.css”。
在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
……
保存。
以记事本方式打开“common.css”,编辑代码:
body,div,p,h1,img{
padding:0;
margin:0;
}
保存。
通常在CSS文件开头,都写这样几行代码,作用是将浏览器对不同块元素默认设置的边距,包括内边距和外边距,都清零,尽量避免出现浏览器不兼容的现象。
继续修改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;
}
一般想看到盒子的样式,只要设这三个属性:width、height和background。
为了能看出来是五个盒子,再加上边框属性:border。保存后测试。
看到盒子样式后,再设置所有盒子居中显示:
……
#logo,#nav,#banner,#content,#footer{
width:900px;
height:200px;
background:blue;
border:1px red solid;
margin:0 auto;
}
下面对每个盒子做个
文档评论(0)