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属性 ...
随机推荐
- 第4章 同步控制 Synchronization ---哲学家进餐问题(The Dining Philosophers)
哲学家进餐问题是这样子的:好几位哲学家围绕着餐桌坐,每一位哲学家要么思考,要么等待,要么就吃饭.为了吃饭,哲学家必须拿起两支筷子(分放于左右两端).不幸的是,筷子的数量和哲学家相等,所以每支筷子必须由 ...
- JavaWeb(一)之细说Servlet
前言 其实javaWeb的知识早就学过了,可是因为现在在搞大数据开发,所以web的知识都忘记了.准备开始慢慢的把Web的知识一点一点的回忆起来,多学一点没有关系,就怕到时候要用的话,什么都不会了. 一 ...
- form表单中enctype="multipart/form-data"的传值问题
form表单中enctype="multipart/form-data"的传值问题!! Form表单中enctype="multipart/form-data" ...
- rem绝对自适应方案
rem css3新增的rem是现在非常受欢迎的单位.看一下MDN上的说明: 这个单位代表根元素的 font-size 大小(例如 <html> 元素的font-size). 使用这个单位可 ...
- Python中wx.FlexGridSizer
FlexGridSizer是GridSizer的一个更灵活的版本.它与标准的GridSizer几乎相同,除了下面3点例外: 1.每行和每列可以有各自的尺寸.2.默认情况下,当尺寸调整时,它行和列整体改 ...
- Spring事务管理配置示例
(一).Spring事务特性 1.事务隔离级别 隔离级别是指若干个并发的事务之间的隔离程度. ISOLATION_DEFAULT:默认值,使用数据库的默认隔离级别,就是ISOLATION_READ_C ...
- mySQL、mariaDB、noSQL、SQL server、redis之间是什么关系?
1.首先,从数据库类型上分类,mySQL.mariaDB.SQL server这3种属于关系型数据库. noSQL属于非关系型数据库,被视为数据库革命者. redis成为内存缓存数据库,而前面的两种类 ...
- win10 uwp 视差效果
本文翻译:http://jamescroft.co.uk/blog/uwp/playing-with-scrolling-parallax-effects-on-ui-elements-in-wind ...
- IDEA搭建SpringMVC+Mybatis+Mysql+Maven框架
相关环境 Intellij IDEA Ultimate Tomcat JDK MySql 5.6(win32/win64) Maven (可使用Intellij IDEA自带的) 搭建步骤 创建项目工 ...
- JAVA基础-XML的解析
一.XML的概述 XML的全名为可扩展标记语言(Extensible Markup Language),XML的作用为:1.传输,2.存取数据,3.软件的配置文件.传输现在都用更轻量的Json,而存储 ...