DIV+CSS使用过程中所收集的资料

 

    最近正在帮朋友做一个基于WEB2.0的网页。以前做网页时网页中的定位一般采用Table表格的方式来完成，熟门熟路去完成一个站点没啥问题；现在流行的2.0标准，不但在语言上有提升（要么是.Net，要么是PHP5.x），而且在网页的组织样式(DIV标签)，层叠样式表（CSS），Ajax技术等，都是全新的概念，好在自己在年前已经关注这方面的技术，通过近半年的学习，体会颇深，全新的网页架构方式确实具有无穷的魅力，与格调单一的table来比较，它的优势真的很大：表现层、结构层、数据层分离，方便分工合作；灵活的风格调用，使得同一个结构，可以有若干个网页风格样式（现在的博客一般采用这种方式）；实时的数据更新（Ajax技术）让网页更加的亲民，更具魅力……

        现在发一些我在学习，使用过程中所收集的这方面相关资料：

 

        一、XHTML常用标签介绍

      

一段时间以来，发现有很多人XHTML 都不会用，不光是普通的初学者，有的程序员都不是很清楚该怎么写这个XHTML ，我这里呢算是把一些常见的应 用问题做一个总结，也算能使得大家能在沟通，合作上能形成默契。

XHTML 里有很多的标签，但是经常用到的也就是那么几个，也只要掌握这几个也就可以了。下面我们一一列 举：div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em

div 在我的脑子里我一直把他想作是一个瓶子或是箱子，我的感觉它挺硬的。这个div 没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是<div></div> 必需要有封口。大家都用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p> 标签，不过用DIV 来再整体的包住所有 的段落。这是非常实用的。

p 这是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P 基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P 标签的时候如果需要可以针对P 设定一下行首缩进，我是推荐在文章以外的地方不要使用P ，因为P 是有一定语义的， 如果用在别的地方恐不合适。正确的写法是<p></p>

span 这也是一个非常常用的标签，这个标签可以说与div 很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素 。我一直把它看作是一个袋子 ，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div 正好互补。

ul,li 这是一个列表 ，在列表中，除了UL 还OL ，不过我觉得OL 有点像是鸡肋。因为UL 通过CSS 定义一样可以有OL 的数字排序效果。所以一般我不推荐使用 OL ，有UL 就可以了。UL 是块级的，他的子级li 也是块级标签。正确的写法是<ul><li></li>< /ul> LI 标签是被UL 标签包裹的，在UL 标签里可以有无数个LI 标签，LI 标签不能独立使用。并且LI 标签一定要封口，这不光是美观问题，对于后期的维护也很有好处。很多程序员都不喜欢把这个LI 封口。UL 列表的用处主要是列举出一维的，同一类型的数据。具体的比如使用在菜单上，文章中列数的一些条例等等。在列表中有一种特别的形式与UL 是不一样的。那就是下面的DL

dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT 是指标题，DD 是指内容。DL 是包课他们的容器。正确的写法 是<dl><dt></dt><dd></dd></dl> 在DL 里可以有很 多组的DT ，DD ，当出现很多组的时候尽量是一个DT 配一个DD ，如果DD 中内容很多，可以在DD 里加P 标签配合使用。DL 列表是一个非常好的列表形式，可以多加利用。

a 这表示链接，是一个特定属性的，也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是：<a href="" title=""></a> 其中的href 是表示目标地址，TITLE 是鼠标悬停提x 示文字，这是可有可无的。但是有必是利大于无。

img 这是图片标签，也是个特定属性的标签。正常写法是：<img src="" alt="" title=""/> 这里的src 是目标地址，ALT 与TITLE 是替换文字，ALT 是 IE 特定的，TITLE 是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。

H 这是一个系列的标签，从H1 到H6 ，一共六个，有人说太少了，有人说正好用，有人说用不了这么多。反正我是觉得差不多。正确写法是：<h></h> 主要是用来存放标题，也有一些朋友用来作它用拿来作其它用处，个人觉得这个标签还是让他安生一点，就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。

strong 这个意思是着重，这是有语义的，作用也很简单。至于样工，是加粗着重，还是用色彩表明着重，那都是自行选择。正确的写法 是<strong></strong>

em 这个与strong 很像，是表示强调。一般浏览器的默认值是斜体。使用方式与strong 一样。写法是：<em></em>

这里没有说表单，因为表单基本上没有什么变化，也没什么可特别说的。

 

  二、DIV属性

一、 div 属性

 

 

div 属性

　　color : #999999 文字颜色

　　font-family : 宋体 文字字型

　　font-size : 10pt 文字大小

　　font-style:itelic 文字斜体育

　　font-variant:small-caps 小字体

　　letter-spacing : 1pt 文字间距

　　line-height : 200% 设定行高

　　font-weight:bold 文字粗体

　　vertical-align:sub 下标字

　　vertical-align:super 上标字

　　text-decoration:line-through 加?h 除线

　　text-decoration:overline 加顶线

　　text-decoration:underline 加底线

　　text-decoration:none ?h 除连接底线

　　text-transform : capitalize 首字大写

　　text-transform : uppercase 英文大写

　　text-transform : lowercase 英文写

　　text-align:right 文字* 右对齐

　　text-align:left 文字* 左对齐

　　text-align:center 文字置中对齐

　　这些是一些简单的文字效果，可以应用到css 的页面中。　

　　背景

　　background-color:black 背景颜色

　　background-image : url(image/bg.gif) 背景图片

　　background-attachment : fixed 固定背景

　　background-repeat : repeat 重复排列- 网页预设

　　background-repeat : no-repeat 不重复排列

　　background-repeat : repeat-x 在x 轴重复排列

　　background-repeat : repeat-y 在y 轴重复排列

　　background-position : 90% 90% 背景图片x 与y 轴的位置

　　链接

　　A 所有超连接

　　A:link 超连接文字格式

　　A:visited 浏览过的连接文字格式

　　A:active 按下连接的格式

　　A:hover 鼠标移至连接

　　边框

　　border-top : 1px solid black 上框

　　border-bottom : 1px solid #6699cc 下框

　　border-left : 1px solid #6699cc 左框

　　border-right : 1px solid #6699cc 右框

　　border: 1px solid #6699cc 四边框

　　虚线

　　<TEXTAREA STYLE="border:1px dashed pink">

　　实线

　　<TEXTAREA STYLE="border:1px solid pink">

　　设置div 的高度与文字的行高一样就可以了, 即 line-height 和 height 的数值是一样的就可以了, 最后给div 一个 over-flow: hidden , 让超出的部分隐藏.

 

 

    三、DIV+CSS标签命名标准规范

DIV+CSS 标签命名标准规范

1.CSSID 的命名
　　外套 :wrap
　　主导航 :mainNav
　　子导航 :subnav
　　页脚 :footer
　 　整个页面 :content
　　页眉 :header
　　页脚 :footer
　　商标 :label
　　标题 :title
　 　主导航 :mainNav(globalNav)
　　顶导航 :topnav
　　边导航 :sidebar
　　左导 航 :leftsideBar
　　右导航 :rightsideBar
　　旗志 :logo
　　标语 :banner
　　菜单内 容 1:menu1Content
　　菜单容量 :menuContainer
　　子菜单 :submenu
　　边导航图 标 :sidebarIcon
　　注释 :note
　　面包屑 :breadCrumb( 即页面所处位置导航提示 )
　　容 器 :container
　　内容 :content
　　搜索 :search
　　登陆 :login
　　功能区 :shop( 如 购物车，收银台 )
　　当前的 current

　　 2. 样式文件命名
　　主要的 :master.css
　　布局版 面 :layout.css
　　专栏 :columns.css
　　文字 :font.css
　　打印样式 :print.css
　 　主题 :themes.css

     页头 :header
　　登录 条 :loginBar
　　标志 :logo
　　侧栏 :sideBar
　　广告 :banner
　　导航 :nav
　　 子导航 :subNav
　　菜单 :menu
　　子菜单 :subMenu
　　搜索 :search
　　滚动 :scroll
　 　页面主体 :main
　　内容 :content
　　标签页 :tab
　　文章列表 :list
　　提示信息 :msg
　 　小技巧 :tips
　　栏目标题 :title
　　友情链接 :friendLink
　　页脚 :footer
　　加 入 :joinus
　　指南 :guild
　　服务 :service
　　热点 :hot
　　新闻 :news
　　下 载 :download
　　注册 :regsiter
　　状态 :status
　　按钮 :btn
　　投票 :vote
　 　合作伙伴 :partner
　　版权 :copyRight