HTML51-清除浮动overflow、网易注册界面基本结构…

2019-11-19 16:01:06来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML51-清除浮动overflow、网易注册界面基本结构搭建

一、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大数据学习视频礼包

 

 


原文链接:https://www.cnblogs.com/ruigege0000/p/11886555.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何设计网页字体大小

下一篇:CSS的经典技巧