简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html前端部分知识-2019-09-02-20
Blogger Information
Blog 7
fans 0
comment 0
visits 6250
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前端部分知识-2019-09-02-20
huomou的博客
Original
612 people have browsed it

问题一：实例演示:<iframe>标签的使用

  1. 直接调用：


    <iframe src="https://www.baidu.com" frameborder="1" width="600" height="600"></iframe>

    运行实例 »

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

  2. 同页面调用：


    <!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>同页面调用</title>
    <style>
        .left {
            float: left;
        }
        
        ul>li {
            list-style:none;
        }
        
        .right {
            float: left;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div class="left">
        <ul>
            <li><a href="https://www.baidu.com" target="main">百度</a></li>
            <li><a href="https://www.qq.com" target="main">腾讯</a></li>
            <li><a href="https://www.sina.com.cn" target="main">新浪</a></li>
            <li><a href="https://www.163.com" target="main">网易</a></li>
        </ul>
    </div>
    <div class="right">
        <iframe srcdoc="<h3>同页面调用演示</h3>" frameborder="1" name="main" width="600" height="600"></iframe>
    </div>
</body>
</html>

    运行实例 »

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

问题二：实例演示: css样式设置的优先级

答：优先级：内联样式>内部样式>外部样式表

<!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">
    <link rel="stylesheet" href="css/style.css">
    <style>
        p {
            color: #ff0000;
        }
    </style>
    <title>css优先级</title>
</head>

<body>
    <ol>
        <li>
            <p style="color: green">
                内联样式，优先级最高
            </p>
        </li>
        <li>
            <p>内部样式，优先级比较高</p>
        </li>
        <li>
            <p>外部样式表，优先级最低（因外部地址不存在，所以显示的是内部样式）</p>
        </li>
    </ol>
</body>
</html>

运行实例 »

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

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

答：选择器的优先级：js>id>class>标签

<!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>选择器的优先级</title>
    <style>
        p {
            color: yellow;
        }
        
        #red {
            color: red;
        }
        
        .green {
            color: pink;
        }
        
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <p id="red" class="green">#(red)+class(green)，显示红色，证明id>class>标签</p>
    <p class="blue">class(blue)显示蓝色，证明class>标签</p>
	<p>标签默认黄色，显示黄色</p>
</body>
</html>

运行实例 »

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

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

答：

<!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>一切皆盒子</title>
    <style>
        .box {
            border: 3px dashed red;
            width: 600px;
            height: 800px;
            background-color: #999;
			padding:10px;
        }
        
        .box1 {
            width: 150px;
            height: 150px;
            padding: 10px 20px;
            background-color: blue;
            border: 5px solid #168328;
			margin:10px 15px 20px 5px;
        }
        
        .box2 {
            width: 180px;
            height: 180px;
            background-color: #000;
            padding: 10px 0;
            border: 5px solid #993333;
			color:#fff;
			margin:10px 15px;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            padding: 0 30px;
			margin:10px 15px 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
</body>
</html>

运行实例 »

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



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！