html5 布局

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">

<style type="text/css">
body{
margin: 0px;
/* 任意一个距离都为0*/
}
div#container{
width: 100%;
height: 950px;
background-color: orange;
}
div#heading{
width: 100%;
height: 10%;
background-color: aqua;
}
div#content_menu{

width: 30%;
height: 80%;
background-color: yellow;
float: left;

}

div#content_body{
width: 70%;
height: 80%;
background-color: blue;
float: left;
}
div#footing{
width: 100%;
height: 10%;
background-color: black;
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>

时间: 2024-10-05 18:45:58

html5 布局的相关文章

Html5 布局方式

在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Section,Aside标签,很容易一眼就知道对应的功能是什么.布局效果如下: 涉及的元素,说明如下:HTML5 提供的新语义元素定义了网页的不同部分: HTML5 语义元素 header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章 a

css的入门——HTML5布局

HTML5布局 一直以来,网页设计人员都利用<div>元素将页面中的相关元素集中在一起(比如哪些组成页眉,文章,页脚,侧边栏的元素),并使用class或id特性来指定<div>元素在页面结构中的作用.HTML5引入了一组新的元素,这些元素允许你对页面的哥哥部分进行分割.它们的名称直接表明了其中包含的内容. 1.页眉和页脚 <header> <footer> <header>元素和<footer>元素可以用作: ①网站中出现的每个页面顶

HTML5布局总结篇

1.块级元素:<div>,<p>,<h>,<hr>等标签 总是从新的一行开始 高度,行高,内边距,外边距都是可以控制的  2.行级元素:<span>,<a>,<img>,<input> 和其他的元素在同一行 高度,行高,内边距,外边距都是不可以改变的  3.display的属性值:none,  block,  inline, table ,inline-block  4.visibility的属性值:visib

4.3 HTML5布局的使用

1.使用div元素布局为div元素指定id属性:新建style属性,在其中分别置顶div元素的样式属性width.height.background-color(宽.高.背景)示例如下: <style type="text/css"> div#div的id值{ width:100%; height:950px; background-color:blue; float:left; } </style> body指定属性margin:0px 可以使边距为0:灵活使

Html5 布局经验分享-第1集

移动端的布局与pc端的布局相比 移动端的布局就简单的多,兼容性不必考虑那么多,css3各种特性基本上是可以放肆的写:(个人看法) 本人做移动web 布局一段时间了,把这其中遇到的一些问题总结下来,均是个人看法,各位大牛多多拍砖..... 1.布局肯定使用的是自适应布局,前提是将body的width height 设置成100%: 2.准备好通用的reset.css,移除浏览器的默认样式,使用自定义默认样式,让各个浏览器统一基础样式: 3.准备好head内meta的各个标记,因为这个是必不可少的,

HTML5列表、块和布局

-----------------siwuxie095 HTML5 列表 标签 描述 <ol> 有序列表 <ul> 无序列表 <li> 列表项 <dl> 列表 <dt> 列表项 <dd> 描述 1.无序列表 标签:<ul>.<li> 属性:disc.circle.square 2.有序列表 标签:<ol>.<li> 属性:A.a.I.i.start 3.嵌套列表 标签:<ul>

移动设备HTML5页面布局

在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav aside aside article section hgroup . 下面简单介绍一下这个元素: 1.header header>元素定义文档的页面组合,通 常是一些引导和导航信息,标签内通常包含 secti- on的头部信息,如h1~h6 或 hgroup等. <header> <h1>HTML5布局学习</h1> <P>勤学苦练</p

HTML5基本布局

HTML4布局 HTML5布局 基本的HTML5文档的模式为: <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h2></

HTML5系列-标签级介绍

html5这个相信已经被嚼烂了!一提到ht5大家就会想到: 1.新的布局标签(nav.footer.section.artile.input的新类型等) 2.新功能标签(video.audio.canvas.svg等) 3.离线缓存,本地存储等 我了解到的做了简单分类,针对我们的ht5: 标签级:(我们主要了解部分) 一.section.nav布局标签等(优化布局处理)二.canvas(画布绘制)三.audio/video(音频视频播放)四.svg(可伸缩的矢量标记绘图)五.新表单(颜色,日历等