• 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="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{
    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{
    300px;
    height:200px;
    }

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

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

    <div class="div-class">

    这是class2
    </div>

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

    .div-class{
    200px;
    }

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

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

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

    .q,.w
    {
    height:300px;
    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;
    200px;
    }

  • 相关阅读:
    团队冲刺个人总结第二天
    Gym
    Codeforces Round #162 (Div. 2) A~D 题解
    Wormholes 虫洞 BZOJ 1715 spfa判断负环
    修剪草坪 单调队列优化dp BZOJ2442
    没有上司的舞会 树形dp
    餐巾计划问题 费用流
    最小路径覆盖问题 最大流
    [JSOI2007]麻将 模拟 BZOJ1028
    CF702F T-Shirts FHQ Treap
  • 原文地址:https://www.cnblogs.com/mengshenshenchu/p/6539160.html
Copyright © 2020-2023  润新知