HTML使用iframe实现分栏

最新推荐文章于 2022-02-10 20:53:17 发布

跃起的影子

最新推荐文章于 2022-02-10 20:53:17 发布

阅读量2.5k

点赞数 8

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/qq_45569406/article/details/116861216

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

算是记录自己写网页的一些小方法吧。省的之后写又忘了orz

大概效果如图：
图片效果
分两部分，左边是导航栏，右边是相关信息。

代码

HTML部分

（注意代码只是图中样式部分的代码）

<!--主界面-->
        <div id="middle">
            <div id="catalogue">
                <!--左半边-->
                <div id="catalogue-left">
                    <div class="cata-box" style="border-radius: 10px 0px 0px 0px;">
                        <a href="info.html" target="frame-right">基础信息</a> 
                    </div>
                    <div class="cata-box">
                        <a href="letter-box.html" target="frame-right">我的信箱</a> 
                    </div>
                    <div class="cata-box">
                        <a href="my-reply.html" target="frame-right">回复我的</a> 
                    </div>
                    <div class="cata-box" style="border-radius: 0px 0px 0px 10px;">
                        <a href="my-article.html" target="frame-right">我发布的</a> 
                    </div>
                </div>
                <!--右半边-->
                <div id="catalogue-right">
                    <iframe name="frame-right" src="info.html" style="float: right; width: 73%;height: 600px;" frameborder="0"></iframe>
                </div>

            </div>
        </div>

CSS部分

（也是图中显示样式的代码）

/*主界面*/
#middle{background-image: url(bg-img.png);}/*添加背景图片,注意路径,我的图片是在和该css文件相同的文件夹中*/
#catalogue{background-color: cornsilk; height: 600px; width: 1000px; margin: auto; border-radius: 10px; 
    background:white; opacity:0.5;}/*background好像没啥用,border-radius是使分栏框四周都是圆角,opacity是让整个部分半透明以显示背景图片*/
/*左边css*/
#catalogue-left{width: 25%; border-radius: 10px 0px 0px 10px; float: left; text-align: center;}
.cata-box{height: 100px; font-size: large; color: black; text-align: center; padding-top: 50px;}
/*导航栏链接效果*/
#catalogue-left a{text-decoration: none; color: black;}
#catalogue-left a:hover{text-decoration: none; color: rgb(151, 56, 151);}
#catalogue-left a:visited{text-decoration: none; }
/*右边css*/
#catalogue-rigth{float: right; height: 400px; width: 75%; position: relative;}

~~其他出现的html网页（导航栏里面的四个）很随便的写一下就好。。。~~

比较重要的项：

a中的target是链接的目的，因为这个才能使右边显示出相应网页的样子，iframe中的name就是a中target的地址
写这段代码的时候出现了一点问题，iframe的样式，我只能在iframe标签中直接用style修改，不知道为什么不能在css中修改，如果有大佬知道该怎么办的话感谢解惑。

很随便的网页

最后附上那几个很随便的网页

info.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>my infomation</title>
</head>
<body>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>
    <h1 style="text-align: center;">this is the user's infomation</h1>

</body>
</html>

letter-box.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>letter box</title>
</head>
<body>
    <h1 style="text-align: center;">this is letter box</h1>
</body>
</html>

my-reply.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>my reply</title>
</head>
<body>
    <h1 style="text-align: center;">this is the reply</h1>
</body>
</html>

my-article.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>article</title>
</head>
<body>
    <h1 style="text-align: center;">this is the user's article</h1>
</body>
</html>

跃起的影子

关注

8
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
HTML使用iframe实现分栏

算是记录自己写网页的一些小方法吧。省的之后写又忘了orz大概效果如图：分两部分，左边是导航栏，右边是相关信息。代码HTML部分（注意代码只是图中样式部分的代码） <div id="middle"> <div id="catalogue">  <div id="catalogue-left">
复制链接

扫一扫