html标签整合和css框架处理
所有页面布局的共同之处定义在base.css中 特别之处定义为与该页名相同的css文件中
Ⅰ总体布局
<body>为0级标签
<body>下一级标签为二级标签 以此类推
<body>中的样式完全定义了整个页面有效区域width和height
背景
用margin定义有效区域的浮动位置
各标签共同样式定义
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
Ⅱ
absolute屏幕上的点的绝对位置定义
relative依据其父元素和先定义的同级元素
一级标签样式定义 常用格式｛
position:relative;//常用相对位置
top:100p;
left:100px; //以上三句定义了其绝对位置
width:200px;
height:300px;//以上定义了元素的尺寸
margin:0;//外边框宽度
border:0;//边框宽度
padding:0;//填充框宽度
//以上三个属性均包含四个低级属性
其他内容样式
｝
以下为常用的一级标签
<header></header>页眉设置
<nav></nav>导航
<footer></footer>页脚
分页标签
<iframe></iframe>、
同一水平位置定义两个块
方法一（上下依赖父元素 左右依赖先定义的同级元素）
#left{
position:relative;
top:0;
left:0;
width:300px;
height:600px;
float:left;
}
#right {
position: relative;
top: 0;
left: 0;
width: 660px;
height: 600px;
}
方法二（上下依赖同级的先定义元素 左右依赖父元素 ）
#left{
position:relative;
top:0;
left:0;
width:300px;
height:600px;
}
#right {
position: relative;
top: -600px;
left: 300px;
width: 660px;
height: 600px;
}
<noframe></noframe>
其他一级标签
<div></div><span></span>
<section></section>
<canvas></canvas>
<form><fieldset></fieldset></form>
<address></address>
<time></time>
程序
<embed>
<object><param/></object>
<applet></applet>被<object>代替
Ⅲ 二级标签
表单元素
<menu>
<command>
<keygen>
<button></button>
<input></input>
<label></label>
<textarea></textarea>
<output></output>
<datalist></datalist>
<select><optgroup><option></option></optgroup></select>
媒体元素
<audio></audio>
<figure></figure>
<map><area></area></map>
<img></img>
<vedio></vedio><track></track>
表格
<table>
<caption></caption>
<tbody>
<tr></tr>
<td>
<tfoot>
<th>
<colgroup/><col/>
<thead>
列表
<ol></ol>
<ul></ul>
<li></li>
<dl>
<dt>
<dd>
文本处理（格式）标签
<abbr>
<article>
<aside>
<b>
<bdi>
<bdo>
<blockquote>
<br>
<cite>
<code>
<del>
<details>
<dfn>
<em>
<font>
<h1> - <h6>
<hgroup>
<hr>
<i>
<ins>
<kbd>
<legend>
<mark>
<meter>
<p>
<pre>
<q>
<rp>
<rt>
<ruby>
<samp>
<small>
<strike>
<strong>
<sub>
<summary>
<sup>
<textarea>
<var>
<wbr>
html4舍弃
<acronym>
<basefont>
<big>
<center>
<dir>
<s>
<strike>
<tt>
<u>