web design  web develop

• 0 Comments

使用CSS创建圆角边框的最好方法
带圆角的边框已经成为web 2.0和未来网站设计的同义词，本文介绍了一种简便的制作漂亮的圆角边框的办法。
首先声明，这个边框的宽度是固定的，不过它的高度可以随内容大小自由伸展，具体步骤如下：
Step 1
使用photoshop或者其他你喜欢的图形编辑软件，创建一个带圆角的框，宽度和高度取你认为的合适的尺寸，做出来的样子应该和下面差不多，
�
Step 2
把图片切割成两部分，上和下，上面部分的高度刚好够放box的标题，现在出来了以下两个图片，
Step 3
增加下面部分那个图片的高度以让它能够容纳足够多的内容，图片又变成了，
好了，现在图片已经全部准备就绪，现在是CSS部分，
HTML部分
<div id=box1>
<div> <div>My First Box</div> </div>
<div> <div>With some content</div></div>
</div>
添加以下CSS声明到你的css文件里面去，
.boxtop{ /*make this the same size as the top image*/ display:block; width:267px; height:48px;
/*set the image as a background*/ background-position:left top; background-repeat:no-repeat; background-image:url(images/top.gif); }
.topcontent{ /*set the font style for the box title*/ font-family:arial; font-size:16pt; color:white; /*shift the title down a bit and center it*/ [...]

• 0 Comments

jQuery是一个出色的javascript框架，所有的声明 实现位于一个文件里面，语法非常晦涩难懂，譬如下面
(function(){
var
// Will speed up references to window, and allows munging its name.
window = this,
// Will speed up references to undefined, and allows munging its name.
undefined,
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery = window.jQuery = window.$ = function( selector, context ) {
// [...]

• 0 Comments

浏览器兼容性
水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记

• 0 Comments

以下php类似代码可以判断出浏览器类型，如firefox或者ie，以及操作系统的类型，
if(strpos($_SERVER[HTTP_USER_AGENT], “Maxthon”) && strpos($_SERVER[HTTP_USER_AGENT], “MSIE”)) {
$visitor_browser = “Maxthon(Microsoft IE)”;
}elseif(strpos($_SERVER[HTTP_USER_AGENT], “Maxthon 2.0″)) {
$visitor_browser = “Maxthon 2.0″;
}elseif(strpos($_SERVER[HTTP_USER_AGENT], “Maxthon”)) {
$visitor_browser = “Maxthon”;
}elseif(strpos($_SERVER[HTTP_USER_AGENT], “MSIE 7.0″)) {
$visitor_browser = “MSIE 7.0″;
}elseif(strpos($_SERVER[HTTP_USER_AGENT], “MSIE 6.0″)) {
$visitor_browser = “MSIE 6.0″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “MSIE 5.5″)) {
$visitor_browser = “MSIE 5.5″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “MSIE 5.0″)) {
$visitor_browser = “MSIE 5.0″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “MSIE 4.01″)) {
$visitor_browser = “MSIE 4.01″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “NetCaptor”)) {
$visitor_browser [...]

• 0 Comments

转载自52css.com,  之前对嵌套的css选择器一直存在疑惑，摸不准是平行 还是 父子关系，现在总算明白，凡是逗号间隔的是平行关系，如，
h1, h2, h3, h4, h5, h6 {
 margin: 0.3em 0;
 }
空格间隔的是父子关系，如，
#featuredDefault table{
 font-size:1.5em;
 }
CSS的选择器有多种多样，随着CSS版本的升级，也有新的CSS选择器出来，我们的选择器功能也将会更加的强大。但我们目前的一些浏览器对某一些选择器的支持还不是很好。我们就从最基础的开始讲起吧。
　　类型选择器是用来定位特定的HTML类型元素，如标题h1、段落p、锚元素a、内联元素span、无序列表ul、列表项li等等。这样的选择器除了叫类型选择器以外，还有另外两个名字元素选择器与简单选择器。看下面的例子。

 Example Source Code [www.52css.com]
h1 {color:#f60;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}

　　这些都是最典型的类型选择器，它的特点就在于定位非常简单而明确。但是如果文档结构比较复杂。不同部位的段落p、锚a可能是不同的样式定义，我们该如何准确的命中目标呢？我们在后面的内容将会逐一进行说明。接下来的知识也可以搞定上面的这个小问题。
　　后代选择器是用来定位特定元素的后代。它的语法很简单，两个选择器之间加一个空格就行了。例如上面的问题，我们作一个设置。

 Example Source Code [www.52css.com]
h1 {color:#f60;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}
li a {text-decoration:none;}

　　这样设置以后。在列表以外的锚会有下划线，而列表项的锚就不会带有下划线了。在前面的文章中，我们特别讲到了如何为id及class类命名，或许也存在着滥用id与class的习惯。希望精确的控制代码，但有时候是非常不必要的。我们完全可以通过选择器轻松的命中目标。看下面的例子。

 Example Source Code [www.52css.com]
#main a {color:#000;}
#sider a {color:#fff;}
<div id=”main”>
    <a href=”http://www.52css.com/”>52CSS.com</a>
</div>
<div id=”sider”>
    <a href=”http://www.52css.com/”>52CSS.com</a>
</div>

　　同样的锚链接元素，我们可以定义成两种不同的色彩，我们完全没有必要为它们各指定一个id或class。我们在实际操作中会发现一个有趣的现象，很多同样的元素处于页面中，只是位置不同罢了。我们通常都能通过给他们的父元素定义一个id。然后再用后代选择器，就可以准确的命中目标了。
　　我们谈一下伪类选择器pseudo-class，它们有如下的东东所构成：

 Example Source Code [www.52css.com]
a:link {color:#f00;}
a:visited {color:#f60;}
a:hover {color:#fc0;}
a:active {color:#000;} 
input:focus {background:#ccc;}

• 0 Comments

CSS和图片做搜索框    http://www.cssrain.cn/article.asp?id=78
Photoshop 导航条制作 http://www.tutorialwiz.com/navbar/
http://www.haoxiai.net/tuxingsheji/Photoshop/129450.html

• 0 Comments

Block-level element: 能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, div

Inline element: 依附其它块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span

Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.

块级元素是构成一个网页的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.
CSS盒子模型 立体图片

CSS盒子模型 平面图

• 0 Comments

www.256pixels.com favicon 图标制作
http://www.html-kit.com/favicon/gallery/  favicon图标库
www.Logoease.com 网站 logo 图片 制作

• 0 Comments

网站安装好wordpress之后，当我键入网址 http://www.kingdict.net/i,不知为何页面直接跳向http://kingdict.net/i,这样显得很难看，因此我修改.httpaccess文件添加了全站301跳转功能，以为这样就可以解决问题，
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^kingdict.net$ [NC]
RewriteRule ^(.*)$ http://www.kingdict.net/$1 [L,R=301]
但这于事无补，我仔细查看page source，发现里面的URL全部都是不带www前缀的，也就是说这是程序设定的原因，细致的回顾了一下，好像没什么地方提示我选择带前缀还是不带前缀，wp-config.php文件里面也没有相关的code，后面在control panel里面发现了如下设定，

我把它们加上www然后提交更新，浏览器里面输入网站，这下终于出来了www前缀.
附：单个页面重定向方法
Redirect 301 /old.html http://www.kingdict.net/new.html

• 0 Comments