web design  web develop

带圆角的边框已经成为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*/ padding-top:10px; text-align:center; }

 .boxbottom{ /*make this the same width as the bottom image*/ /*don’t set the height as this needs to be flexible*/ display:block; width:267px; /*set the image as a background*/ background-position:left bottom; background-repeat:no-repeat; background-image:url(images/bottom.gif); }

.maincontent{ /*set the font style for the main content*/ color:white; font-family:arial; font-size:12pt; display:block; /*align the main content nicely*/ padding-left:20px; padding-bottom:40px; padding-right:30px; }

ok，这就是全部了，示例可以看这里cornersdemo.htm。

(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 ) {

// The jQuery object is actually just the init constructor ‘enhanced’

return new jQuery.fn.init( selector, context );

},

// A simple way to check for HTML strings or ID strings

// (both of which we optimize for)

quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,

// Is it a simple selector

isSimple = /^.[^:#\[\.,]*$/;

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {

首先(function(){…})应该是一个匿名的javascript类，将所有的变量，函数声明封装起来，不至于暴露到全局的naming space中去， 然后声明了一些变量 并赋给window，再重新暴露出去，以便外部接口使用，譬如window.$,这是function(selector, context )的缩写，这些语法普通的javascript教程似乎都不怎么提及，这让我想起另外一个暴露接口的方法，也让人迷惑不解，

window['MGJS_CMT'] = {};
window['MGJS_CMT']['reply'] = reply;
window['MGJS_CMT']['quote'] = quote;

水平居中，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标记

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 = “NetCaptor”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Netscape”)) {
$visitor_browser = “Netscape”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Lynx”)) {
$visitor_browser = “Lynx”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Opera”)) {
$visitor_browser = “Opera”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Konqueror”)) {
$visitor_browser = “Konqueror”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Mozilla/5.0″)) {
$visitor_browser = “Mozilla”;
} else {
$visitor_browser = “其它”;
}
if(strpos($_SERVER[HTTP_USER_AGENT], “NT 5.1″)) {//操作系统
$visitor_os = “Windows XP (SP2)”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “NT 5.2″) && strpos($_SERVER[HTTP_USER_AGENT], “WOW64″)){
$visitor_os = “Windows XP 64-bit Edition”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “NT 5.2″)) {
$visitor_os = “Windows 2003″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “NT 6.0″)) {
$visitor_os = “Windows Vista”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “NT 5.0″)) {
$visitor_os = “Windows 2000″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “4.9″)) {
$visitor_os = “Windows ME”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “NT 4″)) {
$visitor_os = “Windows NT 4.0″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “98″)) {
$visitor_os = “Windows 98″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “95″)) {
$visitor_os = “Windows 95″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Mac”)) {
$visitor_os = “Mac”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Linux”)) {
$visitor_os = “Linux”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “Unix”)) {
$visitor_os = “Unix”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “FreeBSD”)) {
$visitor_os = “FreeBSD”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “SunOS”)) {
$visitor_os = “SunOS”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “BeOS”)) {
$visitor_os = “BeOS”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “OS/2″)) {
$visitor_os = “OS/2″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “PC”)) {
$visitor_os = “Macintosh”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “AIX”)) {
$visitor_os = “AIX”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “IBM OS/2″)) {
$visitor_os = “IBM OS/2″;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “BSD”)) {
$visitor_os = “BSD”;
} elseif(strpos($_SERVER[HTTP_USER_AGENT], “NetBSD”)) {
$visitor_os = “NetBSD”;
} else {
$visitor_os = “其它”;
}
$out_ieos = “您的操作系统以及浏览器信息：$visitor_os $visitor_browser “;

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等等。这样的选择器除了叫类型选择器以外，还有另外两个名字元素选择器与简单选择器。看下面的例子。

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

　　后代选择器是用来定位特定元素的后代。它的语法很简单，两个选择器之间加一个空格就行了。例如上面的问题，我们作一个设置。

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

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

　　我们谈一下伪类选择器pseudo-class，它们有如下的东东所构成：

Photoshop 导航条制作 http://www.tutorialwiz.com/navbar/

http://www.haoxiai.net/tuxingsheji/Photoshop/129450.html

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

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

块级元素是构成一个网页的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.

CSS盒子模型 立体图片

CSS盒子模型 平面图

http://www.html-kit.com/favicon/gallery/  favicon图标库

www.Logoease.com 网站 logo 图片 制作

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