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.uj5u.com/qiye/100473.html

標籤：Html/Css

上一篇：如何設定HTML頁面中文本的字體

下一篇：易優CMS:arclist 檔案串列