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>

3、源码：ui

D138_ClearFloatSIx.htmlurl

D139_FrameworkeOfNeteasyInterface.htmlspa

地址:.net

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