?
今天學習的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方向外邊距都20pxmargin:20px 40px；像素值1 像素值2;表示margin-top和bottom 20px，margin-left和right40pxmargin:20px 40px 60px 80px;像素值1 像素值2 像素值3 像素值4;表示4個方向 top left bottom right 順時針方向邊框:border內邊距:paddingmargin重疊現象：只要有一個元素沒有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>
?
)
