简易iframe-前端web网页设计(iframe标签运用)_app

iframe-标签的运用，简易html" class="superseo">前端web网页设计 1.iframe简介2.图片展示3.代码展示4.资源下载

1.iframe简介

1.iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性
2.iframe元素会创建包含另外一个文档的内联框架（即行内框架）
3.iframe标签成对使用，大多用来web页面的设计

2.图片展示

点击左边x#html，右边边框显示相应的*.html页面，只刷新页面，但网址发生不改变

3.代码展示

1.index-iframe.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index-iframetitle>

    <style>
        * {
            margin: 0;
            padding: 0%;
        }
        
        a {
            text-decoration: none;
        }
        /* logo */
        
        .toplogo {
            text-align: center;
            float: left;
            width: 13%;
            height: 60px;
            background-color: #090e0d;
        }
        /* 头部 */
        
        .head {
            float: right;
            width: 87%;
            height: 60px;
            background-color: #090e0d;
        }
        
        .main {
            width: 100%;
            height: 500px;
            background-color: #f7fdfd;
        }
        /* 左边 */
        
        .main-left {
            float: left;
            width: 13%;
            height: 138%;
            background-color: #090e0d
        }
        
        .main-left-ul>li {
            width: 100%;
            height: 50px;
            list-style: none;
            line-height: 50px;
            font-size: 20px;
            /* 分界线 */
            border-bottom: 1px solid #090e0d;
        }
        
        .main-left-ul>li:hover {
            background-color: #dddddd8e;
        }
        
        .main-left span {
            color: #f5fafad0;
            height: 100px;
            line-height: 40px;
            font-size: 20px;
            margin-left: 25%;
        }
        /* 右边 */
        
        .main-right {
            float: right;
            width: 87%;
            height: 128%;
        }
        /* 尾部 */
        
        .footer {
            float: right;
            width: 87%;
            height: 50px;
            background-color: #e4e4e42f;
        }
    style>
head>

<body>
    <div class="toplogo"><img src="../excute/image/ym1.ico" alt="error" style="margin-top: 8%;">div>
    <div class="head">div>
    <div class="main">
        <div class="main-left">
            <ul class="main-left-ul">
                <li>
                    <a href="html2.html" target="iframe0"><span>1#htmlspan>a>
                li>
                <li>
                    <a href="html1.html" target="iframe0"><span>2#htmlspan>a>
                li>
                <li>
                    <a href="html2.html" target="iframe0"><span>3#htmlspan>a>
                li>
                <li>
                    <a href="html1.html" target="iframe0"><span>3#htmlspan>a>
                li>
                <li>
                    <a href="html1.html" target="iframe0"><span>4#htmlspan>a>
                li>
                <li>
                    
                li>
                
            ul>
            
        div>

        <div class="main-right">
            <iframe src="html1.html" frameborder="0" name="iframe0" width="100%" height="100%">iframe>
            
        div>
    div>
    <div class="footer">div>
body>

html>

2.html1-iframe.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe-index1title>
head>

<body>
    <h1>msg{iframe-index1}h1>
body>

html>

4.资源下载

iframe嵌套web纯前端页面.zip

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/2990018.html

简易iframe-前端web网页设计(iframe标签运用)

发表评论

评论列表（0条）