0908期 HTML Frameset框架和选择器

frameset框架

frameset与body没法同时使用,frameset用来分割页面,frame在frameset用于引用其他网页

 <frameset rows="100,*" frameborder="no">    --上下分,第一行100像素,剩余为第二行;rows换成cols,则上下分变为左右分。frameborder=“no”,去掉分割线。
<frame src="页面地址" noresize="noresize">    --noresize,禁止窗口调整大小
<frame src="" scrolling="no">    --scrolling="no",取消显示滚动条
</frameset>

iframe在原来页面嵌入小窗口显示其他页面

 <iframe src="其他页面的地址" width="" height="" frameborder="" scrolling="no"></iframe>

frameborder,边线;scrolling,滚动条。如果设置高和宽为0,则不显示,但是在后台会存在这么一个页面,该页面会在后台刷取流量。

选择器

1、标签选择器。用标签名做选择器。

 <style type= "text/css">
p    //格式对p标签起作用
{
样式;
}
</style>

2、class选择器。都是“.”开头。

     <head>
<style type="text/css">
.main     /*定义样式*/
{
height:42px;
width:%;
text-align:center;
}
</style>
</head>
<body>
<div class="main">       <!--调用class样式-->
</div>
</body>

3、ID选择器。以“#”开头

 <head>
<style type="text/css">
#main     /*定义样式*/
{
height:42px;
width:%;
text-align:center;
}
</style>
</head>
<body>
<div id="main">       <!--调用id样式-->
</div>
</body>

4、复合选择器。

1)用“,”隔开,表示并列。

  <style type="text/css">
p,span    /*标签p、span两者同样的样式*/
{
样式;
}
</style>

2)用空格隔开,表示后代。

  <style type="text/css">
.main p    /*找到使用样式“main”的标签,在该标签里的P标签使用该样式*/
{
样式;
}
</style>

3)筛选“.”。

     <style type="text/css">
p.sp /*在标签p中的class="sp"的标签,执行以下样式*/
{
样式;
}
</style>

随堂

 <html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/css1.css" />
<style>
/*id选择器*/
#div1{
width: 100px;
height: 100px;
background-color: blue;
}
/*class选择器*/
.div2{
width: 100px;
height: 100px;
background-color: green;
}
/*标签选择器*/
div{
border: 5px solid #;
}
/*全局选择器*/
*{
margin: 0px;
padding: 0px;
}
/*复合选择器*/
/*子代选择器*/
.div3 span{
color: red;
}
/*并列选择器*/
.div3,.div4{
width: 100px;
} [shuxing=abc]{
width: 100px;
height: 100px;
} a{
color: black;
text-decoration: none;
} .div4:hover{
cursor: pointer;
transform: rotate(45deg);
transition: 1s;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<div id="div1"></div>
<div class="div2"></div>
<div class="div3">
<span>几个字</span>
</div>
<div class="div4">
<span>几个字</span>
</div>
<div shuxing="abc"></div>
<a href="http://www.baidu.com">超级链接</a>
</body>
</html>

选择器随堂

上一篇:POJ1236 Network of Schools (强连通)(缩点)


下一篇:js尾巴