分类
随意说

xhtml+div+css设计者要注意的几个地方(转载)

1. 要有合理并赋有语义的化的 属性。
例如:
头部布局 hearter
页面盒子 main
页脚 footer
窗口盒子 nav 。。。。。。。
2. 在书写CSS过程中,要区别对待 id 与 clss ,id 为页面唯一样式 class 是可多出引用的样式。
例如:
<div id=”nav_left”>01</div>
<div id=”nav_left”>02</div>
<div id=”nav_left”>03</div>
这样做是错误的,且不符合 W3C对于 XHTML的标准化规范。正确的写法就是用class
<div>01</div>
<div>02</div>
<div>03</div>
3. 在XHTML CSS 中不要属性标签不能使用大写,因为XHTML中对于大小写是很敏感的,在Transitional模式下的确可以容纳这些错误,但是无法通过W3C验证的。Strict模式下是绝对不允许出现的。
例如:
<BR> <DIV> 等等的所有属性标签。
正确的是:
<br /> <div>
4. 在XHTML中要确保有开始就有关闭。
例如:
<ul>
<li>首页
<li>产品
</ul>
<p> 您现在的位置<br>
这样是不对的,正确的写法为
<ul>
<li>首页</li>
<li>产品</li>
</ul>
<p><span> 您现在的位置</span></p><br />说明 br 因为一个独立的标识所以作为一个个体完整的标识存在 其关闭形式就是 <br />
5. 如果在CSS文件中使用了 float 浮动属性 那么在IE6中就会极容易出现双倍浮动的BUG
例如:
#div { float:left; padding:10px; width:300px; height:580px;}
那么这个div 很容易就会在IE6中出现 宽达到600px 的BUG 这样就会导致IE6中出现页面错位混乱的情况。
解决方法目前只能采用CSS HACK 的写法
区别IE6与FF:
background:#000;*background:#CCC;
区别IE6与IE7:
background:#F30 !important;background:#00F;
区别IE7与FF:
background:#F63; *background:#F33;
区别FF,IE7,IE6:
backgroundrange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6                      IE7                    FF
*                √                        √                      ×
!important  ×                        √                      √
——————————————————————————–
另外再补充一个,下划线”_”,
IE6支持下划线,IE7和firefox均不支持下划线。
还有一种写法就是 display:inline  就是将元素显示为行内元素.
#div {display:inline;  float:left; padding:10px; width:300px; height:580px;}
6. CSS中是可以进行缩写的。
例如颜色 白色 完整的颜色代码是 #FFFFFF 根据 RR GG BB 的缩写规则可以缩写为 #FFF
注意:有些代码是不可以缩写的 例如 #0D2345 墨蓝色 是不符合 RR GG BB的缩写规范的所以必须采用全写方式,最后要注意的一点是 颜色代码要大写

最后一些 XHTML+CSS 的常用命名
CSS命名规则
头:header
内容:content/containe
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

XHTML文件中id的命名
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

由柱子

我爱大理好风光