HTML51-清除浮動overflow、網易註冊界面基本結構搭建

時間 2019-11-19

標籤 html51 html 清除浮動 overflow 網易註冊界面基本結構搭建欄目 HTML 简体版

原文原文鏈接

1、overflow:hidden;做用html

（1）能夠將超出標籤範圍的內容裁剪掉git

（2）清除浮動github

        .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>

 

 
      

2、網易註冊界面基本機構搭建

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>