博客列表 >内联框架以及盒模型的基础使用_201909032239

内联框架以及盒模型的基础使用_201909032239

xingzhi的博客
xingzhi的博客原创
2019年09月03日 22:40:20645浏览

内联框架以及盒模型的基础使用

实例

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 300px;
        margin: 0 auto;
    }
    
    .box1 {
        width: 300px;
        background: #bfbcb9;
        padding: 50px 100px;
        margin: 50px auto;
        border: 1px solid #000;
    }
    
    .box1 a {
        line-height: 100px;
        display: block;
        background: #6a6a6a;
        text-align: center;
        border: 22px solid #949494;
    }
</style>

<body>
    <h2>内联框架iframe的使用演示</h2>
    <!-- 
            内联框架,在当前页面中加载另一个页面
            src="" 打开的地址
            frameborder 规定是否显示框架周围的边框 
        -->
    <iframe src="https://www.baidu.com/" frameborder="0"></iframe>

    <a href="https://www.baidu.com/" target="baidu">点击后再内联框架中显示</a>
    <iframe frameborder="0" name='baidu'></iframe>

    <h2>盒模型</h2>
    <div class="box1">
        <a href="">内容</a>
    </div>

</body>

</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议