html5学习之路

html布局

使用<div>元素布局
使用<table>元素布局

<div>元素布局

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>div布局</title><link rel="stylesheet" type="text/css" href="mycss03.css">
</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>

<div id="container"> 设置div布局，给一个id为"container"；接下去设置div头部、内容菜单、内容主体、底部；<link rel="stylesheet" type="text/css" href="mycss03.css"> ，引入css样式。

body{margin: 0px;
}
div#container{width: 100%;height: 950px;background-color: green;
}
div#heading{width: 100%;height: 10%;background-color: red;
}
div#content_menu{width: 30%;height: 80%;background-color: yellow;float: left;
}
div#content_body{width: 70%;height: 80%;background-color: firebrick;float: left;
}
div#footing{width: 100%;height: 10%;background-color: black;clear: both;
}

在这里设置各个部位的宽、高、背景颜色。body{ margin: 0px; }的作用是去空边，使背景能充满全屏；float: left 的作用是加浮动，形成从左到右的排列方式；clear: both 作用是清除浮动。运行之后可以看到效果，如图：

table元素布局

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>table布局</title>
</head>
<body marginheight="0px"><table width="100%" height="700px" style="background: green"><tr><td colspan="2" width="100%" height="10%" style="background: yellow">头部</td></tr><tr><td width="30%" height="80%" style="background: fixed;"><ol><li>苹果</li><li>香蕉</li></ol></td><td width="70%" height="80%" style="background: magenta;">底部</td></tr><tr><td colspan="2" width="100%" height="10%" style="background: honeydew">底部</td></tr></table>
</body>
</html>

 marginheight="0px" 去空边，填充全屏；table width="100%" height="700px" style="background: green"> 设置table宽高及背景颜色； <td colspan="2" width="100%" height="10%" style="background: yellow">头部</td> ，其中colspan="2"表示两个方格合并成一个，设置宽高及背景颜色；第二个<tr></tr>为表格第二行，有两列；第三个<tr></tr>为表格第三行,同样合并两个方格，只有一列。如此布局运行之后得出的结果为下图：

本站文章为 宝宝巴士 SD.Team 原创，转载务必在明显处注明：（作者官方网站：宝宝巴士 )

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4754342.html

转载于:https://www.cnblogs.com/superdo/p/4754342.html

html5学习之路_003相关推荐

HTML5学习之路（电影影评网）
HTML5学习之路首先了解一下HTML的特性: 1.良好的语义特性:增加了各种元素赋予网页更好的意义和结构,使文档更加清晰明确,新增的如header,article,nav,main,aside,f ...
前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...
软件测试的学习之路-----基本的 HTML
文章目录一:常见DOS命令二:Web基本介绍三:HTML基本介绍四:HTML网页骨架五:Hbuilder工具使用六:HTML语法和标签基本介绍七:图片标签八:链接标签九:路径十:相 ...
2d游戏引擎_8年，从2D到3D，我的学习之路
Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...
HTML5学习笔记--第六章文本元素
HTML5学习地址链接: 我要自学网. 6-1 标题元素 <!DOCTYPE html> <html><head><meta charset="UT ...
一个普通本科在校生的前端学习之路
原创西安前端交流会: 卡农 ovenzeze@qq.com 本文章同步发表在wdShare西安前端交流会网站.我的个人博客以及segmentFault和掘金. 转载请注明出处这是西安初级前端群里边 ...
《小白HTML5成长之路38》插入视频的功能好简单
"朱哥,现在视频站好火啊!那些视频是怎么放到网页上进行播放的呢?一定很麻烦吧!" 老朱:"不麻烦,HTML5标准下,一个video标签就搞定了." 小白:&qu ...
Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...

html5学习之路_003

html5学习之路_003相关推荐

最新文章

热门文章