zoukankan      html  css  js  c++  java
  • 第六堂课 框架和样式表的基础

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

  • 相关阅读:
    linux命令查询网站
    UTC(世界协调时间)时区和各个时区时间的转换
    dev-c++ 中写完源文件生成exe程序怎么避免运行闪退?
    numpy和time计时程序
    进化算法之粒子群算法和Matlab实现(多维)
    tf.config:GPU 的使用与分配(转载)
    限制TensorFlow只在CPU上运行的方法
    Python重要学习链接
    SpringCloud 之 Nacos 注册配置中心
    Jenkins 自动化部署入门详细教程
  • 原文地址:https://www.cnblogs.com/qishuang/p/6014407.html
Copyright © 2011-2022 走看看