♦

[WEB]网页中各度量单位的比较

2007年06月02日  

在网页中对网页元素的大小修饰除了数值大小外，还有就是度量单位的选择了。不同的度量单位会有哪些不同的效果呢？
首先先看一下这个连接
http://www.tan5.cn/tan5_attachment/08-04-03-web-length.html

了解下各类单位及说明

像素（px）
根据显示器的分辨率来确定长度，在web应用中多采用该单位；

点数（pt）
根据windows系统定义的字号大小来确定长度；

英寸（in）、厘米（cm）和毫米（mm）
根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的改变而改变；

12pt字（pc）
即windows系统定义的12字号大小为单位(1pc=12pt)。该单位前输入的数字表示字号大小的倍数。如{font-size: 2pc;}表示文字大小为24pt；

以上单位均为定值，改变浏览器中浏览文字大小不会对应用这些单位的文字产生变化。

字体高（em）
表示当前文本的尺寸。如{font-size:2em}是指文字大小为原来的2倍；

字体x的高（ex）
表示当前字母“x”的高度；

%
是以当前文本的百分比定义尺寸。如{font-size:200%}是指文字大小为原来的2倍；

0个评论  标签:   

[JS框架]jQuery相关资料的收集

2007年06月01日  

在蓝色理想看到一篇文章
【推荐】珍惜时间，提高效率。强烈推荐轻量级JS开发框架-【Jquery】
于是颇好奇。虽然之前有了解过框架，ajax框架,php框架。但是都没有运用到实际的操作过程中。不过看了这篇文章，发现在 Jquery 的妙处果然甚多。于是在网上找了下资料，整理了下，如下：

1. 珍惜时间，提高效率。强烈推荐轻量级JS开发框架
2. 你为什么不用jQuery系列(1)——了解jQuery
3. 你为什么不用jQuery系列(2)——试用jQuery
4. 小试牛刀——一篇jQuery小教程
5. jquery和prototype的简单比较，以及冲突解决
6. 农民的jQuery之旅（一、二、三完整版）
7. jQuery 中文讨论区

0个评论  标签: , ,   

来和我一起彻底弄清楚盒子模式吧(margin,padding,div)

2007年05月28日  

css盒子模式。要向w3c标准靠拢，这个是必须要掌握的。
目前我对margin 和 padding 以及 div 的定位 甚是模糊。
发现这篇文章，觉得适合自己，也推荐给大家。
和我一起彻底弄懂CSS盒子模式吧~~
1.彻底弄懂CSS盒子模式一
2.彻底弄懂CSS盒子模式二(导航栏实例)
3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位)
5.彻底弄懂CSS盒子模式五(定位强化练习)

0个评论  标签:   

[SEO] 影响SEO的细节(转)

2007年05月28日  

1、将css与javascript全部用下边的方法分离到外部文件中去,让html代码最大可能的只是用来显示实际内容。

2、采用xhtml代码编写页面，抛弃传统Table布局模式，去掉页面中的例如font/bgcolor等格式化控制标签。用符合web标准的代码来制作页面。这样能够让xhtml代码结构化、语义化。提高页面代码的可读性。

3、采用了上边的方法你会发现你的html代码会变得非常小，当然如果可以的话。让它变得更小。太大的页面会影响搜索引擎的处理速度。一般通过xhtml+css设计的网页，html代码应该可以控制在50K以内。大家可以去看一下用web标准重构得比较好的网站。

4、用好图片的alt标签，合理的使用页面关键字去描述图片，这样能增加页面的关键字密度。

5、尽可能少地使用javascript来做与内容相关的事情，例如用document.write去显示正文。这样会影响搜索引擎对页面内容的搜索。

6、千万不要用javascript来实现你网站的导航。那样会让搜索引擎迷失方向。

7、每个页面的关键字尽可能出现在页面的标题，也就是头部的Title标签中。当然，要合理应用，不要太长，更别用大量与页面内容无关的网络热门关键字。因为那就不是优化而是在作弊。

8、尽量在每个页面代码中合理使用

等标签并让你的关键字出现在

标签中，让页面的文档结构更清晰。

我是做网页制作的，所以SEO的诸多专业技术及算法我都不是非常了解。如果您想了解更多关于这方法的知识，建议您访问一些国内知名的SEO优化类的网站，比如点石互动等。在那里你能查阅到很多关于“反向链接”、“页面PR值”等专业知识。这里只是将我在页面制作的过程中涉及到的一些细节问题拿出来和大家探讨一下。由此也可以说明为什么基于web标准设计的网站会更有利于SEO了。

如果您不打算花钱去请专业的SEOer来为您的网站做优化，那么可以让页面制作人员在制作上注意一些细节。相信这样免费的一些细节也能达到一个比较好的效果。

0个评论  标签:   

[JS]二个简单的滑动门效果

2007年05月28日  

1.简单实用的滑动门效果，想要改变效果onmouseover 改成 onclick 就好了

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>我的滑动门</title>
  5. <style type="text/css">
  6. body{
  7. color: #000;
  8. font-family: "宋体", arial;
  9. font-size: 12px;
  10. background: #fff;
  11. text-align: center;
  12. margin: 0;
  13. }
  14. .nTab{
  15. float: left;
  16. width: 960px;
  17. margin: 0 auto;
  18. border-bottom:1px #AACCEE solid;
  19. background:#d5d5d5;
  20. background-position:left;
  21. background-repeat:repeat-y;
  22. margin-bottom:2px;
  23. }
  24. .nTab .TabTitle{
  25. clear: both;
  26. height: 22px;
  27. overflow: hidden;
  28. }
  29. .nTab .TabTitle ul{
  30. border:0;
  31. margin:0;
  32. padding:0;
  33. }
  34. .nTab .TabTitle li{
  35. float: left;
  36. width: 70px;
  37. cursor: pointer;
  38. padding-top: 4px;
  39. padding-right: 0px;
  40. padding-left: 0px;
  41. padding-bottom: 2px;
  42. list-style-type: none;
  43. }
  44. .nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
  45. .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
  46. .nTab .TabContent{
  47. width:auto;background:#fff;
  48. margin: 0px auto;
  49. padding:10px 0 0 0;
  50. border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
  51. }
  52. .none {display:none;}
  53.  
  54. </style>
  55.  
  56. <script type="text/javascript">
  57. function nTabs(thisObj,Num){
  58. if(thisObj.className == "active")return;
  59. var tabObj = thisObj.parentNode.id;
  60. var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  61. for(i=0; i <tabList.length; i++)
  62. {
  63.   if (i == Num)
  64.   {
  65.    thisObj.className = "active";
  66.       document.getElementById(tabObj+"_Content"+i).style.display = "block";
  67.   }else{
  68.    tabList[i].className = "normal";
  69.    document.getElementById(tabObj+"_Content"+i).style.display = "none";
  70.   }
  71. }
  72. }
  73. </script>
  74.  
  75.  
  76. </head>
  77. <body>
  78. <br />
  79. <br />
  80.  
  81. <div align="center" style="padding-left:25px;">
  82. <!-- 选项卡0开始 -->
  83.   <div class="nTab">
  84.     <!-- 标题开始 -->
  85.     <div class="TabTitle">
  86.       <ul id="myTab0">
  87.         <li class="active" onmouseover="nTabs(this,0);">全部</li>
  88.         <li class="normal" onmouseover="nTabs(this,1);">日志</li>
  89.         <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
  90.         <li class="normal" onmouseover="nTabs(this,3);">相册</li>
  91.         <li class="normal" onmouseover="nTabs(this,4);">商城</li>
  92.         <li class="normal" onmouseover="nTabs(this,5);">社区</li>
  93.       </ul>
  94.     </div>
  95.     <!-- 内容开始 -->
  96.     <div class="TabContent">
  97.       <div id="myTab0_Content0"> 000 </div>
  98.       <div id="myTab0_Content1" class="none">111</div>
  99.       <div id="myTab0_Content2" class="none">222</div>
  100.       <div id="myTab0_Content3" class="none">333</div>
  101.       <div id="myTab0_Content4" class="none">444</div>
  102.       <div id="myTab0_Content5" class="none">555</div>
  103.     </div>
  104.   </div>
  105.   <!-- 选项卡0结束 -->
  106.   <!-- 选项卡1开始 -->
  107.   <div class="nTab" style=width:288px>
  108.     <!-- 标题开始 -->
  109.     <div class="TabTitle">
  110.       <ul id="myTab1">
  111.         <li class="active" onclick="nTabs(this,0);">aaa</li>
  112.         <li class="normal" onclick="nTabs(this,1);">bbb</li>
  113.         <li class="normal" onclick="nTabs(this,2);">ccc</li>
  114.         <li class="normal" onclick="nTabs(this,3);">单击</li>
  115.       </ul>
  116.     </div>
  117.     <!-- 内容开始 -->
  118.     <div class="TabContent">
  119.       <div id="myTab1_Content0"> 000 </div>
  120.       <div id="myTab1_Content1" class="none"> 111 </div>
  121.       <div id="myTab1_Content2" class="none"> 222 </div>
  122.       <div id="myTab1_Content3" class="none"> 333 </div>
  123.     </div>
  124.   </div>
  125.   <!-- 选项卡1结束 -->
  126. </div>
  127.  
  128. </body>
  129. </html>

2. 网易滑动效果！一个js，页面任意滑动数量、任意调用

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>滑动门</title>
  5. <style media="screen" type="text/css">
  6. <!--
  7. *{font-size:12px;}
  8. html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
  9. UL{list-style-type:none; margin:0px;}
  10. .ttl{height:18px;}
  11. .ctt{
  12. height:auto;
  13. padding:6px;
  14. clear:both;
  15. border: 1px solid #CCCCCC;
  16. }
  17. .w936{
  18. width:936px;
  19. clear:both;
  20. height: 120px;
  21. margin-top: 20px;
  22. margin-right: 0;
  23. margin-bottom: 2px;
  24. margin-left: 0;
  25. }
  26. .normaltab   {
  27. color:#1F3A87;
  28. }
  29. .hovertab    {
  30. color:#FF0000;
  31. background-color: #99CC00;
  32. }
  33. .dis{display:block;}
  34. .undis{display:none;}
  35.     .tabs {
  36.       width:100%;
  37.       background:#BBD9EE;
  38.       font-size:93%;
  39.       line-height:normal;
  40.       }
  41.     .tabs ul {
  42. margin:0;
  43. padding:10px 10px 0 50px;
  44. list-style:none;
  45.       }
  46.     .tabs li {
  47. display:inline;
  48. margin:0;
  49. padding:0;
  50. cursor: pointer;
  51.       }
  52.     .tabs a {
  53.       float:left;
  54.       background:url("attachments/month_0705/r200752813247.gif") no-repeat left top;
  55.       margin:0;
  56.       padding:0 0 0 4px;
  57.       text-decoration:none;
  58.       }
  59.     .tabs a span {
  60.       float:left;
  61.       display:block;
  62.       background:url("attachments/month_0705/d200752813252.gif") no-repeat right top;
  63.       padding:5px 15px 4px 6px;
  64.       color:#666;
  65.       }
  66.     .tabs a span {float:none;}
  67.     .tabs a:hover span {
  68.       color:#FF9834;
  69.       }
  70.     .tabs a:hover {
  71.       background-position:0% -42px;
  72.       }
  73.     .tabs a:hover span {
  74.       background-position:100% -42px;
  75.       }
  76. -->
  77. </style>
  78. <script type="text/javascript" language="javascript">
  79. <!--
  80. function g(o){return document.getElementById(o);}
  81. function HoverLi(n)
  82. {
  83. for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
  84. g('tbc_0'+n).className='dis';g('tb_'+n);
  85. }
  86. //-->
  87. </script>
  88. </head>
  89.  
  90. <body>
  91.  
  92. <div class="w936">
  93. <div id="tb_" class="tb_ tabs">
  94. <ul>
  95. <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航</span></a></li>
  96. <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a></li>
  97. <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a></li>
  98. <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a></li>
  99. <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a></li>
  100. <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a></li>
  101. <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a></li>
  102. <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a></li>
  103. </ul>
  104. </div>
  105. <div class="ctt">
  106. <div class="dis" id="tbc_01">内容1</div>
  107. <div class="undis" id="tbc_02">内容2</div>
  108. <div class="undis" id="tbc_03">内容3</div>
  109. <div class="undis" id="tbc_04">内容4</div>
  110. <div class="undis" id="tbc_05">内容5</div>
  111. <div class="undis" id="tbc_06">内容6</div>
  112. <div class="undis" id="tbc_07">内容7</div>
  113. <div class="undis" id="tbc_08">内容8</div>
  114. </div>
  115. </div>
  116. <div class="w936">
  117. <div id="tb_" class="tb_  tabs">
  118. <ul>
  119. <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a></li>
  120. <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a></li>
  121. <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a></li>
  122. <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a></li>
  123. <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a></li>
  124. <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a></li>
  125. <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a></li>
  126. <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a></li>
  127. </ul>
  128. </div>
  129. <div class="ctt">
  130. <div class="dis" id="tbc_09">内容9</div>
  131. <div class="undis" id="tbc_010">内容10</div>
  132. <div class="undis" id="tbc_011">内容11</div>
  133. <div class="undis" id="tbc_012">内容12</div>
  134. <div class="undis" id="tbc_013">内容13</div>
  135. <div class="undis" id="tbc_014">内容14</div>
  136. <div class="undis" id="tbc_015">内容15</div>
  137. <div class="undis" id="tbc_016">内容16</div>
  138. </div>
  139. </div>
  140. <div class="w936">
  141. <div id="tb_" class="tb_  tabs">
  142. <ul>
  143. <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a></li>
  144. <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a></li>
  145. <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a></li>
  146. <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a></li>
  147. <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a></li>
  148. <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a></li>
  149. <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a></li>
  150. <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a></li>
  151. </ul>
  152. </div>
  153. <div class="ctt">
  154. <div class="dis" id="tbc_017">内容17</div>
  155. <div class="undis" id="tbc_018">内容18</div>
  156. <div class="undis" id="tbc_019">内容19</div>
  157. <div class="undis" id="tbc_020">内容20</div>
  158. <div class="undis" id="tbc_021">内容21</div>
  159. <div class="undis" id="tbc_022">内容22</div>
  160. <div class="undis" id="tbc_023">内容23</div>
  161. <div class="undis" id="tbc_024">内容24</div>
  162. </div>
  163. </div>
  164. </body>
  165. </html>

无觅相关文章插件，快速提升流量

0个评论  标签:   

« 上一页下一页 »

这里都有我

分类

标签云

美剧 密码 用户研究 交互 苦逼设计师 mac css/html 吆喝 混搭 体验 交互设计 万树 天涯杂谈 blueidea 笔记 产品 闲谈 设计笔记 asp 公开课 css 鲜果 周杰伦 logo 布局 qiyi 插件 猪八戒 element 文档分享

最新文章