第三十七天
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<!-- 畫梯形 -->
<style type="text/css">
.bd { width: 100px;
height: 100px;
background-color: transparent; } .bd { /*border: 50px solid orange;*/ border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; /*border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent;*/ } </style> <!-- 畫三角形 --> <style type="text/css"> .bd { width: 0; height: 0; } .bd { border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; } /*吃球球的小球*/ /*.bd { border-radius: 50%; border-right: 50px solid transparent; }*/ </style> </head> <body> <div class="bd"></div> </body> </html> 盒模型overflow <<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>盒模型overflow</title> <!-- 顯示區域只能由父級大小決定 --> <style type="text/css"> /*子集區域大於父級*/ .sup { width: 100px; height: 100px; /*默認值*/ /*border: 3px none black;*/ /*清除邊框*/ /*border: 0;*/ /*border: none;*/ /*最簡單的設置*/ border: solid; } .sub { width: 200px; height: 200px; background-color: red;
} 對父級進行overf設置 .sup { 以滾動的方式允許子級所有的內容顯示 overflow: auto; overflow: scroll; 只允許子級在父級所在區域的部分顯示，超出的部分隱藏 overflow: hidden; } </style> </head> <body> <!-- displ：block大環境下 --> <div class="sup"> <div class="sub"></div> </div> <div class="sup"> alk fja klj ffj af..... </div> </body> </html>
復習1 <<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>復習</title> <!-- head中css樣式控制body中顯示的標簽 --> <style type="text/css"> /*通過選擇器控制對應標簽*/ /*選擇器的各種分類*/ /*選擇器的組合與優先級*/ .d1 { width: 200px; height: 200px; background-color: red; } /*文本*/ .d1 { font: 700 50px/200px "STsong"，"微軟雅黑"; text-align: center; color: #d0f; letter-spacing: 10px; } /*邊框*/ .d1 { /*邊框設置大小顏色*/ border: 7px solid orange; } /*邊界元角*/ .d1 { /*"/"符號是橫向和縱向分開*/ border-radius: 10px 20px 30px/ 20px 10px; } /*背景*/ .d1 { /*圖片所放的文件夾加圖片名字格式 平鋪 居中 顏色* / background: url(‘img/alert.png‘) no-repeat center red; } </style> </head> <body> <!-- 常用標簽 --> <!-- 功能性標簽 --> <!-- 標簽架構 -->
<div class="d1">文本</div> </body> </html>
display
<<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>盒模型display</title> <!-- 默認值 --> <style type="text/css"> /*塊：1.獨行顯示 2、支持寬高，寬默認適應父級，高默認由子級或內容撐開 3、設置寬高後，一定采用設置的寬高*/ /*內聯：1.同行顯示 2、不支持寬高*/ /*內聯塊：1、同行顯示，之間有間距 2、支持寬高，寬高由內容撐開 3、設置寬高後，一定采用設置的寬高但只設置其中一個，另一個會根據內容等比縮放*/ /*嵌套規則*/ /*塊可以嵌套所有類型（p一般只允許嵌套內聯）*/ /*內聯一般只嵌套內聯*/ /*內聯塊一般只作為最內層級*/ div { /*塊*/ display: block; /*auto自適應父級可用content的寬度*/ width: auto; /*默認0*/ height: 0px; } span { /*內聯*/ display: inline; /*不支持寬高*/ } img { /*內聯塊*/ display: inline-block; /*寬和高都可以是auto*/ width: auto; height: auto; } </style>
<style type="text/css"> /*驗證寬高限制*/ .sup { width: 100px; height: 100px; background-color: orange; } .sub { width: 200px; height: 200px; background-color: blue; } .s1, .s2 { width: 200px; height: 200px; background-color: brown; } img { width: 300px; height: 300px; } </style> </head> <body> <div></div> <span></span> <!-- 路徑前面加個. --> <img src="./img/icon.jpg" > <img src="./img/icon.jpg" > <div class="sup"> <div class="sub"></div> </div> <div class="s1">123</div> <div class="s2">456</div>
</body> </html>
margin
<<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> 前提：sup顯示區域寬全屏，高200px，sub顯示區域寬高各100px 需求1、sup左上右頂格顯示 html, body { body 默認具有margin：8px margin: 0; } .sup { width: auto; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } 需求2：sub在sup的水平中央顯示 .sub { 上下0，左右auto zuto，左右auto，自適應（平分）剩余可布局空間 margin: 0 auto; } 需求3：sub在sup的垂直中央顯示 垂直會遇到margin父子坑 .sup { height: 100px; padding: 50px 0; } .sup { height: 100px; border-top: 50px solid red; border-bottom: 50px solid red; } 需求4：sub在sup的水平居右顯示 .sub { margin-left: auto; 可以通過right調位置 margin-right: 0; } </style> </head> <body> <div class="sup"> <div class="sub"></div> </div> </body> </html>
盒模型之樣式支持 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>樣式支持</title> <style type="text/css"> a { color: #333; text-decoration: none; display: block; } </style> <style type="text/css"> .sup { width: 500px; height: 500px; background-color: red; } 水平居中 display對margin的支持 block支持所有margin布局 inline與inline-block只支持margin上下布局 .sub { display: block; margin: 0 auto; } 垂直居中 .sup { 去除高度設置 padding: 50px 0; } </style> 水平垂直居中這種方法比較實用 <style type="text/css"> .box { width: 500px; height: 500px; background: url(圖片位置) no-repeat center orange; } </style> </head> <body> 認識a標簽的操作 需求：具有頁面轉跳功能的圖片 <a href=""> <img src="圖片位置" > </a> 圖片在sup水平垂直中央顯示 part1 <div class="sup"> <img class="sub" src="" > </div> part2 <div class="box"></div> </body> </html>
層級結構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>層級結構</title> <style type="text/css"> .d5 { width: 200px; height: 100px; background: red; } .d2, .d3, .d4 { width: 80px; height: 40px; background: orange } /*.d4 { margin-left: 160px; margin-top: -80px; }*/ .d3 { margin-left: 80px; margin-top: -40px; } .d4 { margin-left: 160px; margin-top: -40px; } /*沒有層級結構情況下:*/ /*1.盒子布局間相互影響程度很大*/ /*2.要嚴格遵循從上至下布局順序進行布局*/ /*問題點:牽一發動全身*/ </style> <style type="text/css"> .menu { width: 200px; height: 100px; background: red; } .html, .css, .js { width: 80px; height: 40px; background: orange } .nav { width: calc(80px * 3); height: 40px; } .css { margin-top: -40px; margin-left: 80px; } .js { margin-top: -40px; margin-left: 160px; } /*menu的布局只與nav有連帶關系,與實際顯示內容的html,css,js不具有任何連帶關系*/ </style> </head> <body> <!-- 無層次結構 --> <!-- <div class="d1">w3c</div> <div class="d2">html</div> <div class="d3">css</div> <div class="d4">js</div> <div class="d5">menu</div> --> <!-- 有層次結構 --> <div class="title">w3c</div> <div class="nav"> <div class="html">html</div> <div class="css">css</div> <div class="js">js</div> </div> <div class="menu">menu</div> </body> </html>
隱藏
<<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>隱藏</title> <style type="text/css"> 盒子間會相互影響 div { width: 200px; height: 200px; } .d1 { background-color: red; 以背景顏色透明度隱藏，顯示內容不需要掌握 盒子還在，內容或子級標簽均會被顯示 background-color: transparent; } .d2 { background-color: orange; 以盒子透明度隱藏:0~1 0:完全透明，1：完全不透明; 盒子真正意義上透明，但盒子區域占位還在 opacity: 0 } .d3 { background-color: cyan; 將盒子從文檔中移除，盒子的區域占位消失，當盒子重新獲得顯示方式，該盒子依舊在消失位置顯示 display: none; } 通過懸浮body讓d3重新顯示 1、明確控制的對象 2、確定對該對象的修飾 2、找出修飾與對象的關系 body：hover 與.d3是父子關系 用空格分開 .d1：hover .d3 兄弟關系用~分開 .di:hover ~ .d3 {
} </style> </head> <body> <div class="d1">123</div> <div class="d2">456</div> <div class="d3"></div> </body> </html>
w3c總結 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>w3c</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/top.css"> </head> <body> <div class="wrap"> <div class="top"> <div class="start"> <h1 class="title"></h1> <div class="search"> <div class="sc_position"> <div class="s_p_border"></div> <div class="s_p_btn">GO</div> </div> </div> </div> <div class="nav"> <div class="n_tt1"></div> <div class="n_tt2"></div> <div class="n_tt3"></div> <div class="n_tt4"></div> <div class="n_tt5"></div> <div class="n_tt6"></div> <div class="n_tt7"></div> </div> </div> <div class="main"></div> <div class="end"></div> </div> </body> </html>
reset.css html, body { margin: 0; padding: 0; } .wrap { width: 1200px; /*高度不設:由內容撐開*/ } h1 { margin: 0; }
top.css .top { /*寬度找父級:wrap*/ /*height: 148px;*/ /*子級都設置高度後,反過來可以省略父級的高度*/
background: red } .start { /*寬度找父級:wrap*/ /*height: 100px;*/ /*子級都設置高度後,反過來可以省略父級的高度*/
/*統一顏色*/ background-color: #fdfcf8; } .title { /*有明確顯示寬度,自己設置*/ width: 500px; height: 100px; background: url(‘../img/w3c/bg.png‘) no-repeat 0 -150px; } .title:hover { /*只修改精靈圖定位*/ background-position: 0 -250px; } .search { width: 300px; /*height: 100px;*/ /*background-color: orange;*/ /*margin-left: auto; margin-right: 0; margin-top: -100px;*/ margin: -100px 0 0 auto; } .sc_position { width: 280px; height: 40px; /*background-color: cyan;*/ } /*實現sc_position在search垂直居中*/ .search { /*寬度不變*/ /*高度為子級同高,自己不做設置*/ /*通過padding實現居中*/ padding: calc((100px - 40px) / 2) 0; } .s_p_border { width: calc(100% - 50px); /*height: 40px;*/ height: 36px; /*background-color: yellow;*/ border: 2px solid #333; border-radius: 5px; } .s_p_btn { width: 40px; height: 40px; background-color: brown; margin: -40px 0 0 auto; font: 700 18px/40px "微軟雅黑"; text-align: center; color: #fff; cursor: pointer; border-radius: 4px; /*不允許選中文本*/ user-select: none; }
.nav { /*寬度找父級:wrap*/ height: 48px; }
第三十七天