今天学习的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>
用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>