简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML中内联框架标签的使用及CSS基础
Blogger Information
Blog 8
fans 0
comment 0
visits 6545
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML中内联框架标签的使用及CSS基础
Laravel框架学些
Original
1453 people have browsed it

  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 知识比较多，只有慢慢在实战中熟悉和领会


Correction status：qualified

Teacher's comments：你说得对, 要在实战中进步
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！