【Html 页面布局】
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 页面布局】的更多相关文章
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- Xamarin+Prism开发详解五:页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 【Android】纯代码创建页面布局(含异步加载图片)
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- 如何在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 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- SharePoint 2013 入门教程之创建页面布局及页面
在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...
随机推荐
- 【Python】 基础语法
Python 语言与 Perl,C 和 Java 等语言有许多相似之处.但是,也存在一些差异. 第一个 Python 程序 欢迎,入坑! Python 标识符 在 Python 里,标识符由字母.数 ...
- 每天进步一点点------Allegro 原理图到PCB网表导入
- 【转载】Java泛型(一)
转自:http://www.cnblogs.com/lzq198754/p/5780426.html 1.为什么需要泛型 泛型在Java中有很重要的地位,网上很多文章罗列各种理论,不便于理解,本篇将立 ...
- DNS辅助
DNS服务原理详解 DNS:Domain Name Service,域名解析服务 监听端口:udp/53,tcp/53 应用程序:bind 根域:. 一级域: 组织域:.com, .org, .net ...
- KM算法模板 hdu 2255
KM算法是在匹配是完备的情况下寻找最优匹配. 首先,先将范围定为最大的情况,如果最大的情况无法满足,就下降一个维度继续匹配. 直到匹配成功. #include<cstdio> #inclu ...
- Nuxt 常用的配置项
1:在开发项目时 我们可能会遇到端口被占用或者指定IP的情况, 在Nuxt中 我们可以在page.json 文件中进行配置,例如希望IP配置成125.0.0.1,端口设置1616 "conf ...
- SpringMVC的三种处理器适配器
SpringMVC具有三种处理器适配器,他们分别是BeanNameUrlHandlerMapping.SimpleControllerHandlerAdapter.ControllerClassNam ...
- Go递归
1. 递归介绍 package main import ( "fmt" ) func test(n int) { if n > 2 { n-- test(n) } fmt.P ...
- java.util.Properties类,保存时保留注释及格式不变
原文地址:http://blog.csdn.net/benbenxiongyuan/article/details/53006097 参考地址:http://www.iteye.com/topic/1 ...
- Spring Boot高频面试题:Spring Boot执行原理
之前一篇文章Spring Boot快速入门文章中,我们已经体会到Spring Boot的神器,不再像之前Spring那样需要繁琐的XML,甚至几秒钟就能搭建出Spring的项目骨架.接下来我们简单分析 ...