html标签整合和css框架处理

最新推荐文章于 2024-12-09 20:51:16 发布

weixin_33964094

最新推荐文章于 2024-12-09 20:51:16 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Mike-zh/archive/2012/09/21/2696694.html

本文深入探讨网页布局的基础知识，从整体布局到详细样式定义，包括body元素、相对定位、绝对定位、常用一级标签样式定义及二级标签的表单元素、媒体元素、表格和文本处理标签等内容。

所有页面布局的共同之处定义在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>