暑假网页学习1(浮动问题)
来源:互联网 发布:策略为王 源码下载 编辑:程序博客网 时间:2024/06/06 07:18
<span style="font-size:18px;">一个简单的框架含浮动</span>
<<span style="font-size:18px;">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>第一课</title><style type="text/css">*{margin:0;padding:0;}.header{width:100%;height:50px;background:#ccc;}.header h1{text-align:center;/*竖直居中文字*/height:50px;line-height:50px;}.contain{/*容器水平居中*/width:80%;margin:0 auto;height:400px;background:red;}.first,.second,.third{width:30%;height:350px;background:blue;float:left;margin:25px 1% 0;}.first{margin-left:3%;}.footer{width:100%;height:50px;background:#ff1;}</style></head><body><header class="header"> <h1>头部部分</h1> </header> <div class="contain"> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> </div> <footer class="footer"></footer></body></html></span>
浮动常见问题:
如果不定义中间的容器contain的高度,那么footer就会自动浮动到header的下面,而我们在coontain中定义的三个浮动就会浮在上层,此时页面会出现分层,分成两层,但是由于之前给三个浮动设置了外边距因此上面会浮到头部部分的下面,之间的距离就是外边距,出现这种分层问题,而且页脚浮上去的原因是contain中三个东西定义成浮动,因此一旦高度没有了,contain高度就为0,那么解决方法可以加上clear:both,或者定义一个<div class="clear"></div>,.clear{ clear:both},这个定义的位置是有区别的,在contain中定义,就可以将contain的背景颜色显示出来,因为它属于contain中,而且它位于的位置是contain的底部,因此contain就会被它撑开,如果在contain外面,就会没有背景。这两种方法都是将页脚恢复到contain下面的。如果它的宽度是用百分比表示,那么他就是自适应,另一种方法就是设置宽度的最小值,它不会小于它,可以大于它。
0 0
- 暑假网页学习1(浮动问题)
- 解决网页高度塌陷问题---浮动塌陷
- 暑假php学习记录(1)
- css中float浮动问题(1)
- 插入网页随机浮动广告代码1
- Div + Css 设计网页时浮动问题的解决方法
- 2017暑假集训 div1 匹配问题(1)
- 2017暑假集训 div1 匹配问题(1)
- 暑假学习
- 网页浮动广告源代码
- 网页浮动qq客服
- 网页两侧浮动广告
- 网页浮动窗口代码
- 网页右侧浮动导航
- 网页固定浮动模块
- 网页任意浮动广告
- HTML学习总结(4)-浮动,清浮动
- 暑假php学习记录(2)
- 常用Redis命令总结
- python中的json解析
- Smallest Difference poj2718
- java api封装与工厂模式
- hibernate延迟加载导致no session
- 暑假网页学习1(浮动问题)
- Android数据库安全解决方案,使用SQLCipher进行加解密
- LeetCode 283 Move Zeroes
- 要这样对你的女朋友
- git
- 从Aactivity跳转到Bactivity的指定的fragment
- 集合详解(一)----Collection和Map接口
- python核心编程第十章练习
- Android之Handler用法总结