float:left方式布局
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>页面直播测试</title>

</head>

<body>

    <div id="top" style="width:100%;height:100px">

        <div style="width:100%;height:100%;background-color:lightcoral"></div>

    </div>

    <div style="width:100%;height:1000px">

        <div id="left" style="width:10%;height:1000px;background-color:lightgreen;float:left;"></div>

        <div id="right" style="width:90%;height:1000px;background-color:lightgray;float:left;">

            <!--<iframe style="width:100%;height:1000px;" id="channelId" src=""></iframe>-->

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>

        //$(function () {

        //    let iframe = window.document.getElementById("channelId");

        //    iframe.allow = "microphone;camera;midi;encrypted-media;";

        //});

    </script>

</body>

</html>

【Html 页面布局】的更多相关文章

  1. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  2. Xamarin+Prism开发详解五：页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  3. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  5. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  7. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  10. SharePoint 2013 入门教程之创建页面布局及页面

    在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...

随机推荐

  1. Linux（Ubuntu）服务器是否安装ssh，使用xshell远程连接

    1.查看 ssh 是否启动,如果有 sshd 说明已经启动 sudo ps -e | grep ssh 2.启动 ssh 服务 sudo service ssh start 3.如果第二步没有成功启动 ...

  2. Vue - 组件 Prop

    组件注册 全局注册 可在多个vue实例中使用 <div id="app"> <my-component></my-component> < ...

  3. 建立Web Service 接口及调用

    WEB SERVICE 接口: [WebMethod] public string MaterialRequest(string jsonText) { string WorkNo; string P ...

  4. [lua]紫猫lua教程-命令宝典-L1-01-05. if判断结构

    L1[if]01. 简单的if判断结构 没什么说得 if得基本结构如下 xxx= ) then testlib.traceprint("1-100") ) then testlib ...

  5. oracle-数据库被注入恶意攻击程序的案例恢复

    问题描述: Oracle数据库由于重启之后无法正常启动,tab$被清空(ORA-600 16703故障解析—tab$表被清空),导致数据库启动异常 ORA-600 16703报错 一.检测方法: 如下 ...

  6. NABCD model作业

    1)N(Need需求) 随着人类生活的快速发展,给人们带来了许多的便利,同时也给我们带来了一些麻烦,而我的拼图这个小游戏可以在人们在无聊时玩一玩,也可以给小孩子开发智力. 2)A(Approach做法 ...

  7. 共有T个硬币，其中Z个正面，F个反面，分为两堆，要如何操作使得两堆中的正面硬币数目相等。

    类似题目如下(数值是可变化的) 你的面前有30个硬币,其中有10个正面朝上,20个反面朝上,混乱在一团. 要求:现在用厚布遮住你的眼睛.要你把30个硬币分成2团,每团正面朝上的硬币个数相等.问:你要怎 ...

  8. Linux tasklet 和workqueue学习

    中断服务程序一般都是在中断请求关闭的条件下执行的,以避免嵌套而使中断控制复杂化.但是,中断是一个随机事件,它随时会到来,如果关中断的时间太长,CPU就不能及时响应其他的中断请求,从而造成中断的丢失.因 ...

  9. 【使用python urllib时出现[SSL: CERTIFICATE_VERIFY_FAILED]报错的解决方案】

    "首先,这个报错是告诉你,你的证书有问题. 其次,出现这个问题的原因,在于Python本身. 问题原因 Python升级到2.7.9以后,引入了一个新特性. 当使用urllib打开https ...

  10. Flask笔记1

    Flask笔记 首先明确一下,要运行一个动态网页,我们需要 一个 Web 服务器来监听并响应请求,如果请求的是静态文件它就直接将其返回,如果是动态 url 它就将请求转交给 Web 应用. 一个 We ...