HTML51-清除浮动overflow、网易注册界面基本结构搭建
2024-08-28 21:26:15
一、overflow:hidden;作用
(1)可以将超出标签范围的内容裁剪掉
(2)清除浮动
.box1{ background-color: red; /*border:1px white solid;*/ overflow: hidden; } .box2{ background-color: green; /*border:1px white solid;*/ } .box1 p{ width:100px; background-color: blue; } .box2 p{ width:100px; background-color: red; } p{ float:left; } ..........省略代码........... <div class="box1"> <p>我是文字1</p> <p>我是文字2</p> <p>我是文字3</p> </div> <div class="box2"> <p>我是文字4</p> <p>我是文字5</p> <p>我是文字6</p> </div>
注意:在IE6中是不支持这个方法的的。
(3)可以通过overflow:hidden;让里面的盒子设置margin-top之后,外面的盒子不会被顶下来。
如下代码,我们一个大盒子里面嵌套了一个小盒子,如果不设置overflow这个属性,那么小盒子设置了margin-top属性,大小盒子就会一起被外边距顶下来,但是设置了overflow这个属性,那么大盒子就没有问题正常显示。我们以前学过的解决方法就是给大盒子添加一个border属性就可以了,但是在企业开发中如果不需要border的话,那么加上了,就是画蛇添足了。
.box4{ width:400px; height:400px; background-color: red; overflow: hidden; } .box5{ width:200px; height:200px; margin-top: 50px; background-color: blue; } ............省略代码............. <div class="box4"> <div class="box5"></div> </div> 二、网易注册界面基本机构搭建 1.从上到下,从外到内,从左到右,善于利用盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D139_FrameworkeOfNeteasyInterface</title> <style> .header{ width:960px; height:80px; background-color: red; margin: 0 auto; overflow: hidden; } .content{ width: 960px; height: 600px; background-color: blue; margin: 0 auto; } .footer{ width: 960px; height: 48px; background-color: yellow; margin: 0 auto ; } .logo{ width:748px; height: 47px; background:url("image/netEasyLogo.jpg"); margin-top: 12px; } </style> </head> <body> <div class="header"> <div class="logo" ></div> div. </div> <div class="content"></div> <div class="footer"></div> </body> </html>
三、源码:
D138_ClearFloatSIx.html
D139_FrameworkeOfNeteasyInterface.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D138_ClearFloatSIx.html
https://github.com/ruigege66/HTML_learning/blob/master/D139_FrameworkeOfNeteasyInterface.html
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
最新文章
- JS 传播事件、取消事件默认行为、阻止事件传播
- CYQ.Data V5 数据库读写分离功能介绍
- 天龙客户端的ResourceManager
- 字符串匹配算法之BF(Brute-Force)算法
- Codeforces Round #200 (Div. 1) D Water Tree 树链剖分 or dfs序
- 字符串右移n位(C++实现)
- MySQL 基础(DDL)
- 对发给Application.Handle消息的三次执行(拦截)消息的过程
- ASP.NET - URL中参数加密解密操作
- Linux而不必进入password登陆自己主动sshserver方法
- fiddler4手机抓包
- Android - 电池状态
- Visual Studio 2019 发布活动 - 2019 年 4 月 2 日
- vue----分级上传
- sse矩阵乘法 应该是1毫秒纯运算1000次
- Redis开启AOF导致的删库事件
- 【NOIP 2016】Day1 T2 天天爱跑步
- B1041. 考试座位号(15)
- Mongodb高级篇-性能优化
- iOS 事件传递及响应过程