左右分块主页代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style type="text/css">
        .zuo{
            width: 18%;
            height: 800px;
            background:#333333;
            font-size: 20px;
            float: left;
        }
        .you{
            width: 82%;
            height: 800px;
            float: left;
            background: #E0E0E0;
        }
        li{
                    list-style: none;
                    padding: 10px;
                    margin:0;
                       color: white;
                }
        a{
                    color:white;
                    text-decoration:none;
            
                }
                a:visited{
                    color:white;
                }
                iframe{
                    width: 100%;
                    height: 800px;
                    border: none;
                }
    </style>
</head>
<body>
    <div class="zuo">
        <li style="font-size:30px">Welcome!</li>
        <li>&emsp;&emsp;&emsp;</li>
        <li><a href="" target="myframe">入库管理</a></li>
        <li></li>
        <li>商品管理</li>
        <li style="font-size:15px"><a href="" target="myframe">添加商品</a></li>
        <li style="font-size:15px"><a href="" target="myframe">查询商品</a></li>
        <li style="font-size:15px"><a href="" target="myframe">修改商品</a></li>
        <li></li>
        <li>退货管理</li>
        <li style="font-size:15px"><a href="" target="myframe">添加退货信息</a></li>
        <li style="font-size:15px"><a href="" target="myframe">删除商品</a></li>
        <li></li>
        <li><a href="" target="myframe">用户管理</a></li>
    </div>

    <div class="you">
        <iframe name="myframe"></iframe>
    </div>
</body>
</html>

 

posted @ 2022-03-28 21:54  慢漫曼蔓  阅读(41)  评论(0)    收藏  举报