简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基础20190903作业
Blogger Information
Blog 14
fans 0
comment 0
visits 9705
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
css基础20190903作业
德性的博客
Original
489 people have browsed it

一、实例演示:<iframe>标签的使用

实例

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

<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>
    <h3>
        <a href="https://baidu.com" target="baidu">百度</a>
    </h3>
    <p>
        <iframe frameborder="1" name="baidu" width="500" height="500"></iframe>
    </p>
</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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS样式设置优先级</title>
    <link rel="stylesheet" href="demo02b.css">
    <style>
        p {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 内联样式>内部样式>外部样式 -->
    <p>测试样式表优先级</p>
    <p>测试样式表优先级</p>
    <p style="color: blue">测试样式表优先级</p>
</body>

</html>

运行实例 »

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

实例

/* demo02b.css */
p {
    color: red;
}

运行实例 »

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


三、实例演示: css的id, class与标签选择器的使用规则

实例

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

<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> css的id, class与标签选择器的使用规则</title>
    <style>
/* id选择器 */
#test01 {
color: red;
}
/* class选择器 */
.test02 {
color: green;
}
/* 标签选择器 */
p {
color: blue;
}
</style>
</head>

<body>
<!-- id定位到单个元素，class定位于存在相同class名称的元素 -->
<!-- 优先级：标签<class<id<js -->
<p id="test01">用id的元素</p>
<p class="test02" id="test01">Class名称为test02的元素</p>
<p class="test02">Class名称为test02的元素</p>
<p class="test02">Class名称为test02的元素</p>
</body>

</html>

运行实例 »

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

四、实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

实例

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

<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>CSS盒模型</title>
    <link rel="stylesheet" href="demo02d.css">
</head>

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

</html>

运行实例 »

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

实例

/* demo02d.css */

.box1 {
    width: 200px;
    height: 200px;
    background-color: green;
    padding: 20px 30px 40px 50px;
    border-top: 10px solid red;
    border-right: 15px dashed blue;
    border-bottom: 10px dotted lightcoral;
    border-left: 20px double black;
}

.box2 {
    /* width: inherit; */
    height: inherit;
    background-color: wheat;
}

运行实例 »

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

Correction status：qualified

Teacher's comments：iframe主要用来写后台页面, 因为有这个标签的页面, 基本上难以被搜索引擎收录
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！