效果


代码如下：

  • 网页代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 1%;
            min-height: 700px;
        }
        header{
            height: 180px;
            margin: 1%;
            font-family: 黑体;
            color: whitesmoke;
            font-size: 90px;
            text-align: center;
            border-radius: 10px 10px 10px 10px;
            border-color: whitesmoke;
            border-style: groove;
            line-height: 180px;
            overflow: hidden;
        }
        nav{
            color: whitesmoke;
            border-radius: 10px 10px 10px 10px;
            margin: 1%;
            width: 20%;
            height: 500px;
            display: block;
            float: left;
            scroll-margin: 0;
            border-color: whitesmoke;
            border-style: ridge;
        }
        .menu{
            font-size: 40px;
            height: 80px;
            overflow: hidden;
            transition: 1s;
            text-align: left;
        }
        .menu:hover{
            text-align: left;
            height:330px
        }
        nav ul li{
            list-style: none;
            fontsize: 30px;
            line-height: 200%;
        }
        iframe{
            margin: 1%;
            border-style: ridge;
            display: block;
            color: whitesmoke;
            border-radius: 10px 10px 10px 10px;
            float: right;
            height: 500px;
            scroll-margin: 0;
            width: 75%;
        }
        a{
            text-decoration: none;
        }
        a:link{
            color: white;
        }
        a:visited{
            color: darkred;
        }
        a:hover{
            color: coral;
        }
        footer{
            width:95%;
            text-align: center;
            color: white;
            fontsize: 30px;
        }
    </style>
</head>
<body background="bg.jpg" style="background-repeat: no-repeat;background-size: 100% 100%; background-attachment: fixed">
<header>
    EVE 星战前夜
</header>
<article>
    <nav>
        <ul>
            <li class="menu">游戏相关
                <ul>
                    <li><a href="data.html" target="choose">游戏资料</a> </li>
                    <li><a href="activity.html" target="choose">游戏活动</a> </li>
                    <li><a href="shop.html" target="choose">游戏商城</a> </li>
                </ul>
            </li>
            <hr style="width: 80%"/>
            <li class="menu">用户中心
                <ul>
                    <li><a href="login.html" target="choose">用户登录</a></li>
                    <li><a href="personal.html" target="choose">个人中心</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <iframe name="choose" id="choose">
    </iframe>
</article>
<footer>LXT版权所有 COPYRIGHT © 1998 - 2020 LXT. ALL RIGHTS RESERVED
</footer>
</body>
</html>
  • 框架代码模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    header{
        color: red;
        text-align: left;
        font-size: 40px;
        height: 60px;
        margin: 10px;
        line-height: 60px;
        overflow: hidden;
    }
    nav{
        min-height: 380px;
        display: block;
        float: top;
        margin: 10px;
    }
    p{
        color: white;
        font-size: 100px;
        text-align: center;
    }
    a{
        text-decoration: none;
    }
    a:link{
        color: white;
    }
    a:visited{
        color: darkred;
    }
    a:hover{
        color: coral;
    }
    </style>
</head>
<body>
<header>
    <a href="1.html">资料1 |</a>
    <a href="2.html">资料2 |</a>
    <a href="3.html">资料3 |</a>
    <a href="4.html">资料4 |</a>
    <a href="5.html">资料5 |</a>
    <a href="6.html">资料6 |</a>
    <a href="7.html">资料7 |</a>
    <a href="8.html">资料8 </a>
</header>
<hr style="width: 100%"/>
<article>
    <nav>
        <p>资料内容</p>
    </nav>
</article>
<footer>
    这是尾部
</footer>
</body>
</html>

更多推荐

WEB前端开发简易网页制作