• 表单元素2(框架、样式表)


    五、框架

    1.frameset是双标签框架集,如果使用框架集,当前页面不能有body。

        frameset属性:①cols代表左右拆分。cols=“300,*”表示左边框架宽300,右边宽剩余的宽度。*代表剩余。

                             ②rows代表上下拆分。rows=“300,*”表示上边框架高300,下边框架高剩余的高度。

                             ③frameborder边框,有边框就设置为1( frameborder="1"),没有边框就设置为( frameborder="0")。

                             ④<frame />属性有a:src 边框要显示的页面的地址;b: scrolling滚动条,有滚动条就设置成yes(scrolling="yes"),没有滚动条就设置成                                                no(scrolling="no")。

                    <frameset cols="300,#">
                    <frame src="样式1.css" />
                    <frame src="样式2.css" />
                    </frameset>

    2.iframe 可以嵌在普通页面里面,其属性中的src表示框架里面要显示的页面的地址。

          src的属性:①width框架的宽度

                         ②height页面的高度

                         ③frameborder边框,有边框就设置为1( frameborder="1"),没有边框就设置为( frameborder="0")。

                         ④scrolling 滚动条,有滚动条就设置成yes(scrolling="yes"),没有滚动条就设置成no(scrolling="no")。

        如果嵌入的页面src属性中设置成“width=0    height=0”,则嵌入的页面就看不到了,但是实际上是存在的。

    3.其它

                 ①<marquee> 双标签,表示滚动效果。<marquee>滚动字条</marquee>。<marquee>属性有<marquee direction="right">表示从左向右滚动,同样的right可以换成right、up、down,分别表示从右到左、从下到上、从上到下滚动。加入图片,图片也可以和字体一样滚动。

                                                               <marquee direction="up">

                                                                    <img src="插入的图片" />
                                                               </marquee>

                 ②<mark></mark>做标记,<mark>字体</mark>,中间的“字体”就被做了标记,颜色变成了黄色。<mark>元素中颜色不可以更改。

                 ③<hr/>做分割线。网页上出现一条分割线。

                 ④ 页面嵌入视频,嵌入视频的方法:a.找到要嵌入的视频

                                                               b.视频左下方点击分享

                                                               c.复制HTML代码  复制flash   复制通用代码

                                                               d.把复制的代码粘贴在页面里面

    样式表

       样式表的作用:样式表的作用是配合标签对网页进行美化,标签把内容放到页面里面,然后样式去操作标签,是网页更加漂亮。样式表分为内联、内嵌、外部三种。

    一、内联:样式写在标签里面,<div style=""></div>。可以具体到每个代码,但是每个控制代码都要写上。优点:控制精确      缺点:代码重用性差。

    二、内嵌:嵌在页面里面,一般嵌在<head>里面。         

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    样式
    </style>
    </head>

            样式表里面的注释语法为/*样式*/。缺点:控制不精确   优点:代码重用性好。

    三、外部:样式表在网页的外部,有一个单独的文件。如果网页的所有控制的样式都是写在另一个文件里面的,则另一个文件就成为外部样式表。使用时要把外部样式表引入到网页文件里。引入方法为:引入:网页文件空白处点击右键-CSS样式表-附加样式表。缺点:控制没有内联的精确    优点:代码重用性最好(一个外部样式表可以用在n个网页上)。

    一般样式表不要写内联的,代码太多、太乱,除非有特殊情况要写。后期主要用外部的。其中,内联优先级最高。

    四、选择器

        选择器就是样式表用来选取元素的。

    1.标签选择器     根据标签名选择元素。           

    <style type="text/css">
    div{ background:#C93}
    </style>
    </head>
    <body>
        <div>123</div>
        <div>456</div>
    <span>789</span>

    div{ background:#C93}表示找到的标签是<div>123</div>和 <div>456</div>。只有这两行显示颜色#C93

    2.class选择器     class称为类,选取一类的元素。class每个元素的属性都有。                    

    <style type="text/css">
    div{ background:#C93}
    .a{ background:#F00}
    </style>
    </head>
    <body>
    <div class="a">123</div>
    <div>456</div>
    <span class="a">789</span>

    class=“a”表示两行都为a类,class选择器根据class名就把这两行归为a类。<div class="a">123</div>和<span class="a">789</span>两行颜色成为了颜色#F00。 .a=class a,。

    3.id选择器   用来精确控制,对要选择的元素命名唯一的id,id选择器找到这个元素(通过id来寻找)主要是内嵌和外联中使用。class每个元素的属性都有。通过id选择器寻找元素只能找到一个元素,因为id是唯一的。id选择器的符号是#。例如下列代码, <div id="d">456</div>的id=d,寻找时#d。        

    <style type="text/css">
    div{ background:#C93}
    .a{ background:#F00}
    #d{ background:#3CF}
    </style>
    </head>
    <body>
    <div class="a">123</div>
    <div id="d">456</div>
    <span class="a">789</span>

    4.复合选择器

    ①逗号并列选择器,用逗号隔开表示是并列的。下列代码同时选择了div和span。

    <style type="text/css">
    div,span{ background:#09F}
    </style>
    </head>
    <body>
    <div class="a">123</div>
    <div id="d">456</div>
    <span class="a">789</span>

    ②空格后代   下列代码表示找到的是4行<li>中的数字。

    #list li{ background:#999}
    </style>
    </head>
    <body>
        <ul id="list">
             <li>11</li>
             <li>22</li>
             <li>33</li>
             <li>44</li>
    
        <ul>

    ③点筛选

    div.s代表筛选 <div class="s">22222</div>

    <div>11111</div>
    
    <div class="s">22222</div>
    <div>33333</div>

    筛选优先等级为   id(优先级高),clss(优先级其次),标签(优先级最低)。

  • 相关阅读:
    Run
    axios+Qs请求数据转表单格式
    Vue开发电子书app
    vue2.5开发去哪儿了流程
    ES6重度学习 demo实例
    JS 数组, 对象的增查改删(多语法对比)
    格式化时间戳的n种方法
    Vue中你忽略的点
    vscode代码格式化
    分隔符
  • 原文地址:https://www.cnblogs.com/Strive-count/p/5856162.html
Copyright © 2020-2023  润新知