Blogger Information
Blog 3
fans 0
comment 1
visits 1696
Related recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
9月2日作业
Damon的博客
Original
631 people have browsed it

<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>iframe标签的使用</title>
</head>

<body>
    <div style="float: left; margin-right:10px">
        <ul>
            <li><a href="https://www.163.com" target="main">网易</a></li>
            <li><a href="https://www.sina.com" target="main">新浪</a></li>
            <li><a href="https://www.baidu.com" target="main">百度</a></li>
            <li><a href="https://www.jd.com" target="main">京东</a></li>
        </ul>
    </div>
    <iframe src="https://www.taobao.com" frameborder="0" name="main" width="400" height="600" style="float: left"></iframe>

</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">
    <title>css样式设置的优先级</title>
    <link rel="stylesheet" href="style1.css">
    <style>
        p {
            color: darkorchid
        }
    </style>
</head>

<body>
    <p>我爱学习 学习使我快乐</p>
    <p>我爱学习 学习使我快乐</p>
    <p style="color: darkorange">我爱学习 学习使我快乐</p>
</body>

</html>

运行实例 »

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

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>css的id, class与标签选择器的使用规则</title>
    <style>
        #aa {
            color: #f00
        }
        
        .yy {
            color: darkturquoise
        }
        
        p {
            color: goldenrod
        }
    </style>
</head>

<body>
    <p id="aa" class="yy">阿萨德噶数据库老大哥</p>


</body>

</html>

运行实例 »

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

盒模型的五大要素

实例

<!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>
        .box1 {
            background-color: goldenrod;
            border: 2px saddlebrown solid;
            width: 300px;
            height: 500px;
        }
        
        .box2 {
            background-color: skyblue;
            margin: 50px 20px;
            padding: 10px 20px 30px 40px;
            border: 2px dashed #f00;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">php中文网原创视频:《天龙八部》公益php培训系列课程汇总! php中文网《玉女心经》公益***系列课程汇总 令人期待的PHP7.4 正则表达式语法教程(含在线测试工具) 韩天峰:关于PHP程序员技术职业生涯规划 四个优秀php原生开发实战视频教程推荐(必学) PHPConChina 2019 参会感悟</div>
    </div>
</body>

</html>

运行实例 »

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


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!