Tag: CSS预览模式: 普通 | 列表

下拉菜单与文本框的字体大小问题

不管路是不是你经常走的,总会出现一些意想不到的事情,比如陌生的美女,哪家宠物狗的排泄物等,有惊也有喜。

样式编码写多了,也有不可控的时候,这时就只好有问题解决问题,有漏补漏。

先上图。

有问题的:

 

 select 控件的文字大小好像不能继承body的属性。用了下面的代码后,显示正常。

CSS代码
  1. select{fontnormal 12px/25px  "宋体""Arial"; }  

 如图:

查看更多...

Tags: 样式 文字大小 字号 CSS

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1136

CSS在IE与FireFox不同效果点滴

表格(Table)居中的问题

关于Table(表格)在不同浏览器里居中效果不一样的发现:

<table align=center></table>

这样的代码在IE内核浏览器里,是可以居中显示的,但在FireFox里是不会的。

<table style="margin:0px auto;"></table>

这样的代码在FireFox里才会居中显示。

查看更多...

Tags: Table 居中 button CSS 浏览器

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 993

版权符号©(或&copy;)的显示你有注意过如下图这样的细节吗?

看到没有,左侧的图中版权符号©显示得很清楚完美,而右侧的却不如人意——偏小且不清楚。为什么呢?右侧的字号可是比左侧的字号大哦。

其实这个与字号没有关系,而是与字体有关。

左侧的文字样式为:{font-family:arial,Verdana;font-size12px;}。

而右侧的则是系统默认的字体,一般为宋体:{font-family:宋体;font-size17px;}。

如果不是选择左侧所用的字体,字号再大些这个符号都不是很清楚。当然,可以达到左侧效果的字体除arial、verdana可能还有其他的字体,我没有一一去验证,只求问题的解决与目的的实现。

查看更多...

Tags: 版权符号 © CSS 样式 字体

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2417

CSS+JQuery仿苹果官网搜索框的效果

仿苹果(Apple)公司网站的导航栏的样式,包括菜单项及搜索框的样式。搜索框不是完全一样,好像Apple的放大镜不是用图片实现的,这里我没有实现,只是用“搜索”二字代替了。

在网上搜索到的一个例子,稍加修改后更接近Apple网站的导航栏,但搜索框的OnFocus背景色没有实现与Apple的一致。

菜单项及搜索框默认状态:

菜单悬停及搜索框获得焦点时状态:

演示地址http://www.ancher.cn/example/appletext/appletext.html

如果有实现搜索框背景色变化的,请记得与我分享哦。谢谢。

查看更多...

Tags: apple 导航栏 搜索框 自动伸长 jQuery CSS

分类:网络 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 3633

CSS实现按钮效果的一点备忘

一、CSS效果的按钮,用Button包含A标签及IMG标签来美化的。如图:

 

演示http://www.ancher.cn/example/imagebutton/imagebutton.htm    

 

二、A标签模拟成Submit及Reset按钮

XML/HTML代码
  1. <style>  
  2. .grey {  
  3.     background-color: #E1E1E1;background-image: linear-gradient(#EDEDED, #E1E1E1);border: 1px solid #D0D0D0;color: #444444;text-shadow: 1px 1px 1px #FFFFFF;  
  4. }  
  5. .button,.fmsubmit {  
  6.     border-radius: 3px 3px 3px 3px;box-shadow: 0 0 2px #FFFFFF inset;display: block;font-family: Helvetica,Arial,sans serif;font-size: 12px;padding: 0px 12px;text-decoration: none !important;height:30px;  
  7. }  
  8. .button {float: right;margin-right: 3px;}  
  9. .fmsubmit{float: left;margin-right: 3px;}  
  10. .grey {  
  11.     color: #444;border: 1px solid #d0d0d0;background-image: -moz-linear-gradient(#ededed, #e1e1e1);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(#ededed));background-image: -webkit-linear-gradient(#ededed, #e1e1e1);background-image: -o-linear-gradient(#ededed, #e1e1e1);text-shadow: 1px 1px 1px #fff;background-color: #e1e1e1;}  
  12. .grey:hover {  
  13.     border: 1px solid #b0b0b0;background-image: -moz-linear-gradient(#e1e1e1, #ededed);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#e1e1e1));background-image: -webkit-linear-gradient(#e1e1e1, #ededed);background-image: -o-linear-gradient(#e1e1e1, #ededed);background-color: #ededed;}  
  14. .grey:active {border: 1px solid #666;}  
  15. </style>  
  16. <script language="javascript">  
  17. function fsubmit(obj){  
  18. obj.submit();  
  19. }  
  20. function freset(obj){  
  21. obj.reset();  
  22. }  
  23. </script>  
  24. <a href="javascript:fsubmit(document.form2);" class="fmsubmit grey">提交</a>  

效果图如下,左边按钮为默认状态,右边的为悬停状态。

三、具有Submit及Reset属性的按钮。

查看更多...

Tags: CSS3 CSS 按钮 图片按钮

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2420

常见CSS面试题收集

1、  如何定义高度很小的容器?
正解:在IE6下无法定义小高度的容器,是因为有一个默认的行高。
列举2种解决方案:overflow:hidden或font-size:容器高度px

2、  图片下方出现几像素的空白间隙?
正解:将img定义为display:block,或定义父容器为font-size:0

3、  IE6双倍margin的BUG?
正解:display:inline

4、  如何让层在falsh上显示?
正解:在falsh上添加<param name="mode" value="transparent"/>

5、  如何使得文字不换行?
正解:定义包含文字的容器为:width:xxx;white-space:nowrap;

6、  ie中如何让超出宽度的文字显示为省略号?
正解:定义容器为overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

查看更多...

Tags: CSS 样式

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1757

js与CSS实现文字无缝向上固定高度滚屏

用js与CSS实现的文字按固定的行数向上一屏一屏地滚动。js文字分屏滚动效果、js 文字循环滚动js文字无缝滚动

效果如下图:

效果描述:按预设的行数向上一屏一屏地滚动文字,并且中间会有停顿,无缝连续的效果。通过scrollUlTestn可以在一个页面里多次使用,如DIV的id为scrollUlTest1,scrollUlTest2,则在javascript里定义相应的s1,s2就可以了。

很好用的东西。

JS代码比较简单,实际应用修改起来不难:

JavaScript代码
  1. var ScrollUl=function(containerId, numViews, showTime, scrollTime)  
  2. {  
  3. //定时器变量,因为有移到层上时停止滚动的事件处理,而那时可能还没开始定时器呢,所以先把这个变量声明出来。  
  4. this.timer=null;  
  5. this.numViews = numViews;  
  6. this.showTime = showTime;  
  7. this.scrollTime = scrollTime;  
  8.   
  9. this.container = document.getElementById(containerId);  
  10. var ulChild = this.container.getElementsByTagName('ul');  
  11. //这里只有一个 ul 节点,取得它  
  12. var ul = ulChild[0];  
  13. //ul 是未使用 CSS 明确指定高度的,IE 中用 realstyle 取不到高度,只能得到 auto,而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。  
  14. var rect = ul.getBoundingClientRect();  
  15. var heightAll = rect.bottom - rect.top;  
  16. //每一屏的实际像素高度  
  17. var heightView = heightAll / this.numViews;  
  18. //每移动1像素用的毫秒数  
  19. var msPerPx = this.scrollTime / heightView;  
  20.   
  21. //复制出一份来,接在原块的后面,用于头接尾的显示  
  22. var ulCopy = ul.cloneNode(true);  
  23. ulCopy.style.top = heightAll+'px';  
  24. this.container.appendChild(ulCopy);  
  25.   
  26. //要在事件处理函数中使用当前类,得把 this 赋值给一个此范围的变量,如 itself。其实此范围内的变量都是直接可用的,如:heightView, msPerPx  
  27. var itself = this;  
  28. //向上滚动的函数  
  29. var scrollView = function()  
  30. {  
  31. var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ;  
  32. //移动到顶后,把位置复原,两个块继续从 0 开始向上移。  
  33. if (oldTop < -heightAll)  
  34. {  
  35. oldTop = 0;  
  36. }  
  37. ul.style.top = (oldTop - 1) +'px';  
  38. ulCopy.style.top = (oldTop + heightAll- 1) +'px';  
  39.   
  40. //每滚一整屏多停一会。oldTop-1 是为了让其停在整数位置。  
  41. var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx;  
  42. itself.timer = setTimeout(scrollView, duration);  
  43. };  
  44.   
  45. //把 slide 定义为 prototype 的方法时,似乎这样 setTimeout(itself.slide, itself.showTime); 定时操作不灵,而只能是局部函数才能定时操作,如果带参数,还得封装成匿名函数:  
  46. itself.timer = setTimeout(scrollView, itself.showTime);  
  47. //鼠标移上时停止滚动  
  48. this.container.onmouseover = function()  
  49. {  
  50. window.clearTimeout(itself.timer);  
  51. };  
  52. //鼠标移开时继续滚动,不用区分当时是在整屏停止还是滚动中了,全都按静止时间来延时就得了。  
  53. this.container.onmouseout = function()  
  54. {  
  55. itself.timer = setTimeout(scrollView, itself.showTime);  
  56. };  
  57. };  
  58. window.onload = function()  
  59. {  
  60. //第一个总共 20 行,每次显示 4 行,分 5 屏  
  61. var s1 = new ScrollUl('scrollUlTest1', 5, 3000, 1000);  
  62. //第二个总共 18 行,每次显示 6 行,分 3 屏  
  63. //var s2 = new ScrollUl('scrollUlTest2', 3, 3000, 2000);  
  64. };  

查看更多...

Tags: js CSS 文字向上滚屏 文字特效 文字循环滚动 文字无缝滚动

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4394

JS和CSS实现的点击小图片弹出DIV层显示大图片(点击小图显示大图)

先是显示小图片或图片缩小显示,点击后显示大图(原图),用JS+CSS实现。

可用于相册或产品图片展示功能。

显示小图片时效果如下:

点击后显示大图片的效果图如下:

查看更多...

Tags: js CSS 相册 显示大图 点击小图显示大图

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5337