0908期 HTML Frameset框架和选择器

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>
选择器随堂

 

 

 

 

 

posted @ 2017-09-13 00:08  C.E  阅读(238)  评论(0)  编辑  收藏  举报