首页 > 代码库 > 第六堂课 框架和样式表的基础
第六堂课 框架和样式表的基础
<iframe src＝"选择一个页面"></iframe>
一个双标签元素，它的主要作用是在浏览页面上添加一个页面
中间可以添加属性来控制页面的大小和其他功能，例如 width＝"页面的宽度" height＝"页面的高度" frameborder＝"0或1"这是控制边框，scrolling＝"yes或no"这是是否显示滚动条的意思，如果高和宽都为0，则在页面上看不到了，但被隐藏的页面依然在运行着
再说一个双标签元素， <frameset></frameset> 如果有它，就不要<body></body>了
<frameset cols＝"300，700">
cols是左右分的意思，也可以用属性词rows，它是代表上下分。如果左边的数是300，左边的是*，那右边就是占剩下所有的像素，举个例子
<frameset cols＝"300，*">
< frame src＝"网页地址"/>
<frame src＝"网页地址"/>
</frameset>
嵌入两个网页，左边是300，右边是*，就是除去300剩下占所有
再说一下制作滚动文字
在<body></body>内制作
<marquee>滚动文字</marquee>
在marquee后面也可以添加一些属性，滚动属性是direction，决定文字的滚动方向
在内容滚动文字那里也可以换成图片< img src＝"图片路径"/>
举个可以设定一行字出现效果的例子
<span><mark>苹果</mark>很好吃</span>
苹果这两个字那里会有黄色背景色
<hr/>可以制作分割线，要几条就在相应的行，写几个
也可以把视频嵌入到网页上，比如优酷，可以点击分享，选择复制通用代码，粘贴到代码页就可以把视频嵌入到网页上了
下面说一下样式表的基础
1、内联
在<body>的区域里写
<div style＝"样式">hello</div>
2、内嵌写在页面里面的
在<head>区域内写这个双标签
<style type＝"text/css"></style>
3、外部样式表是在网页以外的样式表
选择css创建保存
在<head>区域内，单击点css样式表点附加表，会出来< link href＝"test.css" rel＝"stylesheet" type＝"text/css"/>
内联样式优点，控制精确
缺点，代码重用性差，页面代码乱
内嵌样式优点，代码重用性好
缺点，控制不精确
外部样式优点，代码重用性最好
缺点，控制是最不精确的
一般用外部样式表，浏览器会有缓存
内联的样式优先级最高，内嵌其次，最后外部和内嵌一样
例<div style＝"color:#F00">hello</div>
这是内联，样式名:样式值，多个样式之间用分号隔开
内嵌 <style type＝"tee/css">
</style>
*{color:#60F}
*代表元素所有元素
#{color:#0F0}
#代表id选择器
.cl{color:#630}
<div class＝"cl">文字</div>
用id举个例子
用<div></div>控制内容
< div id＝"d1">准确控制</div>
id＝""同一个页面是不能重复的，里面取的代号不能使用中文打头，可以用英文打头
标签选择器
<span>这是span1</span>
<span>这是span2</span>
span{color:#cF6}
如果是div，就是div{color:#cF6}
样式表的注释语法是/**/
四中选择器优先级区分
标签选择器要大于星号的
class选择器要大于标签选择器
id选择器要大于class选择器
越精准优先级越高
复合选择器并列
<div>测试一</div>
<span>测试二</span>
div,span{color:#60F}
,是并列的效果
<div id＝"d3">
<div>后代1</div>
<div>后代2</div>
</div>
#d3空格div{color:#60F}
空格代表子级
<ul＝"u1">
<li>列表1</li>
<li>列表2</li>
</ul>
#u1空格li{color:#F66}
div.cl{color:#F60}是从所有div里找到class＝cl的，仅代表class,如果找id是不可以的
第六堂课 框架和样式表的基础