HTML与CSS样式详解-优快云博客

frameset妗嗘灦

frameset涓?/span>body娌℃硶鍚屾椂浣跨敤锛?/span>frameset鐢ㄦ潵鍒嗗壊椤甸潰锛?/span>frame鍦╢rameset鐢ㄤ簬寮曠敤鍏朵粬缃戦〉

1 <frameset rows="100,*" frameborder="no">    --涓婁笅鍒嗭紝绗竴琛?00鍍忕礌锛屽墿浣欎负绗簩琛岋紱rows鎹㈡垚cols锛屽垯涓婁笅鍒嗗彉涓哄乏鍙冲垎銆俧rameborder=鈥渘o鈥濓紝鍘绘帀鍒嗗壊绾裤€?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锛屾粴鍔ㄦ潯銆傚鏋滆缃珮鍜屽涓?/span>0锛屽垯涓嶆樉绀猴紝浣嗘槸鍦ㄥ悗鍙颁細瀛樺湪杩欎箞涓€涓〉闈?/span>锛岃椤甸潰浼氬湪鍚庡彴鍒峰彇娴侀噺銆?/p>

閫夋嫨鍣?/span>

1銆佹爣绛鹃€夋嫨鍣ㄣ€傜敤鏍囩鍚嶅仛閫夋嫨鍣ㄣ€?/p>

1 <style type= "text/css">
2     p    //鏍煎紡瀵筽鏍囩璧蜂綔鐢?/span>
3     {
4         鏍峰紡;
5     }
6     </style>

2銆乧lass閫夋嫨鍣ㄣ€傞兘鏄€?鈥濆紑澶淬€?/p>

 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銆両D閫夋嫨鍣ㄣ€備互鈥?鈥濆紑澶?/p>

 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銆佸鍚堥€夋嫨鍣ㄣ€?/p>

1锛?span style="font-family: 瀹嬩綋">鐢?/span>鈥滐紝鈥濋殧寮€锛岃〃绀哄苟鍒椼€?/p>

1  <style type="text/css">
2     p锛宻pan    /*鏍囩p銆乻pan涓よ€呭悓鏍风殑鏍峰紡*/
3     {
4         鏍峰紡;
5     }
6     </style>

2锛夌敤绌烘牸闅斿紑锛岃〃绀哄悗浠ｃ€?/p>

1  <style type="text/css">
2     .main p    /*鎵惧埌浣跨敤鏍峰紡鈥渕ain鈥濈殑鏍囩锛屽湪璇ユ爣绛鹃噷鐨凱鏍囩浣跨敤璇ユ牱寮?/span>*/
3     {
4         鏍峰紡锛?5     }
6     </style>

3锛?span style="font-family: 瀹嬩綋">绛涢€?/span>鈥?鈥濄€?/p>

1     <style type="text/css">
2     p.sp    /*鍦ㄦ爣绛緋涓殑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閫夋嫨鍣?/span>*/
 8             #div1{
 9                 width: 100px;
10                 height: 100px;
11                 background-color: blue;
12             }
13             /*class閫夋嫨鍣?/span>*/
14             .div2{
15                 width: 100px;
16                 height: 100px;
17                 background-color: green;
18             }
19             /*鏍囩閫夋嫨鍣?/span>*/
20             div{
21                 border: 5px solid #000;
22             }
23             /*鍏ㄥ眬閫夋嫨鍣?/span>*/
24             *{
25                 margin: 0px;
26                 padding: 0px;
27             }
28             /*澶嶅悎閫夋嫨鍣?/span>*/
29                 /*瀛愪唬閫夋嫨鍣?/span>*/ 30  .div3 span{ 31  color: red; 32  } 33 /*骞跺垪閫夋嫨鍣?/span>*/ 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>鍑犱釜瀛?lt;/span> 61 </div> 62 <div class="div4"> 63 <span>鍑犱釜瀛?lt;/span> 64 </div> 65 <div shuxing="abc"></div> 66 <a href="http://www.baidu.com">瓒呯骇閾炬帴</a> 67 </body> 68 </html>

閫夋嫨鍣ㄩ殢鍫?/span>

rdhbygb