高级DBA运维
成长之路

第3课 CSS浮动代码

文章目录
div设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
    </div>
    <div id="div2">
     <label>姓名:</label> <input type="text">
    </div>
</body>
</html>
#div1{
    background-color: yellow;
    width: 150px;
    height: 150px;
    top:150px;
    left:150px;
    position: absolute;
    overflow: hidden;
    /*outline: none;*/
    border-bottom: solid;
}

#div2{
    top:150px;
    left:350px;
    position: absolute;
    /*border-bottom: solid;*/
}

input{
    border:none;
    border-bottom: solid;
    outline: none;
}

盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
    </div>
    
    <div id="div2">
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
    </div>
</body>
</html>
div{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin-left: 20px;
}
#div1{
    background-color: yellow;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
#div2{
    background-color: blue;

}

*{
    /*margin:0px 0px 0px 0px;*/
    /*margin:0px 0px;*/
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right:0px;
}

行级元素与块级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!-- a标签是行级元素,div是块级元素 -->
<div><a href="">慕课网</a></div>
<a href="">www.imooc.com</a>
</body>
</html>

定位机制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<label>慕课网</label>
<label>慕课网</label>
<label>慕课网</label>
</body>
</html>

浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">第一个</div>
<div id="div2">第二个</div>
<div id="div3">第三个</div>
</body>
</html>
div{
    width: 200px;
    height: 200px;
}
#div1{
    background-color: yellow;
    float: left;
}
#div2{
    background-color: red;
    width: 300px;
    float: left;

}
#div3{
    background-color: blue;
    width: 400px;
    float: left;
}

float包裹和崩溃
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
</html>
#div1{
    border: 1px solid black;
    background-color: red;

}
#div2{
    background-color: yellow;
    height: 230px;
    width: 450px;
    float: left;
}

#div3{
    background-color: blue;
    height: 160px;
    width: 500px;
    float: left;
}

包裹特性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
       <img src="image/wudaojiaoshi.jpg"/>
    </div>
     
</body>
</html>
#div1{
    background-color: #ffffff;
    float:left;
}
img{
    vertical-align: bottom;
}

浮动的其他特性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
       <img src="image/wudaojiaoshi.jpg"/>
       <p>
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       </p>
    </div>
     
</body>
</html>
#div1{
    background-color: #ffffff;
    float:left;
}
img{
    vertical-align: bottom;
    float: left;
}
p{
    text-align: justify;
    line-height: 30px;
    line-height: 1e,;
    background-color: #ffffff;
}

问题解决
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
       <img src="image/wudaojiaoshi.jpg"/>
       <p>
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       	 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
       </p>
    </div>
     
</body>
</html>
#div1{
    background-color: #ffffff;
    float:left;
}
img{
    vertical-align: bottom;
    float: left;
}
p{
    margin-top: -7px;
    text-align: justify;
    line-height: 30px;
    background-color: #ffffff;
}

清除浮动1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>
#div1{
    background-color: red;
}
#div2{
    background-color: yellow;
    float: left;
    width: 200px;
    height: 200px;
}
#div3{
    background-color: blue;
    float: left;
    width: 220px;
    height: 220px;
}
#div4{
    background-color: black;
    width: 240px;
    height: 240px;
    clear: both;
}

清除浮动2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="clearDiv"></div>
        <div id="div4"></div>
 	</div>
</body>
</html>
#div1{
    background-color: red;
}
#div2{
    background-color: yellow;
    float: left;
    width: 200px;
    height: 200px;
}
#div3{
    background-color: blue;
    float: left;
    width: 220px;
    height: 220px;
}
#div4{
    background-color: black;
    width: 240px;
    height: 240px;
    /*clear: both;*/
}
#clearDiv::after{
    content: "";
    visibility: hidden;
    height: 0px;
    display: block;
    clear: both;
}
#clearDiv{
    zoom:1;
}

练习1-div
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .div1 {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 50%;
        } 
  </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

练习2-div
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .div1 {
            width: 400px;
            height: 400px;
            position: absolute;
            overflow: scroll;
            left: 100px;
        } 
  </style>
</head>
<body>
<div class="div1">
    <img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>

练习3-盒子模型
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>margin外边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
             }
            ul{
                list-style:none;width:300px;height:400px;
                background-color:pink;
                padding-top:40px;
            }
            li{
                width:200px;height:50px;background-color:yellow;
                /*样式补充*/
                margin-top:40px;
                margin-left:40px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width:800px;
            height:400px;
            background-color: skyblue;
            padding-top: 100px;
            box-sizing: border-box;
            margin: 10px 10px 20px 10px;
        }
        .top{
            width:400px;
            height:200px;
            background-color: yellow;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="top"></div>
    </div>
</body>
</html>

练习5-浮动
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: red;
           float:left;
        }
        .div2{
            width: 300px;
            height: 300px;
            background: blue;
            /*此处写代码*/
            float:right;
        }
        .div3{
            width: 100px;
            height: 100px;
            background: green;
           float:inherit;  /*该属性继承为使得DIV3继承父元素的浮动属性*/
           
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2">
        <div class="div3"></div>
    </div>
</body>
</html>

练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
   <style>
       #div1{

           background-color:red;
           width: 100%;
           height: 300px;

       }
       #div2{
          height: 200px;
          width: 25%;
          float: left;
          background-color: yellow;
       }

       #div3{
         height: 200px;
         width: 25%;
         float: right;
         background-color: blue;
       }
   </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div> 
    <div id="div3"></div>
</div>

</body>
</html>

练习7-浮动
<!DOCTYPE html>

<html>

<head>

        <!-- 此处编写样式 -->

        <style>

            #div{

                width:800px;

                /*float:left;

                border:1px;*/

            }

            .div1{

                height:180px;

                width:240px;

                float:left;

                border:1px solid black;

                margin: 10px 10px;

            }

        </style>

</head>

<body>   

        <!-- 此处写代码 -->  

    <div id="div">

        <div class="div1">

            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>

            <p>欢迎来到慕课网学习新知识</p>

        </div>

        <div class="div1">

            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>

            <p>欢迎来到慕课网学习新知识</p>

        </div>

        <div class="div1">

            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>

            <p>欢迎来到慕课网学习新知识</p>

        </div>

        <div class="div1">

            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>

            <p>欢迎来到慕课网学习新知识</p>

        </div>

        <div class="div1">

            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>

            <p>欢迎来到慕课网学习新知识</p>

        </div>

        <div class="div1">

            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>

            <p>欢迎来到慕课网学习新知识</p>

        </div>

    </div>  

</body>

</html>

赞(0)

评论 抢沙发

评论前必须登录!

 

LNMP社群 不仅仅是技术

关于我们网站地图