分类： 站长笔记

发布于

div宽度固定实现中英文混合自动换行CSS

因为有个站要改版，最近在折腾前端，

中间遇到一个小问题，今天抽时间查了资料给解决了。

固定宽度了，中间有中英文混合的文字，在IE下出现不自动换行的问题。

代码如下：

<div class="feedback-text">
<a href="/category/id/3.html" title="" target="_blank">DJ舞曲</a>
</div>

对应CSS：

.feedback-text {
top: 0;
left: 0;
width: 27px;
font-size: 12px;
line-height: 14px;
}

.feedback-text a {
color: white;
text-decoration: none;
padding: 8px 5px;
width: 18px;
display: block;
}

从CSS中可以看出，宽度是固定了，

而中英文混合，出现问题，所以对其进行设定自动换行

通过word-break: break-all;对文字进行强制自行换行

把word-break: break-all;加入上面的CSS中即可，

两者任何一个里面添加都是可以的。

暂时解决了这个问题，如果新问题，再折腾吧。

发布于

XHTML 与 HTML 之间的差异

通过开始编写严格的 HTML，你可以为 XHTML 做好准备。

如何为 XHTML 做好准备

XHTML 与 HTML 4.01 标准没有太多的不同。

所以将你的代码升级至 4.01 是个不错的开始。

另外，你应该马上使用小写字母编写HTML代码，同时绝不要养成忽略类似 </p> 标签的坏习惯。

祝您可以愉快地编码！

最主要的不同：

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

元素必须被正确地嵌套

在 HTML 中，某些元素可以像这样彼此不正确地嵌套：

<b><i>This text is bold and italic</b></i>

在 XHTML 中，所有的元素必须像这样彼此正确地嵌套：

<b><i>This text is bold and italic</i></b>

提示：在嵌套列表中一个容易犯的错误，是忘记内部列表必须位于 li 元素中，就像下面这样：

这是错误的：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

这是正确的：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

注意：在正确代码的例子中，我们在 </ul> 之后插入了一个 </li> 标签。

XHTML 元素必须被关闭

非空标签必须使用结束标签。

这是错误的：

<p>This is a paragraph
<p>This is another paragraph

这是正确的：

<p>This is a paragraph</p>
<p>This is another paragraph</p>

空标签也必须被关闭

空标签也必须使用结束标签，或者其开始标签必须使用/>结尾。

这是错误的：

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

这是正确的：

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须小写

XHTML 规范定义：标签名和属性对大小写敏感。

这是错误的：

<BODY>
<P>This is a paragraph</P>
</BODY>

这是正确的：

<body>
<p>This is a paragraph</p>
</body>

XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下：

<html>
<head> ... </head>
<body> ... </body>
</html>
发布于

CSS让文字、图片及input单行水平对齐的简单方法

CSS单行图文水平垂直对齐方法：

CSS样式：
div img,div input{ vertical-align:middle}

HTML代码：
<div>
<label>姓名：</label><input typt="text" /><img src="xxx.jpg" width=50 height=20 alt="验证码" />
</div>

<div>
<img src="xxx.jpg" alt="注册" /> <a href="#">取回密码"</a>
</div>

这时只要我们给图片加上垂直对齐的属性，后面的文字连接会相应的与图片水平对齐，即： img{     vertical-align:middle;}。当垂直对齐属性为“top“的时候，文字链与图片顶部水平对齐，如次类推。

如果是input与文字链放在一起，在ff和ie7、ie8中文字链都与图片顶部水平对齐，但是在ie6中却是底部对齐，同样我们可以给input添加垂直对齐属性来达到各个浏览器显示效果

发布于

CSS 跨浏览器透明 border

在先进的浏览器中，让一个元素的 border 变为透明，只需要把 border 的颜色改为 transparent ，例如：

#id {

border-right: #0F0 solid 400px;

border-bottom: transparent solid 400px;

}

上面的代码就可以生成一个直角等腰三角形，但在 IE6和7 中，你需要这样写：

#id {

width: 400px;

height: 400px;

width:0;

height:0;

border-right: #0F0 solid 400px;

border-bottom-style: dashed;

}

来源：http://www.codecto.com/2010/10/cross-browser-transparent-border/

发布于

列表中显示文字强制不换行，大于li宽度自动隐藏...

li{
display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap;     //强制不换行
overflow:hidden;            //自动隐藏文字                                                                            
text-overflow: ellipsis;    //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}

涉及关键属性的语法:

1、语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）

2、
语法：
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条

3、
语法：
white-space : normal | pre | nowrap
参数：
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）

发布于

css sprite是什么，怎么用css sprite

一、CSS Sprites简介

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

二、CSS Sprites原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

三、CSS Sprites优缺点

利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！

CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

四、CSS Sprites的使用

有几篇关于CSS Sprites的文章，基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

五、CSS Sprite的例子

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚

六、CSS Sprites的问题

由于IE6存在的background的flicker问题IE6/Win, background image on , cache=‘check every visit’: flicker!，有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题，fivesevensix上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

发布于

span 换行与不换行

    span 换行与不换行
在设置span里面的内容有背景的时候会遇到如下问题：
1、设为display:block可以解决有背景，但换行，因block属性原因，必会换行
2、不用display:block背景便不会全部显示出来
3、float:left也不好用
4、有的只好用定位，较麻烦
解决办法：
把display设置为：inline-block

发布于

解决HawkHost主机安装phpwind连接数据库出错问题

今天在群里看到有人在老鹰主机安装pw出错,就帮忙看了下,后来研究了后,发现错误的原因是共享服务器上安装了Mod security，因此当网址中包含一些敏感字符时，就会被mod security阻止，从而就出现了刚才的错误提示。

解决方法：

在.htaccess文件中添加以下代码即可
 

1
2

SecFilterEngine Off
SecFilterScanPOST Off

网站根目录没有.htaccess文件的，可以自己创建一个，保存为.htaccess然后上传到网站根目录即可。 

发布于

禁止网站显示文件目录列表--索引管理器

开通博客后，几天后发现google收录了几十，感觉有点奇怪，我总共只写了两三篇，查看收录的页面，发 现了问题，原来是网站显示文件目录列表，这种情况对网站安全有很大隐患，所以想办法解决。
进入空间服务器管理面板（我的主机是cpanel面板），找到了索引管理器

看下解释：

索引管理器
通过索引管理器你可以定制在网络上查看目录的方式。 你可以选择默认样式、无索引，或者两种
索引类型。 如果不希望别人查看到你目录中的文件，则选择无索引。

直接进入修改所在目录的索引即可。
。
或者，在你要修改的网站根目录下

找到.htaccess 文件，记事本打后添加一行。输入：Options -Indexes  即可。

以上为Linux主机下修改方法。

注意：在索引管理器修改和修改.htaccess文件的不同是：Options -Indexes  这句未另起一行，可能在有些网站系统下会出现错误，请知悉。