table布局和内联框架模式

最新推荐文章于 2024-06-24 06:42:28 发布

qq_43123533

最新推荐文章于 2024-06-24 06:42:28 发布

阅读量351

点赞数

分类专栏： HTML css

本文链接：https://blog.csdn.net/qq_43123533/article/details/82822706

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

本文展示了如何利用table布局和内联框架技术创建一个简单的视频播放器。尽管最初计划制作购物app的网页，但由于某些网址限制，作者转向了视频播放器的实现。文中附带了完成效果的展示。

摘要由CSDN通过智能技术生成

用table布局和内联框架模式制作了一个简单的视频播放器，原本打算做购物app的网页，可是像唯品会，蘑菇街的网址不能打开，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       body{
           margin:0;padding:0;
       }
    </style>
</head>
<body>
<table style="height: 800px;width:100%;background: darkgray">
   <tr style="height: 10%;text-align: center;background:darkslategrey;font-size:40px;color:green;letter-spacing: 5px;">
       <td colspan="3">视频播放网站</td>
   </tr>
    <tr style="height:80%">
        <td style="width:20%;background:darkslategray">
            <ul style="list-style-type: none">
                <li>
                    <a href="https://vip.iqiyi.com/waimeizhy_pc.html?fv=zz_5993b5deb9f24"target="frame">
                        <img src="ai.jpeg"width="100%"alt="">
                    </a>
                </li>
                <li>
                    <a href="http://www.youku.com/"target="frame">
                        <img src="u=1213154938,607817778&fm=27&gp=0.jpg"width="100%"alt="">
                    </a>
                </li>
                <li>
                    <a href="https://v.qq.com/"target="frame">
                        <img src="003.jpeg"width="100%"alt="">
                    </a>
                </li>
            </ul>
        </td>


        <td style="width:80%;background:darkslategrey"colspan="2">
            <iframe src="http://www.baidu.com"width="100%"height="100%"name="frame"></iframe>
        </td>

    </tr>
    <tr style="height: 10%;background: darkslategrey;font-size:40px;color:green;letter-spacing: 5px;">
        <td colspan="3">
            <h4>联系方式：******</h4>
        </td>
    </tr>


</table>
</body>
</html>

效果图如下：
在这里插入图片描述

qq_43123533

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
table布局和内联框架模式

用table布局和内联框架模式制作了一个简单的视频播放器，原本打算做购物app的网页，可是像唯品会，蘑菇街的网址不能打开，代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&a
复制链接

扫一扫