网页制作案例教程HTML5+CSS3 课件 项目6 浮动和定位

HTMLCSS项目6浮动和定位网页制作案例教程（HTML5+CSS3）教学目标理解熟悉掌握掌握2熟悉清除浮动的方法，可以使用不同方法清除浮动。3掌握元素的定位方法。会使用浮动和定位进行多样化页面布局。4理解元素的浮动，能为元素设置浮动效果。11设置浮动效果2清除浮动3元素的定位4制作环保网页任务分解PART0101设置浮动效果设置浮动效果网页中内容除了可以上下布局，还可以左右布局，或者上下左右混合布局。如图所示，总体是左右布局，左侧是课程名称等信息，右侧是学习人次等。右侧内容又分上下两部分，上面是学习人次、我的收藏和精选留言，下面是结束学习。使用浮动属性可以实现网页的灵活布局。设置浮动效果float属性基本语法格式选择器{float:none|left|right;}none：设置对象不浮动，none是默认值；left：设置左浮动，内容向左边对齐；right：设置右浮动，内容向右边对齐。.left{width:35%;

float:left;}例float属性用来设置浮动效果，从而实现灵活布局设置浮动效果动手实践demo1设置浮动效果<h2>郁金香花语</h2><divclass=team><divclass="item"><imgsrc="img/flower1.jpg"alt=""><h4>黄色郁金香</h4><p>黄色郁金香新鲜、明亮、充满活力，代表友谊、尊敬、祝福等</p></div><divclass="item"><imgsrc="img/flower2.jpg"alt=""><h4>粉色郁金香</h4><p>粉色郁金香温和、优雅，代表感谢、祝福、感恩、友情等</p></div><divclass="item"><imgsrc="img/flower3.jpg"alt=""><h4>橙色郁金香</h4><p>橙色郁金香代表永恒的爱和美好的回忆</p></div></div>h2{color:darkorange;text-align:center;}.team{margin:20pxauto;width:900px;}.item{float:left;width:290px;margin-right:10px;}.item>img{width:280px;border-radius:10px;}.itemh4{color:darkorange;margin:0;text-align:center;}.itemp{text-indent:2em;font-size:13px;text-align:left;}PART0202清除浮动浮动引起布局混乱问题设置浮动效果（float属性值为left或right）后，浮动元素不再占用原文档流的位置。父级元素因为子级元素浮动的原因内部高度值为0。如demo1中未设置浮动时，虽然父盒子<divclass="team">没有设置高度，但他被子元素撑开，高度是三个子盒子<divclass="item">的高度和，设置浮动后，父盒子高度为0。父盒子高度为0，父盒子后面的元素会向上移动，出现布局混乱布。为了解决这个问题，需要清除浮动。设置浮动效果动手实践demo2<style>*{box-sizing:border-box;}.main,.footer{ width:900px; margin:0auto;}.main{background-color:#f1f1f1;}.footer{ background-color:#0373b9; padding:30px10px; }.left,.right{ border:1pxsolid#e1e1e1; padding:30px10px;}.left{ width:28%; float:left;}.right{ width:70%; float:right;}</style><divclass="main"><divclass="left"> 左侧栏目导航</div><divclass="right"> 右侧主要内容</div></div><divclass="footer"> 版权内容</div>元素的浮动clear属性none:允许两边都可以有浮动对象，none是默认值；both：不允许有浮动对象；left：不允许左边有浮动对象；right：不允许右边有浮动对象。基本语法格式选择器{clear:none|left|right|both;}.clear{

clear:left;}例clear属性可以用来清除浮动元素对当前元素的所产生的影响清除浮动的方法额外标签法是指在浮动元素后面添加空标记，并对空标记应用“clear:both|left|right”样式。空标记可以是<div>等任何标记。方法一可以在demo2中浮动元素后面添加<divclass=”clear”></div>在<style>标签中添加类clear（.clear{clear:both;}）。额外标签法清除浮动的方法父级添加overflow属性方法是指给浮动元素的父级元素添加“overflow:hidden”样式。方法二使用父级添加overflow属性法清除浮动可以在demo2中的main类中添加“overflow:hidden;”代码。父级添加overflow属性方法清除浮动的方法使用after伪元素方法是指给浮动元素的父级元素添加after伪元素，并设置其height、content、display、visibility和clear属性。方法三可以在demo2中的浮动元素父盒子中再添加一个类（类名自定义，比如clearfix)，然后在<style>标签中添加.clearfix:after和.clearfix的样式使用after伪元素方法PART0303元素的定位元素的定位基本语法格式选择器{position：static|relative|absolute|fixed;}static：静态定位，默认的定位方式relative：相对定位，可以使用top，right，bottom，left属性以原位置为参考进行定位。absolute：绝对定位，可以使用top，right，bottom，left属性以定位的父盒子为参考进行定位。fixed：固定定位，可以使用top，right，bottom，left属性以窗口为参考进行定位，当出现滚动条时，对象不会随着滚动。.logo{position:absolute;top:10px;left:5px}例通过元素的定位属性position可以设置元素的精确位置元素的定位相对

定位基本语法格式选择器{position：relative;}元素的定位动手实践demo3<divclass="main"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div>.main{width:300px;background-color:#f1f1f1;padding:10px;}.box1,.box2,.box3{width:90%;height:30px;margin:10px;background-color:aqua;}.box2{position:relative;top:100px;left:30px;}元素的定位相对定位的元素可以对其设置偏移值。相对于自己的原来位置进行偏移元素偏移后其原位置仍然保留。元素的定位绝对

定位基本语法格式选择器{position：absolute;}元素的定位动手实践demo4<divclass="item"><imgsrc="img/flower.jpg"alt=""width="260px"><divclass="description"><h4>韩式系列/温柔以待</h4><p>花语：温柔的人，都是人间宝</p></div></div>*{margin:0;padding:0;}.item{width:260px;height:280px;position:relative;}.description{

background-color:rgba(160,160,200,.3);

width:260px;text-align:center;padding:10px0;color:#663366;position:absolute;

bottom:0;}.descriptionp{font-size:13px;padding-top:5px;}元素的定位绝对定位的元素脱离了正常文档流。可以对绝对定位元素设置偏移值。绝对定位的元素的位置是相对于离元素最近的已定位（不包含默认定位）的父元素。如果无已定位的父元素,则相对于整个文档（html）定位。已定位元素指设置了position值为relative或者absolute或者fixed的元素元素的定位固定

定位基本语法格式选择器{position：fixed;}使用固定定位的元素无论如何滚动浏览器窗口，元素的位置在窗口中都是固定不变的。元素的定位动手实践demo5<divclass="top">头部</div><divclass="content">主要内容</div><divclass="bottom">底部</div><divclass="to-top"><imgsrc="img/top.png"alt=""></div>.top,.content,.bottom{width:1000px;margin:5pxauto;}.content{height:700px;background-color:#f1f1f1;}.top,.bottom{height:100px;background-color:#3d94e5;}.to-top{height:73px;width:73px;position:fixed;right:10px;bottom:100px;}元素的定位固定定位的元素脱离了正常文档流。可以对固定定位元素设置偏移值。固定定位的元素的位置是相对于相对于浏览器窗口的位置。PART0404制作环保网页绿色是生命的象征、大自然的底色，更是美好生活的基础。近百年来人类行为已经引发了严重的生态危机。如今，环保问题已经引起了人们的重视。保护环境人人有责，下面我们制作一个环保网站首页，传播环境保护意识。制作环保网页制作环保网页<!--Beginheader--><header><nav></nav><divclass="banner"></div></header><!--Endheader--><!--Beginsection-><section></section><!--Endsection--><!--Beginfooter--><footer></footer><!--Endfooter-->网页整体布局制作环保网页*{margin:0;padding:0;list-style-type:none;outline:0;border:0;}body{font-size:15px;line-height:24px;background:#F8FAFF;font-family:"微软雅黑",Arial,sans-serif;color:#333;}a{text-decoration:none;color:#1bbd9b;}.clear{clear:both;}.center{text-align:center;}CSS基础样式设置制作环保网页<head><metacharset="UTF-8"><title>环保网</title><linkrel="stylesheet"href="css/style.css"></head>链接外部样式制作环保网页<header><nav>

<ul>

<liclass="logo"><imgsrc="img/logo.png"alt=""></li><liclass="active"><ahref="index.html"class="active">首页</a></li><li>

<ahref="about.html">环保动态</a>

</li><li><ahref="blog.html">环境监测</a></li><li><ahref="team.html">智慧环保</a></li><li><ahref="team.html">新能源</a></li><li><ahref="contact.html">联系我们</a>

</li></ul>

<divclass="clear"></div></nav><divclass="banner"></div></header>header部分内容制作环保网页header{width:100%;}nav{width:1100px;margin:0auto;padding-top:15px;padding-bottom:15px;position:relative;}navul{float:right;}navli{float:left;}nava{padding:10px15px;margin:5px;display:block;font-weight:bold;color:#888;}header部分样式制作环保网页nav.logo{

position:absolute;

left:0;

top:10px;

}nav.active{background:#74B9B9;}nav.activea{color:#ffffff;}.banner{height:500px;background:url(../img/banner.jpg);background-size:cover;

}header部分样式制作环保网页section部分内容<section>

<divclass="services-header"><h3>我们的使命</h3><p><em>让环境保护意识深入人心并转化成自觉的行动</em></p><hr>

</div>

<divclass="services-content">

<divclass="col"><pclass="center"><imgsrc="img/icon1.png"alt=""></p><h4class="services-titlecenter">绿色生活</h4><pclass="services-bodycenter">绿色生活方式</p><pclass="services-more"><ahref="#">绿色生活方式，指以通过倡导居民使用绿色产品，引导民众树立绿色增长、共建共享的理念……[详细]</a></p>

</div><!<--省略5个col栏目--><divclass="clear"></div>

</div></section>制作环保网页section{margin:50pxauto;margin-bottom:30px;width:1100px;}.