html标签整合和css框架处理 – Mike

html标签整合和css框架处理 - Mike

所有页面布局的共同之处定义在base.css中特别之处定义为与该页名相同的css文件中
Ⅰ总体布局

<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>页脚

方法二（上下依赖同级的先定义元素左右依赖父元素）
#left{
position:relative;
top:0;
left:0;
width:300px;
height:600px;
}
#right {
position: relative;
top: -600px;
left: 300px;
width: 660px;
height: 600px;
}

<div></div><span></span>
<div></div>
<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>

相关文章：

你感兴趣的文章：

标签云：