07 带语义的布局元素

--------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hTML5</title>
<link href="07-1.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="container">
    	<header>
        	header
        	<nav>nav</nav>
        </header>

        <article>
        	acticle
            <section>
            	section
            </section>
            <section>
            	section
            </section>
            <section>
            	section
            </section>
        </article>

        <aside>
        	aside
        </aside>

        <footer>
        	footer
        </footer>
    </div>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------------------------------  

@charset "utf-8";
/* CSS Document */
.container {
	margin:0px auto;
	width:900px;
	font-weight:bold;
	font-size:18px;
}

header {
	background-color:#0CF;
	height:150px;
	margin-bottom:20px;
}

nav {
	background-color:#FF0;
	height:100px;
	width:95%;
	margin:0px auto;
}

article {
	background-color:#39F;
	width:600px;
	float:left;
	margin-right:20px;
}

section {
	background-color:#FC0;
	height:150px;
	margin:20px;
}

aside {
	background-color:#F66;
	width:280px;
	height:551px;
	float:right;
	margin-bottom:20px;
}

footer {
	background-color:#0CF;
	clear:both;
	height:120px;
}

  

时间: 2024-10-27 07:09:33

07 带语义的布局元素的相关文章

第六十四节,html文档布局元素

html文档布局元素 学习要点:     1.文档元素总汇     2.文档元素解析     本章主要探讨HTML5中文档元素,文档元素的主要作用是划分各个不同的内容,让整个布局清晰明快.让整个布局元素具有语义,进一步替代div. 一.文档元素总汇     文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念.         元素名称                                 说明          h1~h6       表示标题         

css -- 布局元素

默认情况下拥有布局的元素:HTML ,table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marquee 设置以下css属性会自动让元素拥有布局:float,display:inline-block,width,height,zoom 拥有布局的元素不会收缩 布局元素对浮动自动清理 相对定位的元素没有布局 拥有布局元素之间的外边距不会叠加 在没有布局的块级链接上,单击区域只覆盖文本 在滚动时,列表项

HTML5新增的语义化标记元素

H5中定义了一组新的语义化标记来描述元素的内容.虽然语义化标记也可以使用HTML标记进行替换,但是他可以简化HTML页面设计,并且搜索引擎在抓取和索引网页的时候,也会利用这些元素.在目前主流的浏览器中已经可以使用这些元素了,新增的语义化标记元素如下: header--标记头部区域的内容(用于整个页面或页面中的一块区域) footer--标记脚部区域的内容(用于整个页面或页面中的一块区域) section--Web页面中的一块区域 article--独立的文章内容 aside--相关内容或者引文

[译]Polymer官方文档-布局元素

原文链接: Layout elements(注:有时需翻墙或换hosts)翻译日期: 2014年8月2日翻译人员: 铁锚 译注: 点击下载本教程的示例代码: Polymer布局元素Demo相关的代码文件在 layout 目录下. 0. 准备- Chrome浏览器模拟移动设备Chrome浏览器(要求最新版,如34以上版本)模拟移动设备的方法: 打开一个标签页,按 F12,(或者在页面空白区域点鼠标右键,审查元素),打开调试窗口. 然后在将光标移动到调试窗口中, 按 ESC键,或者点击右上角的 dr

07 html 表单form元素 各种input元素 常用元素综合案例

Html的表单元素,主要用途:用户输入数据,并提交给服务器 基本语法是: <form action=”url”(是指把表单提交给谁) method=”提交的方法(get/post),默认是get”> 各种输入元素[输入框,下拉列表,文本域,密码框] </form> 案例:登陆界面 login.html <html> <head> <title>登陆界面</title> </head> <body> <fo

如何用CSS快速布局(一)—— 布局元素详细

要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快速布局思路. 一.什么是块级元素和内联元素 1,块级元素: display:block表现出来的特点是折行的, 一般来说可以包含块级元素和内联元素: 例外: P 元素,只能包含内联元素,而不能包含块级元素. "form"这个块元素比较特殊,它只能用来容纳其他块元素. 2,内联元素: dis

CSS布局元素

一.display(元素显示模式) display属性用来设置元素的显示方式.如果display设置为none,float及position属性定义将生效. 语法:display: block | none | inline | inline-block 1)block:块对象值的是元素显示为一个方块,默认显示状态下将占据整行,其它元素只能另起一行显示.(块元素) 2)inline:行间对象与block刚好相反,它允许其它元素在同一行显示.(内联元素) 3)inline-block:指定对象为内

html5-新布局元素header,footer

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>header/footer</title>    <style type="text/css">        body{height: 708px}        header{background: red;wid

WPD布局元素

Grid Grid会以网格的形式对内容元素进行布局,其特点如下: 可以定义任意数量的行和列,非常灵活: 行的高度和列的宽度可以使用绝对数值.相对比例或自动调整的方式进行精确设定,并可设置最大值和最小值: 内部元素可以设置自己所在的行和列,还可以设置自己纵向跨几行.横向跨几列: 可以设置Children元素的对齐方向. Grid使用场合有: UI布局的大框架设计: 大量UI元素需要成行或者成列对齐的情况: UI整体尺寸改变时,元素需要保持固有的高度和宽度比例: UI后期可能有较大变更或扩展. 定义