HTML5+CSS3集训（14）

已于 2024-07-01 12:05:17 修改
阅读量526 收藏
点赞数 14
分类专栏： html基础 文章标签： html 前端
于 2024-06-30 16:25:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78986604/article/details/140082323
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    .cleft{
        float:left;
        width:200px;
        height:640px;
        background:#69f;
    }
    .cright{
        height:640px;
        background:pink;
        margin-left:200px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    .cleft{
        float:left;
        width:200px;
        height:640px;
        background:#69f;
    }
    .cright{
        height:640px;
        background:pink;
        margin-left:200px;
    }
    .cleft li{
        width:100%;
        height:40px;
        border-bottom:1px dashed #ccc;
        line-height:40px;
        text-align:center;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    .cleft{
        float:left;
        width:200px;
        height:640px;
        background:#69f;
    }
    .cright{
        height:640px;
        background:pink;
        margin-left:200px;
    }
    .cleft li{
        width:100%;
        height:40px;
        border-bottom:1px dashed #ccc;
        line-height:40px;
        text-align:center;
    }
    iframe{
        width:100%;
        height:100%;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="http://www.tmall.com" target="box">天猫</a>
                    </li>
                    <li>
                        <a href="http://www.tmall.com" target="box">百度</a>
                    </li>
                    <li>
                        <a href="http://www.jd.com" target="box">京东</a>
                    </li>
                    <li>
                        <a href="http://www.sina.com" target="box">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

超越～and me
关注
  • 14
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值