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. Spark学习笔记1

    趁着工作业余时间,趁着内心对技术追求的热情,还是对Spark这个大数据内存计算框架动手了,毕竟人与人之间的差距都是在工作业余时间拉开的…… Spark官网:http://spark.apache.or ...

  2. 【转载】Java多线程

    转自:http://www.jianshu.com/p/40d4c7aebd66 引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目 ...

  3. 机器学习（ML）十五之梯度下降和随机梯度下降

    梯度下降和随机梯度下降 梯度下降在深度学习中很少被直接使用,但理解梯度的意义以及沿着梯度反方向更新自变量可能降低目标函数值的原因是学习后续优化算法的基础.随后,将引出随机梯度下降(stochastic ...

  4. cannot be resolved to a type解决方法！！！

    小楼今天在做一个Java项目的时候遇到一个大家经常遇到的问题:XXX cannot be resolved to a type 看到一百多个errors时的时候,小楼也是被吓得赶紧去找度娘. 归纳一下 ...

  5. Sql 中获取年月日时分秒的函数

    getdate():获取系统当前时间 dateadd(datepart,number,date):计算在一个时间的基础上增加一个时间后的新时间值,比如:dateadd(yy,30,getdate()) ...

  6. Codeforces Round #599 (Div. 2) A. Maximum Square

    Ujan decided to make a new wooden roof for the house. He has nn rectangular planks numbered from 11  ...

  7. Codeforces Round #624 (Div. 3) D. Three Integers

    You are given three integers a≤b≤ca≤b≤c . In one move, you can add +1+1 or −1−1 to any of these inte ...

  8. C语言实例——判断是否为闰年

    实例要求从键盘输入任意年份的整数 N,通过程序运行判断该年份是否为闰年. 算法思想 判断任意年份是否为闰年,需要满足以下条件中的任意一个:① 该年份能被 4 整除同时不能被 100 整除:② 该年份能 ...

  9. python web django base skill

    web框架本质 socket + 业务逻辑 框架实现socket tonado node.js 使用WSGI实现socket django flask 自己实现框架思路 wsgiref socket ...

  10. Django框架之ORM的相关操作之一对一关系（四）

    ORM中一对一在当一张表的某一些字段查询的比较频繁,另外一些字段查询的不是特别频繁,那么就把不常用的字段单独拿出来做成一张表,然后通过一对一进行关联起来.举个例子:在我们登录某个账户的时候,一般会显示 ...