网页设计与制作模块6.pptVIP

模块6：制作手机端网页 必备知识 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style #box{width:650px;} #left{background-color:#fff; height:150px; width:150px; margin:0px;} #main{background-color:#fff; height:150px; width:150px; margin:0px;} #right{background-color:#fff; height:150px; width:150px; margin:0px;} /style /head body div id=box div id=left/div div id=main/div div id=right/div /div /body /html 效果图如图6-11所示。 图6-11 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 当把left向右浮动时，它将脱离文档流并且向右移动，直到边缘到包含框box的右框为止。Left向右浮动的CSS代码如下，效果如图：6-12。 #left{background-color:#fff; height:150px; width:150px; margin:0px; Float:right;} 当把left向左浮动时，它将脱离文档流并且向右移动，直到边缘到包含框box的右框为止。Left向右浮动的CSS代码如下，效果如图：6-13。 #left{background-color:#fff; height:150px; width:150px; margin:0px; Float:left;} 图6-12 图6-13 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 当把三个框向左浮动时，left框将向左浮动直到碰到包含框box框的左边缘为止，另两个框向左浮直到碰到前一个浮动框为止，代码如下,效果如图6-14所示。 图6-14 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style #box{width:650px;} #left{background-color:#fff; height:150px; width:150px; margin:0px; float:left;} #main{background-color:#fff; height:150px; width:150px; margin:0px; float:left;} #right{background-color:#fff; height:150px; width:150px; margin:0px; float:left;} /style /head body div id=box div id=left/div div id=main/div div id=right/div /div /body /html 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页