博客列表 >HTML中内联框架标签的使用及CSS基础

HTML中内联框架标签的使用及CSS基础

Laravel框架学些
Laravel框架学些原创
2019年09月05日 00:23:251458浏览
  1. 内联框架<iframe>标签

    内联框架主要用于在网页中显示另一个网页,相当于在网页中嵌套了一个网页,如下拉网页时浮动视频,后台操作系统框架页面。


    1. 实例

      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>内联框架学习</title>
      </head>
      
      <body>
          <h1>内联框架</h1>
          <ul style="float:left">
              <li><a href="https://www.php.cn" target="main">产品管理</a></li>
              <li><a href="https://www.php.cn" target="main">新闻管理</a></li>
              <li><a href="https://www.php.cn" target="main">用户管理</a></li>
              <li><a href="https://www.php.cn" target="main">分类管理</a></li>
          </ul>
          <iframe srcdoc="<h1>CMS</h1>" frameborder="1" name="main" width="400" height="500"
    2. style="float:left"></iframe>
      </body>
    3. </html>

      运行实例 »

      点击 "运行实例" 按钮查看在线实例

      运行结果:

      1.png

      2.CSS基础知识

      2.1 CSS引入方法 一般有三种:

      元素属性 (内联样式)<p style="color:red"></p>

      元素标签(内部样式)<style>p {color:red;}></style>

      外部资源<link ref stylesheet href="style.css">

      2.2 CSS基本语法

      2.jpeg

    2.3 CSS选择器

             1.标签选择器(如:body,div,p,ul,li)

             2.类选择器(如:class=”head”,class=”head_logo”)

             3.ID选择器(如:id=”name”,id=”name_txt”)

             4.全局选择器(如:*号)

             5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

            6.继承选择器(如:div p,注意两选择器用空格键分开)

            7.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。


            2.4 CSS 优先级别

             排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 

     

            2.5 CSS 盒模型

            1.HTML页面上的一切可见元素皆可看做盒子

            2.盒子默认都是块级元素:独占一行,支持宽度设置(根据盒子模型示意图分析)

            3.盒子模型可以设置6个样式:宽高背景内外边距与边框

              (1):width:宽度(水平方向)

               (2):height:高度(垂直方向)

               (3):background-color:背景(默认透明)

               (4):padding:内边距,内容与边框之间的填充区域

               (5):margin:外边距,决定当前盒子与其它盒子之间的位置与关系

               (6):border:边框,位于内外边距之间,是可见元素,允许设置宽度,样式和颜色

              4.根据是可见性可以分为二类:

            (1).可见的:width,height,border

            (2).透明的:background,padding,margin

           3.jpeg

     5.盒模型样式规则:

      (1)按老外习惯顺时针规则

      

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 由于比较简短就把CSS 和HTML写一页 -->
    <style>
    .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px 30px 40px 50px;   
            /* (顺时针:上 右 下 左) */
           }
        .box2{
            height: inherit;
            background-color:white;
             }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1212.png2.简化规则:

5.jpeg

padding: 20px 30px; 上下20PX,左右30 PX

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 由于比较简短就把CSS 和HTML写一页 -->
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 20px 30px;30px;
            /* (顺时针:上 20px, 左右 30px,下 30px) */
        }
        
        .box2 {
            height: inherit;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1212.png

3.border 设定

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 由于比较简短就把CSS 和HTML写一页 -->
    <style>
    .box1 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* (顺时针:上 20px, 左右 30px,下 30px) */
            padding: 20px 30px 30px;
            /* 上边框 */
            border-top: 10px solid red;
            /* 右边框 */
            border-right: 10px dashed green;
            /* 下边框 */
            border-bottom-width: 10px;
            border-bottom-style: dotted;
            border-bottom-color: blue;
            /* 左边框 */
            border-left-width: 10px;
            border-left-style: double;
            border-left-color: black;
        }
    }
    .box2 {
        height: inherit;
        background-color: white;
    }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

23.png

HTML和CSS 知识比较多,只有慢慢在实战中熟悉和领会


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议