使用CSS不用程序实现文字自动截断 用省略号代替

2016年07月27日 56 阅读

.test{ width:200px; height:50px; border:1pxsolidred; padding:10px; overflow:hidden;/*不显示超过对象宽度的内容*/ text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记（...）*/ white-space:nowrap;/*限制在一行内显示所有文本*/ } www.jb51.net 脚本之家 div.test{ width:200px...

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

2016年07月27日 60 阅读

关于CSS对各个浏览器兼容已经是老生常谈的问题了,网络上的教程遍地都是.以下内容没有太多新颖,纯属个人总结,希望能对初学者有一定的帮助. 一、CSSHACK 以下两种方法几乎能解决现今所有HACK. 1,！important 随着IE7对！important的支持,！important方法现在只针对IE6的HACK.（注意写法.记得该声明位置需要提前.） <style> #wrapper { width:100px！important;/*IE...

网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

2016年07月27日 58 阅读

网页布局+纯CSS纵向下拉菜单IE6/IE7兼容网页布局+纯CSS纵向下拉菜单*{margin:0;padding:0;border:0;}html{background:#bfc4c7;/*背景颜色*/}body{font:12px/150% "宋体";margin:0 auto;width:770px;text-align:center;}#menu,#nav,#footer{clear:both;}#nav{padding-left:20px;tex...

CSS图片拼合生成器只需上传zip包即可

2016年07月27日 51 阅读

简单介绍下：CSS图片拼合（CSSsprites）可有效降低图片文件的HTTP连接请求数.多个图片将以一定间距合并为一个大图片文件.页面中使用这些图片的元素将利用background-position这一CSS属性来显示拼合图片中的指定位置。这一技术可有效提升网站性能,尤其是网页上有众多小图片时,如许多菜单栏图标. 这里有一篇Realazy的CSSSprites技术详细介绍，CSSSprites被我生生译成了CSS图片拼合，希望大家不要抗议：P有更好的译法...

用iframe margin实现调用其他网页的某一区域的方法

2016年07月27日 65 阅读

逛网中发现，用iframe的margin函数实现调用一网页的部分区域，太有才了，以后就方便了 新建网页 body{ } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]...

用margin和overflow属性实现div间距的方法

2016年07月27日 56 阅读

通常我们在制作上图的时候，会分别给四个div加上不同的css属性，来实现中间间隔。但我们更希望的是不需要对html标签做标识，直接能通过css实现，今天在论坛上小志提出了一个很不错的解决方案。使用overflow:hidden属性。或许很多人已经是这样用了，我没用过，觉得耳目一新。呵呵。其实道理很简单，我们按照正常的设置li的margin-right、margin-bottom属性，这样的结果自然会比我们期望的要多出来右边和下方的，这个时候我们通过ul的父...

用css alpha 滤镜 实现input file 样式美化代码

2016年07月27日 58 阅读

在WEB上传文件时，要用到上传框： <inputtype="file"id="f"name="f"> 这东东在IE（其他偶没经过测试）中是一个非常特殊的对象。如果是您手动写入的或其他对象经过某些事件触发填入的值，由于安全问题，在进行提交表单时，往往会被清空，所以上传失败。简单点说，除非你的鼠标亲自点到了上传框f上，IE才会给你上传文件！ 哪怕你将f的onclick句柄赋给某个对象，如： <inputtype="file"id="f"nam...

非常漂亮的css星级效果总结第1/2页

2016年07月27日 57 阅读

用纯css打造星级评分效果正在被越来越多地应用在网络RIA中，结合ajax等技术，可以渲染出很出色的视觉效果和很棒的用户体验，在这篇文章开始之前，大家可以先去cssheaven感受一下。 最近由于项目需要，我在网上找了很多css星级评分的例子和说明，但是发现大多数都是翻译国外的文章，而且解释得并不是非常清楚，所以我决定自己来做一个总结，也希望能够给大家一些帮助。 首先用中文写一下这个效果的算法： 1.使用背景图片的位置切换来获得星级效果； 2.整个效果最关...

RGB 加成色 说明

2016年07月27日 58 阅读

RGB颜色称为加成色，因为您通过将R、G和B添加在一起（即所有光线反射回眼睛）可产生白色。加成色用于照明光、电视和计算机显示器。例如，显示器通过红色、绿色和蓝色荧光粉发射光线产生颜色。 绝大多数可视光谱都可表示为红、绿、蓝（RGB）三色光在不同比例和强度上的混合。这些颜色若发生重叠，则产生青、洋红和黄。 加成色（RGB） R.红色G.绿色B.蓝色 您可以通过使用基于RGB颜色模型的RGB颜色模式处理颜色值。在RGB模式下，每种RGB成分都可使用从0（黑色）...

使用CSS解决文字环绕图片问题的代码

2016年07月27日 62 阅读

上图是美工为一站点制作的图文并茂的新闻标题列表，采用表格进行布局，右上和下部分分布在两个单元格中，程序实现起来可不太容易：要么分两次查询，一次取4条，一次取5条；要么一次取出9条，再分在两个单元格中显示。能不能通过设置图片的属性，让文字和图片像Word中一样可以四周环绕对齐？这样程序就不用理会图片，只负责一次读取显示就可以了。经测试将图片的float属性设置为left可解决我们的问题，效果如下图： ·新闻标题列表 ·新闻标题列表 ·新闻标题列表 ·新闻标题...

为了防止乱码，请将用于页面编码的meta charset放到title的前面

2016年07月27日 53 阅读

好多新手做网页的时候，有时候发现网站标题是乱码，下面就是方法，也是一种防止出错的规范 通常我们放置的顺序是先title，再charset，就像下面的： 复制代码 代码如下: <title>我的页面脚本之家www.jb51.net＜/title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 现在请将它们顺序颠倒过来: 复制代码 代码如下:...

DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags

2016年07月27日 57 阅读

做DIV+CSS页面，不推荐使用的标签代码，请尽量不要使用这些HTML标签： Donotusethesehtmlelementsinhtmlpages. Presentationalelementsshouldnotbeused. Supportforsomeelementshasbeen（orwillbe）deprecated;theyshouldnotbeused. Don"tUseTheseTags Presentational复制代码 代码如下:b...

大家看了就明白了css样式中类class与标识id选择符的区别小结

2016年07月27日 51 阅读

你可以用类选择符class和标识选择符id来定义自己的选择符。 这样做的好处是，依赖于class或者id，你可以不同地表现相同的HTML元素。 在CSS中，类选择符在一个半角英文句点（.）之前，而id则在半角英文井号（#）之前。 看起来像这样： #top{background-color:#ccc;padding:1em}.intro{color:red;font-weight:bold;} HTML与CSS的连接用属性id和class。像这样： <...

DL.DT.DD实现左右的布局简单例子第1/2页

2016年07月27日 88 阅读

这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方： 1、如果用UL还布局，右边一栏比较麻烦； 2、文字外边的边框自适应比较麻烦； 3、很可能要定死高度； 所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的： 1、布局合理一些； 2、将来扩展很方便； 3、CSS一定很少； 试着写了写，看一看还行！在可控范围内！ 布局布分当然不用说了： 复制代码 代码如下:<h1>标题</h1&...

css利用A标签的背景可能作出很有意思的效果第1/2页

2016年07月27日 57 阅读

这个效果是今天有人写邮件给我问的一个效果，记前以前利用A标签的背景写过一个类似的效果。于是刚刚回来就写了一下他要求的效果！顺便贴出来和大家分享一下，如果你很有创意，那么你一定能作出更有意思的效果。他提出来的效果，是九天音乐首页一个FLASH的作的效果，要用CSS模仿同样的效果，可能是因为不想用FLASH或是SEO之类的目地。于是用FW作了两张GIF的图片，来模仿这样的效果，由于是是测试用，所以图片等很多方面没有考虑的特别细。有些粗糙，但看上去还是有那么点意...

写CSS_关于Border你可能需要注意的地方第1/2页

2016年07月27日 58 阅读

今天写了一段CSS,写时突然想到的,写出来和大家分享一下;我们可能早已习惯了padding在不同浏览器中的不同之处,但这个你不一定注意过; 先说一个场景,例如: 一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧？因为300+100正好是400呀！好了,先试一试！ 我开始写了（头部省略）:复制代码 代码如下:<style> #yellow{width:400px;border:1pxs...

css布局网页水平居中常用方法

2016年07月27日 63 阅读

页面水平居中一般会令人很头疼，尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。 以下内容参见《精通CSS》。 HTML代码： 复制代码 代码如下:<body> <divid="wrapper"> </div> </body> IE居中办法： body{ text-align:center; min-width:760px; } #wrapper{ width:720px; t...

使用CSS框架布局的缺点和优点小结

2016年07月27日 53 阅读

现在好多网站都用了div+css来布局网页结构，优点是速度快了，可负面影响呢，来看下面的分析前端时间写了一篇《利用CSS框架进行高效率的站点开发》，有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构，也对不少朋友提出CSS框架的建议。效果是很明显的。当然，CSS框架有利也有弊，最近也看了一些相关的文章。一些感想，与大家分享。 CSS框架之利： 1、开发效率的提高。 如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。...

Web2.0下XHTML+CSS 设计需要注意的地方小结

2016年07月27日 58 阅读

注意事项： 1、除选择DOCTYPE之外的语句必须使用小写英文字母书写。其中包括MacromediaDreamweaver生成的鼠标动作，如OnMouseOver也必须修改成onmouseover。 2、XHTML语法规要求所有的标识都必须有开始和结束。例如<body>和</body>、<p>和</p>等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如<br>写成<br/...

table高级应用把表格进行到底（必看）

2016年07月27日 55 阅读

1.表格的分隔线可以隐藏 <tableborderrules=colscellspacing=0align=left>可以隐藏横向的分隔线 <tableborderrules=rowscellspacing=0align=right>可以隐藏纵向的分隔线 <tableborderrules=nonecellspacing=0align=center>可以隐藏横向和纵向的分隔线 2.表格的边框不断在闪 以下方法可以令表格的...