简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 9.2作业
Blogger Information
Blog 12
fans 1
comment 0
visits 8241
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
9.2作业
lee的学习记录博客
Original
748 people have browsed it

1.实例演示:<iframe>标签的使用

备注：应用在后台的制作比较多。


实例

<!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>
</head>
<body>
<h3><a href="https://www.baidu.com/" target="baidu">百度</a></h3>
<iframe src="" frameborder="1" name="baidu" width="200" height="300"></iframe> <!-- 核心的地方在iframe的name属性对应了前面a标签里的target属性，这样就可以实现画中画的打开方式 -->
</body>
</html>

运行实例 »

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

2. 实例演示: css样式设置的优先级

元素的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">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css"> <!--这里只做对比说明  -->  
   
    <style>
        p{color: darkblue}
    </style>
</head>
<body>
   <p style="color: darkgoldenrod">这是一个文本</p>
   <p>这是一个文本</p>
   <!-- 元素的css样式优先级：内联样式 > 内部样式 > 外部样式 -->
</body>
</html>

运行实例 »

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


3. 实例演示: css的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>Document</title>
    <link rel="stylesheet" href="css/style.css"> <!--这里只做对比说明  -->  
   
    <style>
        #blue{color:blue;}
        .color{color:red;}
        p{color:darkgreen}
    </style>
</head>
<body>
   <p id="blue">这是一个文本,使用ID设置css样式</p>
   <p class="color">这是一个文本，使用class设置样式</p>
   <p>这是一个文本，使用标签设置样式</p>
</body>
</html>

运行实例 »

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

4. 实例演示盒模型的五大要素: 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>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <!--这里只做对比说明  -->

    <style>
        .box_1 {
            width: 260px;
            /*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的300px  */
            height: 180px;
            /*因为使用了padding，所以高度需要减去10*2的长度，才是真正的200px  */
            background: darkslateblue;
            margin: 10px;
            padding: 10px 20px;
        }
        
        .box_2 {
            width: 220px;
            /*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的260px  */
            height: 160px;
            /*因为使用了padding，所以高度需要减去10*2的长度，才是真正的180px  */
            background: rgb(5, 236, 63);
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <div class="box_1">
        <div class="box_2"></div>
    </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！