0908期 HTML Frameset框架和選擇器
阿新 • • 發佈：2017-09-13
裏的 shu abc opened 顯示 tran 超級鏈接 spa 原來 
frameset框架
frameset與body沒法同時使用，frameset用來分割頁面，frame在frameset用於引用其他網頁
1 <frameset rows="100,*" frameborder="no"> --上下分，第一行100像素，剩余為第二行；rows換成cols，則上下分變為左右分。frameborder=“no”，去掉分割線。 2 <frame src="頁面地址" noresize="noresize"> --noresize，禁止窗口調整大小 3 <frame src="" scrolling="no"> --scrolling="no",取消顯示滾動條 4 </frameset>
iframe在原來頁面嵌入小窗口顯示其他頁面
1 <iframe src="其他頁面的地址" width="" height="" frameborder="0" scrolling="no"></iframe>
frameborder，邊線；scrolling，滾動條。如果設置高和寬為0，則不顯示，但是在後臺會存在這麽一個頁面，該頁面會在後臺刷取流量。
選擇器
1、標簽選擇器。用標簽名做選擇器。
1 <style type= "text/css"> 2 p //格式對p標簽起作用 3 { 4 樣式; 5 } 6 </style>
2、class選擇器。都是“.”開頭。
1 <head> 2 <style type="text/css"> 3 .main /*定義樣式*/ 4 { 5 height:42px; 6 width:100%; 7 text-align:center; 8 } 9 </style> 10 </head> 11<body> 12 <div class="main"> <!--調用class樣式--> 13 </div> 14 </body>
3、ID選擇器。以“#”開頭
1 <head> 2 <style type="text/css"> 3 #main /*定義樣式*/ 4 { 5 height:42px; 6 width:100%; 7 text-align:center; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="main"> <!--調用id樣式--> 13 </div> 14 </body>
4、復合選擇器。
1）用“，”隔開，表示並列。
1 <style type="text/css"> 2 p，span /*標簽p、span兩者同樣的樣式*/ 3 { 4 樣式; 5 } 6 </style>
2）用空格隔開，表示後代。
1 <style type="text/css"> 2 .main p /*找到使用樣式“main”的標簽，在該標簽裏的P標簽使用該樣式*/ 3 { 4 樣式； 5 } 6 </style>
3）篩選“.”。
1 <style type="text/css"> 2 p.sp /*在標簽p中的class="sp"的標簽，執行以下樣式*/ 3 { 4 樣式; 5 } 6 </style>
隨堂
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title></title> 5 <link rel="stylesheet" href="css/css1.css" /> 6 <style> 7 /*id選擇器*/ 8 #div1{ 9 width: 100px; 10 height: 100px; 11 background-color: blue; 12 } 13 /*class選擇器*/ 14 .div2{ 15 width: 100px; 16 height: 100px; 17 background-color: green; 18 } 19 /*標簽選擇器*/ 20 div{ 21 border: 5px solid #000; 22 } 23 /*全局選擇器*/ 24 *{ 25 margin: 0px; 26 padding: 0px; 27 } 28 /*復合選擇器*/ 29 /*子代選擇器*/ 30 .div3 span{ 31 color: red; 32 } 33 /*並列選擇器*/ 34 .div3,.div4{ 35 width: 100px; 36 } 37 38 [shuxing=abc]{ 39 width: 100px; 40 height: 100px; 41 } 42 43 a{ 44 color: black; 45 text-decoration: none; 46 } 47 48 .div4:hover{ 49 cursor: pointer; 50 transform: rotate(45deg); 51 transition: 1s; 52 } 53 </style> 54 </head> 55 <body> 56 <div style="width: 100px;height: 100px;background-color: red;"></div> 57 <div id="div1"></div> 58 <div class="div2"></div> 59 <div class="div3"> 60 <span>幾個字</span> 61 </div> 62 <div class="div4"> 63 <span>幾個字</span> 64 </div> 65 <div shuxing="abc"></div> 66 <a href="http://www.baidu.com">超級鏈接</a> 67 </body> 68 </html>選擇器隨堂
0908期 HTML Frameset框架和選擇器