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>

转载于:https://www.cnblogs.com/Mike-zh/archive/2012/09/21/2696694.html

html标签整合和css框架处理相关推荐

7.18 阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS
阿里巴巴企业黄页HTML实现.HTML标签介绍.frameset框架.HTML5标签.CSS 一.阿里巴巴企业黄页HTML 二.HTML标签介绍三.frameset框架.iframe框架 frame ...
介绍27款经典的CSS框架
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd> ...
【原创】CSSOO的思想及CSS框架的应用（未整理完）
CSSOO的思想及CSS框架的应用前语:通过这次研究分析总结,个人对CSSOO的概念及应用的思路也更明确一些,是一个和大家共同学习的过程. 一.CSS框架框架目的: 给出一个相对规范的开发方法,给 ...
眼下最流行的五大CSS框架_你都知道么？
摘要: 如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了.作为开发工具,CSS框架一直处于不断进化和改进的状态,因此我们强烈建议您关注眼下的趋势.这篇文章会带您了解2017年最流行的5种C ...
27 款经典的CSS 框架
27 款经典的CSS 框架利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给 ...
css框架：五大css流行框架的总结-css教程-PHP中文网
本篇文章给大家带来的内容是关于css框架:五大css流行框架的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了.作为开 ...
[CSS] 眼下最流行的五大CSS框架，你都知道么？
From: http://developer.51cto.com/art/201710/555733.htm 如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了.作为开发工具,CSS框架一直 ...
精选15个国外CSS框架
下面一起来了解一下各种不同的CSS框架吧: 1.960 Grid System 960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度.它有两种类型,12和1 ...
我的布尔玛CSS框架之旅
by Henrik Ståhl 通过HenrikStåhl I recently decided to try out a CSS framework. As a journalist, I've b ...

html标签整合和css框架处理

html标签整合和css框架处理相关推荐

最新文章

热门文章