首页 > 博客列表 > iframe与css基础之内联框架，迷你小后台，布局元素，CSS，选择器，选择器优先级，样式四个级别的影响

博主信息

博文 22

粉丝 0

访问量 26727

专题推荐

内联框架之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联框架标签的工作原理</title>
    <style>
        iframe {
            width: 50%;
            height: 500px;
        }
    </style>
</head>
<body>
    <!-- 内联框架标签：可以一个页面显示多个窗口内容，但是seo非常不友好，但是适合用于做网站后台。 
    内联框架后台可能被其它方式的后台替换。
    -->
    <div>
        <a href="https://j.map.baidu.com/80/ef" target="mapShenzhen">深圳市</a>
        <iframe srcdoc="<em>深圳市地图</em>" name="mapShenzhen"></iframe>
    </div>
    <div>
        <a href="https://j.map.baidu.com/80/ef" target="mapSuzhou">苏州市</a>
        <iframe srcdoc="<em>苏州市地图</em>" name="mapSuzhou"></iframe>
    </div>
</body>
</html>

iframe迷你小后台之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe迷你小后台</title>
</head>
<body>
    <!-- 布局分：header（头）, aside（侧边栏）, main（内容）
    侧边栏通过target绑定main中iframe的name来显示相应的内容 -->
    <div class="header">网站管理后台</div>
    <div class="aside">
        <a href="https://map.baidu.com/" target="content">地图</a>
        <a href="https://v.qq.com/" target="content">视频</a>
        <a href="https://bbs.tianya.cn/" target="content">论坛</a>
        <a href="https://www.php.cn/" target="content">学习</a>
    </div>
    <div class="main">
        <iframe srcdoc="请点击右侧按钮" name="content"></iframe>
    </div>
</body>
</html>

布局元素(页眉header，侧边栏aside，主体main，页脚footer) 之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局元素：页眉header，侧边栏aside，主体main，页脚footer</title>
</head>
<body>
    <!-- 页眉 -->
    <!-- 实体字符：以&开头（主要是一些特别的字符），页面中会转成目标字符以字符原样显示。 -->
    <header>&lt;header&gt;</header>
    <!-- 
    div是块级元素，内部可以放置任何类型的元素,是网页的骨架
    span是内联元素(inline element)，一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”，文本，图片，input。
    section 就是带有语义的 div ,也叫功能区域。 内容和标题用section。只有内容没有标题的用article
    article元素也是html5中新增加的结构元素，也叫文章元素，`article`标签要比`section`标签更加语义化。
 -->
    <div class="container">
        <!-- 侧边栏 -->
        <aside>&lt;aside&gt;</aside>
        <!-- 主体 -->
        <main>
            &lt;main&gt;
            <div>
                <section>
                    &lt;section&gt;
                </section>
            </div>
            <div>
                <section>
                    &lt;section&gt;
                </section>
            </div>
        </main>
    </div>
    <!-- 页脚 -->
    <footer>&lt;footer&gt;</footer>
</body>
</html>

css语法和基本术语,层叠与优先级之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css语法和基本术语,层叠与优先级</title>
    <!-- 如果你的CSS样式仅仅用来控制当前页面的元素，就用style标签写到当前页面中 -->
    <!-- <style>
        /* 术语：规则，选择器，声明块，属性和值 */
        /* 规则：选择器 + 声明块 */
        /* 选择器：h1 */
        /* 声明块：由一对“{}”包住的内容 */
        /* 属性和值：写在声明块中的名值对 */
        /* ------------ */
        /* CSS: 层叠样式表 */
        /* 1.标签选择器 */
        /* h1 {
            color: green;
        } */
        /* 2.属性选择器 */
        /* *：表示所有元素/标签 */
        /* h1[class="title"]{
            color: violet;
        }
        h1[id="page-title"]{
            color: red;
        } */
        /* 
         id:浏览器并不检查它的唯一性，由程序员自已控制 
        *[id="page-title"]{
            color: red;
        } */
        /* 3.类选择器 */
        /* h1.title {
            color: violet;
        }
        尽量不要用标签，直接用. 
        */
        /* .title {
            color: violet;
        }
        .title:first-child {
            color: blue;
        } */
        /* 4.id 选择器 */
        /* #page-title {
            color: yellow;
        } */
    </style> -->
    <style>
    h1 {
        color: red !important;
    }
    .active {
        color:turquoise;
    }
    #first {
        color: blue;
    }
    /* 选择器优先级：id > class > tag 也就是: id>类>元素(ice权重) 而!important是提权*/
    </style>
</head>
<body>
    <!-- 一个元素样式会受到四个级别声明的影响：
    1.继承的：根据元素在文档的结构和层级关系来确定它最终的样式
    2.浏览器的：用户代理样式，大多数浏览器表现基本一致
    3.自定义的：写在html文档的<style>标签中
    4.行内样式（内联样式）：写到元素的style属性中的 -->
        <!-- <h1 id="page-title" class="title" style="color:blue">web全栈开发</h1>
        <h1 id="page-title">大家晚上好</h1> -->
        <h1 class="active" id="first" style="color: coral">Hello World</h1>
</body>
</html>

总结：

特殊符号：要以&开头

布局元素：

页眉: header，
侧边栏: aside，
主体: main，
页脚: footer
div: 是块级元素，内部可以放置任何类型的元素,是网页的骨架
span: 是内联元素(inline element)，一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”，文本，图片，input。
section: 就是带有语义的 div ,也叫功能区域。内容和标题用section。只有内容没有标题的用article
article: 元素也是html5中新增加的结构元素，也叫文章元素，article标签要比section标签更加语义化。

CSS: 层叠样式表

规则：选择器 + 声明块
选择器：如h1
声明块：由一对“{}”包住的内容
属性和值：写在声明块中的名值对

选择器:

1.标签选择器

h1 {
    color: green;
}

2.属性选择器
*：表示所有元素/标签

h1[class="title"]{
    color: violet;
}
h1[id="page-title"]{
    color: red;
}

id:浏览器并不检查它的唯一性，由程序员自已控制

*[id="page-title"]{
    color: red;
}

3.类选择器

h1.title {
    color: violet;
}

尽量不要用标签，直接用.

.title {
    color: violet;
}
.title:first-child {
    color: blue;
}

4.id 选择器

#page-title {
    color: yellow;
}

选择器优先级：

id > class > tag 也就是: id>类>元素(ice权重) 而!important是提权

一个元素样式会受到四个级别声明的影响：

1.继承的：根据元素在文档的结构和层级关系来确定它最终的样式
2.浏览器的：用户代理样式，大多数浏览器表现基本一致
3.自定义的：写在html文档的<style>标签中
4.行内样式（内联样式）：写到元素的style属性中的

批改老师：

天蓬老师

批改状态：合格

老师批语：标题太长了吧

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php之win运行环境，工具与运行原理

2020-12-08 19:59:37

内联框架 之代码

iframe迷你小后台 之代码