HTML学习笔记 div布局及table布局案例 第三节 (原创)参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height="950px" style="background-color: aqua"> <tr> <td colspan="2" width="100%" height="10%" style="background-color: #9e5ea5" align="center">这是头部</td> </tr> <tr> <td width="30" height="80%" style="background-color:blue" align="center">左菜单</td> <td width="70" height="80%" style="background-color:blueviolet" align="center">右菜单</td> </tr> <tr> <td colspan="2" width="100" height="10%" style="background-color:darkcyan">底部</td> </tr> </table> </body> </html>
按 Ctrl+C 复制代码按 Ctrl+C 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div控制</title> <style> div { border: 1px solid red; width: 400px; height: 150px; font-size: 35px; } .temple2 { /*隐藏超出的区域*/ overflow: hidden; } .temple3 { /*显示滚动条*/ overflow: scroll; } .temple4 { /*自动设置是否显示滚动条*/ overflow: auto; } </style> </head> <body> <div class="temple"> 床前明月光,<br/> 肚子饿得慌。<br/> 举头望腊肉,<br/> 低头闻香肠。 </div> <br/><br/><br/><br/><br/><br/> <div class="temple2"> 床前明月光,<br/> 肚子饿得慌。<br/> 举头望腊肉,<br/> 低头闻香肠。 </div> <br/><br/><br/><br/><br/><br/> <div class="temple3"> 床前明月光,<br/> 肚子饿得慌。<br/> 举头望腊肉,<br/> 低头闻香肠。 </div> <br/><br/><br/><br/><br/><br/> <div class="temple4"> 床前明月光,<br/> 肚子饿得慌。<br/> 举头望腊肉,<br/> 低头闻香肠。 </div> </body> </html>
按 Ctrl+C 复制代码按 Ctrl+C 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body { margin: 0px; } #container { width: 100%; height: 950px; background-color: #9e5ea5; } #heading { width: 100%; height: 10%; background-color: #df89ff; } #content_menu { width: 30%; height: 80%; background-color: #ff309e; float: left; } #content_body { width: 70%; height: 80%; background-color: #7fffd4; float: left; } #footing { width: 100%; height: 10%; background-color: cadetblue; clear: both; } </style> </head> <body> <div id="container"> <div id="heading"> 头部</div> <div id="content_menu"> 内容菜单</div> <div id="content_body"> 内容主题</div> <div id="footing"> 底部</div> </div> </body> </html>
HTML学习笔记 div布局及table布局案例 第三节 (原创)参考使用表的更多相关文章
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- HTML5学习笔记<四>: 列表, 块和布局
HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- Duilib学习笔记《02》— 界面布局
1. 界面描述XML文件 Duilib主要是通过XML来进行界面的布局配置,程序通过读取并解析XML文件来创建对应的窗体.DuiLib的页面布局分为三类:窗体(Window).容器(Contain)和 ...
- 电磁兼容性设计学习笔记--PCB中地的布局
http://bbs.ednchina.com/BLOG_ARTICLE_3010439.HTM PCB上元器件的布局对整个PCB板的电磁兼容性影响很大,所以从事硬件电路设计的工程师很有必要学习PCB ...
- div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容 ...
- AppleWatch___学习笔记(二)UI布局和UI控件
1.UI布局 直接开发,你会发现Apple Watch并不支持AutoLayout,WatchKit里有个类叫做WKInterfaceGroup,乍一看像是UIView,但是这货其实是用来布局的.从 ...
- CSS学习笔记(11)--Flex 布局教程:语法篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...
随机推荐
- 针对Openlayer3官网例子的简介
网址:http://openlayers.org/en/latest/examples/ 如果大家想了解ol3能做什么,或者说已提供的API有什么,又闲一个个翻例子跟API累的话,就看看这个吧. 1. ...
- oracle 行转列 列转行
行转列 这是一个Oracle的列转行函数:LISTAGG() 先看示例代码: with temp as( select 'China' nation ,'Guangzhou' city from du ...
- 代理模式与java中的动态代理
前言 代理模式又分为静态代理与动态代理,其中动态代理是Java各大框架中运用的最为广泛的一种模式之一,下面就用简单的例子来说明静态代理与动态代理. 场景 李雷是一个唱片公司的大老板,很忙, ...
- JavaWeb(一)Servlet中的ServletConfig与ServletContext
前言 前面我介绍了一下什么是servlet,它的生命周期,执行过程和它的原理.这里我们做一个简单的回顾! 什么是Servlet? servlet 是运行在 Web 服务器中的小型 Java 程序(即: ...
- http://codeforces.com/problemset/problem/545/D
D. Queue time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
- 自测-5 Shuffling Machine
Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...
- JavaScript中错误正确处理方式,你用对了吗?
JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上 ...
- mysql error 1130 hy000:Host 'localhost' is not allowed to connect to this mysql server 解决方案
ERROR 1130 (HY000): Host 'localhost' is not allowed to connect to this MySQL server D:\Wamp\mysql-\b ...
- dets
模块说明 提供基于文件的项式存储,项式以元组表示,其中某个位置为键,默认第1位置 Dets为Mniesia所用,后者增加了事务.查询.和分布式支持. Dets文件不能超过2GB. Dets只有set ...
- Jquery地图热点效果-鼠标经过弹出提示信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...