330 div+css Experience

今天学习的div，感觉对编辑html更为方便快捷，但还是需要多练，多熟悉一下思路和逻辑方式

越来越感觉，代码不是重要的，重要的是方向和思路，am的float clearfloat 及属性，还有overflow 溢出的三个属性
最重要的是边框左圣诞树做div的布局算数把我整蒙圈了，用border四个边距设置来做三角形是重点
下午学的盒子内外边距边框border margin的重叠取值和顺序
还有css的初始化

一：div不是功能标签，可以放文字、图片各种元素的块标签，常常用来布局

float浮动：left，right 左右属性

清除浮动：clear：left，right，both左右一起清除

二：溢出

overflow：hidden超出会隐藏，scroll 滚动条，auto 超出有滚动，反之。

三：用边框样式做：圣诞树三角形

border-top：顶

border-left：左

border-right：右

border-bottom：底

PM：

盒子模型：外边距：margin 边框：border 内边距：padding

margin重叠现象：只要有一个元素没有float ，就会出现重叠，这时取相邻最大值

margin的顺序：上有下左（顺时针）

CSS初始化：

*{margin:0px;

padding:0px;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div</title>
        <!-- <div></div>不是功能标签
        可以放文字、图片及各种元素的块标签 常常用来布局 -->
<style>
    #d1{
        background-color:blue;
        width:200px;height:50px;
        float: left;
    }
    #d2{
        background-color:red;
        width:200px;height:50px;
        /* float浮动属性:left,right. */
        float: right;
    }
    #d3{
        background-color:green;
        height: 200px;
        /* 清除浮动 ：left，right，both左右一起清除*/
        clear:both;
        /* 溢出处理 
         内容超出div会隐藏
        overflow: hidden; */
    /* 不管内容是否超出,都会加滚动条   
        overflow: scroll;
       内容不超出div没有滚动条,超出自动添加滚动条 */
         overflow: auto;
      /* overfl的属性只能有一个存在 */
      }
    #header{
        width: 0px;    height: 0px; 
        border-top: 100px solid white;    
        border-right: 100px solid white;    
        border-bottom: 100px solid green;    
        border-left: 100px solid white;    
        float: left;
        margin-left: 100px;    }    
    #main{    width: 0px;    height: 0px;
        border-top: 200px solid white;
        border-right: 200px solid white;
        border-bottom: 200px solid green;
        border-left: 200px solid white;    } 
    #footer{
        width: 100px;
        height: 300px;
        background-color: darkolivegreen;
        margin-left: 150px;    }
        li{
            list-style-type: none;
            float:left;
            margin: 20px;
        }
        /* 盒子模型:
            外边距:margin
语法：
    margin:20px；像素值; --表示4方向外边距都20px
    margin:20px 40px；像素值1 像素值2;表示margin-top和bottom 20px，margin-left和right40px
    margin:20px 40px 60px 80px;像素值1 像素值2 像素值3 像素值4;表示4个方向 top left bottom right 顺时针方向
            边框:border
            内边距:padding
        margin重叠现象：只要有一个元素没有float属性，就会出现重叠现象，这时取相邻最大值*/
        /* CSS初始化:
        *{
            margin: 0px; padding: 0px;
        } */
        #big{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        #small1{
            width: 150px;
            height: 150px;
            background-color: red;
            border: 20px solid #00FFFF;
            /* margin值的顺序是 上右下左 */
            margin: 10px 20px 40px;
            padding: 10px;
            }
        #small2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float:left;
            margin: 10px;
        }
        #small3{
            width: 100px;
            height: 100px;
            background-color: magenta;
            margin:30px;}
        #small4    {
            width: 100px;
            height: 100px;
            background-color: pink;
            clear: both;
            margin: 20px;
        }
</style>    
    </head>
    <body>
    <body id="big">
        <div id="d1">我是左div</div>
        <div id="d2">我是右div</div>
        <div id="d3">我是第三div</div>
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>
        <div id="small1">戒指</div>
        <div id="small2"></div>
        <div id="small3"></div>
        <div id="small4"></div>
    </div>    
    <ul>
        <li>首页</li>
        <li>新闻</li>
        <li>学校概况</li>
    </ul>
    </body>
</html>

View Code

用border做圣诞树

<title>边框样式圣诞树</title>
        <style>
            #a1{
                width: 0px;height: 0px;
                background-color: antiquewhite;
                border-top: 0px solid #00FFFF;
                border-right: 100px solid white;
                border-bottom: 100px solid darkgreen;
                border-left: 100px solid white;
                margin-left: 340px;
            }#a2{
                width: 0px;height: 0px;
                background-color: antiquewhite;
                border-top: 0px solid #00FFFF;
                border-right: 200px solid white;
                border-bottom:200px solid darkgreen;
                border-left: 200px solid white;
                margin-left: 240px;
            }#a3{
                width: 0px;height: 0px;
                background-color: antiquewhite;
                border-top: 00px solid #00FFFF;
                border-right: 300px solid white;
                border-bottom: 300px solid darkgreen;
                border-left: 300px solid white;
                margin-left: 140px;
            }#a4{
                width: 80px;height: 530px;
                background-color: orangered;
                margin-left: 400px;
            }
            
        </style>
    </head>
    <body>
        <div id="a1"></div>
        <div id="a2"></div>
        <div id="a3"></div>
        <div id="a4"></div>
    </body>

用div做方格子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>方格子</title>
    <style >
            *{margin:0px;padding:0px;}
        #aa{width: 750px;
            background-color: lightgray;
        }
        #a1{width: 150px;height:150px;
        background-color: red;
        float: left;                
        }
        #a2{width: 150px;height:150px;
        background-color: blue;
        float: left;                
        }
        #a3{width:150px;height:150px;
        background-color: blanchedalmond;
        float: left;                
        }
        #a4{width:150px;height:150px;
        background-color: aquamarine;
        float:left;                
        }
        #a5{width:150px;height:150px;
        background-color: palegreen;
        float:right;                
        }
        #a6{height:200px;width:480px;
        background-color: cyan;
        float: left;
        }
         #a7{width: 270px;height:275px;
        background-color:ivory;
        float: right;    
        } 
        #a8{height:200px;width:330px;
        background-color: darkorange;
        float: left;}
        #a10{width: 270px;height:275px;
        background-color: red;
        float: right;    } 
        #a11{width: 480px;height:150px;
        background-color: green;    
        }
        #a12{width: 100%;height:150px;
        background-color: orchid;
        float: left;
        }
        #a9{height:200px;width:150px;
        background-color: greenyellow;
        float: left;}
    </style>
</head>
    <body id="aa">
        <div id="a1">这是1</div>
        <div id="a2">这是2</div>
        <div id="a3">这是3</div>
        <div id="a4">这是4</div>
        <div id="a5">这是5</div>
        <div id="a6">这是6</div>
        <div id="a7">这是7</div>
        <div id="a8">这是8</div>
        <div id="a9">这是9</div>
        <div id="a10">这是10</div>
        <div id="a11">这是11</div>
        <div id="a12">这是12</div>
    </body>
</html>