View Code

第六堂课 框架和样式表的基础

 <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是不可以的

posted @ 2016-10-30 23:18  风中摇曳的小花朵  阅读(202)  评论(0编辑  收藏  举报