07 CSS-CSS布局【尚硅谷JavaWeb教程】

最新推荐文章于 2024-06-12 22:40:10 发布

Blueming_first

最新推荐文章于 2024-06-12 22:40:10 发布

阅读量223

点赞数

分类专栏： JavaWEB 文章标签： css html 前端

本文链接：https://blog.csdn.net/Cypresszky/article/details/128806866

版权

JavaWEB 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

07 CSS-CSS布局【尚硅谷JavaWeb教程】

JAVAWEB的学习笔记
学习视频来自：https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source=75dce036dc8244310435eaf03de4e330

使用的html5 照着敲和老师的效果不一样（html4.7）,html5 是根据内容来变化高度的。
position: absolute --绝对定位，需要配合使用left，top
relative – 相对定位，一般会和float，margin，padding … 一起使用

<!DOCTYPE html> <!--这是html5版本-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 内部样式表 -->
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #div1{
            /*绝对定位*/
            position: absolute;
            /*指定 x y轴距离*/
            left: 100px;
            top: 100px;

            width: 200px;
            height: 50px;
            background-color: chocolate;
        }

        #div2{
            /*相对定位 float 浮动*/
            position: relative;
            float: left;
            margin-left: 20px;

            width: 200px;
            height: 50px;
            background-color: aqua;

        }

        #div3{

            height: 50px; /*在html5中高度是失效的*/
            background-color: blue;
        }
        #div4{
            width: 200px;
            height: 50px; /*在html5中高度是失效的*/
            background-color: red;

            float: left;
        }
        #div5{
            width: 200px;
            height: 50px; /*在html5中高度是失效的 和老师效果不一样*/
            background-color: coral;
            float: left;
        }
        div{
            position: relative;
        }
    </style>
</head>
<body>
<!--    <div id="div1">&nbsp;</div>-->
<!--    <div id="div2">&nbsp;</div>-->
    <div id="div3">
        <div id="div4">&nbsp;</div>
        <div id="div5">&nbsp;</div>
    </div>

</body>
</html>

<!--
position: absolute --绝对定位，需要配合使用left，top
          relative -- 相对定位，一般会和float，margin，padding ... 一起使用
-->
```

```html
<!DOCTYPE html> <!--这是html5版本-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 内部样式表 -->
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: dimgrey;
        }
        div{
            position: relative;
        }
        #div_top{
            background-color: #03ec58;
            height: 20%;

        }
        #div_left{
            background-color: #ef9d5e;
            height: 80%;
            width: 15%;
            float: left;
        }
        #div_main{
            background-color: #5683f5;
            height: 70%;
            float: left;
            width: 85%;
        }
        #div_bottom{
            background-color: #e8779f;
            height: 10%;
            width: 85%;
            float: left; /*解决左边空隙和参照物问题*/
        }
        #div_container{
            width: 80%;
            height: 100%;
            border: 1px solid blue;
            margin-left: 10%;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div_container">
        <div id="div_top">div_top</div>
        <div id="div_left">div_left</div>
        <div id="div_main">div_main</div>
        <div id="div_bottom">div_bottom</div>
    </div>

</body>
</html>

<!--
position: absolute --绝对定位，需要配合使用left，top
          relative -- 相对定位，一般会和float，margin，padding ... 一起使用
-->




```