Html/Css

不定宽度的水平居中

不定宽度的水平居中
通常我们的居中方式
.box{width:200px;margin:0 auto;}

但是在没有固宽的情况下.居中就麻烦了
不过可以这样写,用relative;


当然也可以用JS
同理垂直居中也可以用这偏移减半的方法:


另外对支持display:table;的游览器(包括IE8和!IE).可以这样居中
利用table的居中方式


比较下:
<div style="display:table; height:100px; background-color:#999;">
<div style="display:table-cell; vertical-align:middle;">
<div>111我是DIV</div>
</div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:100px; background:#060;">
<tr>
<td>222我是table</td>
</tr>
</table>

是不是很像.
Comments(1)

定位中用absolute实现fix效果(支持IE6)

前阵,在做一个项目时.代码本身就很乱.因为数据较大.又得单屏显示.又是单页面.又不得大改原来的代码.所以用overflow:scroll;来布局.其中,在做一个选项卡,用position:relative;时发现这个背景也随着滚动条漂了起来.于是乎.便有了下面的一些事儿.
先看一个demo:如下:



看到了么.像fix一样.定位到右下角.而且在IE6中无闪动.^ ^是不是很极品呀.
再看一个demo



CSS部分如下:
* { padding:0; margin:0; }
html, body { width:100%; height:100%; }
html { overflow:hidden; }
.html { overflow:scroll; overflow-x:hidden; width:100%; height:100%; background-color:#dcdcdc; }
.tool { position:absolute; left:0; width:100%; top:0; background-color:#85B148; color:#FFF; height:30px; }


不多说了.具体杂回事.我也不清楚.希望#三思哥#快快研究告诉小弟,^ ^.

Comments(0)

关于"字体"的一些事儿

才学疏浅.理解有限- -!!.
看过好多朋友写的页面的字体.大多数都用"宋体",或者为了兼容强一点.加个Arial(Arial在win平台上和Mac的都有)
会这样写
font-family:Simsun,Arial;

按W3c的某种意义上.上面这段CSS应该再加个通用字体放在尾部.一般会用sans-serif(无衬线字体)
font-family:Simsun,Arial,sans-serif;

关于serif与sans-serif.
大概上可以这样讲:前者适宜可内容字体.因为它的字形有衬线.长时间看并不感觉累(宋体就是serif字体).后者,适宜做页面突出,小字号时更明显点.
DEMO1



上面DEMO中第一段和第二段是宋体从段落长短上看:可知宋体的间距稍微大的.在大量文字上不会至于因太过于拥挤而感到记忆疲惫.
有些人喜欢雅黑.很美.可它却是化妆的凤姐,大小不一,且文字多的时候.眼神无法集中.而且一般的电脑上没有这个字体.....
[待续....]
先看几个demo
1.各浏览器下的默认字体测试
2.字体总结
Comments(0)

lang="gb2312"是错误的.

见到有页面这样写

<html xmlns="http://www.w3.org/1999/xhtml" lang="GB2312">


其实是错误的.具体看http://www.w3school.com.cn/tags/html_ref_language_codes.asp

再加一个测试(用firefox查看)



Comments(0)

HTML中DTD里的一些事儿

另存在http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd打开后会发现里面的代码全是HTML的规则.
看了一点.很有意思
第一:HTML标签的属性分类
分为四类:
<!--=================== Generic Attributes ===============================-->

<!-- core attributes common to most elements
id document-wide unique id
class space separated list of classes
style associated style info
title advisory title/amplification
-->
<!ENTITY % coreattrs
"id ID #IMPLIED
class CDATA #IMPLIED
style %StyleSheet; #IMPLIED
title %Text; #IMPLIED"
>

<!-- internationalization attributes
lang language code (backwards compatible)
xml:lang language code (as per XML 1.0 spec)
dir direction for weak/neutral text
-->
<!ENTITY % i18n
"lang %LanguageCode; #IMPLIED
xml:lang %LanguageCode; #IMPLIED
dir (ltr|rtl) #IMPLIED"
>

<!-- attributes for common UI events
onclick a pointer button was clicked
ondblclick a pointer button was double clicked
onmousedown a pointer button was pressed down
onmouseup a pointer button was released
onmousemove a pointer was moved onto the element
onmouseout a pointer was moved away from the element
onkeypress a key was pressed and released
onkeydown a key was pressed down
onkeyup a key was released
-->
<!ENTITY % events
"onclick %Script; #IMPLIED
ondblclick %Script; #IMPLIED
onmousedown %Script; #IMPLIED
onmouseup %Script; #IMPLIED
onmouseover %Script; #IMPLIED
onmousemove %Script; #IMPLIED
onmouseout %Script; #IMPLIED
onkeypress %Script; #IMPLIED
onkeydown %Script; #IMPLIED
onkeyup %Script; #IMPLIED"
>

<!-- attributes for elements that can get the focus
accesskey accessibility key character
tabindex position in tabbing order
onfocus the element got the focus
onblur the element lost the focus
-->
<!ENTITY % focus
"accesskey %Character; #IMPLIED
tabindex %Number; #IMPLIED
onfocus %Script; #IMPLIED
onblur %Script; #IMPLIED"
>

从上面可以看出分为四类:
1.核心属性(coreattrs);
2.国际化属性(internationalization attributes);
3.UI事件属性(attributes for common UI events);
4.焦点属性(attributes for elements that can get the focus)

关于核心属性
一般的标签都有这个属性(包括id,class,style,title)
国际化属性
这个对页面语言编码有影响
UI事件属性
从DTD后面的发现.link标签也可以有事件属性.不过.我试了.好像没法触发.= =!!
焦点属性
focus,blur,tab键,Alt+键

第二类:HTML标签的嵌套

DTD里原代码如下:
主要的一部分
<!-- text alignment for p, div, h1-h6. The default is
align="left" for ltr headings, "right" for rtl -->

<!ENTITY % TextAlign "align (left|center|right|justify) #IMPLIED">

<!--=================== Text Elements ====================================-->

<!ENTITY % special.extra
"object | applet | img | map | iframe">

<!ENTITY % special.basic
"br | span | bdo">

<!ENTITY % special
"%special.basic; | %special.extra;">

<!ENTITY % fontstyle.extra "big | small | font | basefont">

<!ENTITY % fontstyle.basic "tt | i | b | u | s | strike ">

<!ENTITY % fontstyle "%fontstyle.basic; | %fontstyle.extra;">

<!ENTITY % phrase.extra "sub | sup">
<!ENTITY % phrase.basic "em | strong | dfn | code | q |samp | kbd | var | cite | abbr | acronym">

<!ENTITY % phrase "%phrase.basic; | %phrase.extra;">

<!ENTITY % inline.forms "input | select | textarea | label | button">

<!-- these can occur at block or inline level -->
<!ENTITY % misc.inline "ins | del | script">

<!-- these can only occur at block level -->
<!ENTITY % misc "noscript | %misc.inline;">

<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">

<!-- %Inline; covers inline or "text-level" elements -->
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">

<!--================== Block level elements ==============================-->

<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl | menu | dir">
<!ENTITY % blocktext "pre | hr | blockquote | address | center | noframes">

<!ENTITY % block
"p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table">

<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

<!--================== Content models for exclusions =====================-->

<!-- a elements use %Inline; excluding a -->

<!ENTITY % a.content
"(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">

<!-- pre uses %Inline excluding img, object, applet, big, small,
font, or basefont -->

<!ENTITY % pre.content
"(#PCDATA | a | %special.basic; | %fontstyle.basic; | %phrase.basic; |
%inline.forms; | %misc.inline;)*">

<!-- form uses %Flow; excluding form -->

<!ENTITY % form.content "(#PCDATA | %block; | %inline; | %misc;)*">

<!-- button uses %Flow; but excludes a, form, form controls, iframe -->

<!ENTITY % button.content
"(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
table | br | span | bdo | object | applet | img | map |
%fontstyle; | %phrase; | %misc;)*">


上面这些只是分类,inline元素和block元素.关于标签的嵌套有三种
1.单一的inline元素;
2.单一的block元素;
3.inline元素和block元素,DTD里叫Flow(混合);

具体可以参考下图.
按此在新窗口浏览图片
//先写这么多.看这个DTD能学到不少东西.以后有新发现,再写^^'
Comments(0)

page:3/4页上一页 1 2 3 4 下一页