Frameset，Iframe框架的应用及CSS样表基础

一、在创建网站的过程中，常常要对网站的区域进行划分，如上层或左侧是导航栏，下方或右边是网站的内容，这就需要用到框架。比较常用的就是Frameset和Iframe。首先来说一下Frameset的用法：

1、首先，用Frameset，需要去掉body标签，改用<frameset></frameset>，在frameset中，属性rows是指网页进行上下分，cols则是网页左右分，rows和cols后可以写像素值， frameborder是边框。

其次，frameset的另一个属性既是添加路径，因为如果想要添加另一个页面就需要将他引进来，路径的属性同图片一样是src=“页面地址”，如代码

<frameset cols="200,*" frameborder="1">
<frame src="Untitled-2.html" />
<frame src="Untitled-1.html" />
</frameset>

2、另一种做框架的方法是Iframe，这也是较常用的方法，它也要设置路径属性src="页面地址",还可以设置宽高的像素，这里还常用到一个属性是scrolling，它是滚动条的意思，它与frameset不同的是它不用不掉Body标签，直接可以卸载Body里面。

二、CSS样表是今天的重中之重，因为以后会经常用到，CSS样式表有三种分类，分别是内联式，内嵌式和外部样式表。

1、内联式：

<div style="width:200px; height:100px; border:1px solid #000;">
style="属性1：属性值1；属性2：属性值2；"
</div>

这里最重要是时style后面的属性要用冒号和分号分隔开，上边的solid是实线的意思。内联式一般不常用，比较麻烦，可重用性差。

2、内嵌式：

<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:400px;
height:100px;
border:1px solid #000;
}

内嵌式一般都写在head里边，*对所有标签起作用，标签后边的属性要用大括号括起来，这里选择了div标签就代表body里边所有div的标签都提取出来添加属性，同样所有属性值用分号隔开。

3、外部样式表：外部样式表需要新建一个CSS文件，用来放样式表。注意在CSS中放样式表不要加上<style>标签，当我们需要时可以点击右键选择CSS样式添加外部样式表。标签Link是引用外部样式表，代码如下：

<link href="Untitled-0.css" rel="stylesheet" />

三、再一个就是CSS样式表选择器，如上边内嵌式里边的*是对所有标签起作用，div是用的标签选择器，对所有div起作用。

1、接下来是id选择器，用#开头后边加上id的值，如：

<div id="div-css">
这是第二个div
</div>

我们可以用#div-css来表示：

#div-css{
width:300px;
height:200px;
}

2、class选择器，这里的class是类的意思，class选择器用点开头，后边是class的值，如：

<div class="div-class;">
这是class1

<div class="div-class">

这是class2
</div>

我们可以用.div-class来表示：

.div-class{
width:200px;
}

3、复合选择器是选择两种并列的属性，中间用都好隔开，如：

<div class="q">
我是超人
</div>
<div class="w">
我是蝙蝠侠

我们可以用.q,.w来表示：

.q,.w
{
height:300px;
width:200px;
border:2px solid #F00;
}

4、后代选择器，是标签里边含着一个子标签时，选择子标签时用到的，标签只见要用空格隔开，如：

<ol id="ol1" type="A">
<li>哈哈哈</li>

<li>呵呵呵</li>
</ol>

我们可以用ol li来表示：

ol li
{
border:2px solid #F00;
background-color:#666;
height:200px;
width:200px;
}

 

转载于:https://www.cnblogs.com/mengshenshenchu/p/6539160.html