Zack Live » CSS http://cn.zacklive.com 澳门WordPress 主题设计及网页设计 Thu, 29 Jul 2010 14:54:56 +0000 en hourly 1 http://wordpress.org/?v=3.0 通用CSS样式表模版 http://cn.zacklive.com/general-master-css-stylesheet/152/ http://cn.zacklive.com/general-master-css-stylesheet/152/#comments Mon, 22 Feb 2010 08:19:37 +0000 Zack http://cn.zacklive.com/?p=152 继续阅读 >>]]> CSSEditLogo 通用CSS样式表模版
每次设计一个新的网站，我们都要写一个新的CSS样式表，而当中的内容有很多是跟以往的设计类似，甚至一样，像是blockqoute, <h1>至<h6>等设定。因此，我一直想要整理出一个通用的CSS样式表模版(Master Stylesheet)，里面包含一些最基本最常用的CSS设定。当开始设计一个新网站的时候，我们首先载入这个模版，就能马上完成了基本的设计，接下来，只要针对这个网站进行细节的设计，如果模版的设定不适合新网站，可以在新网站的CSS文件重写，CSS会自动覆盖模版的设定。

假设我们把模版命名为master.css，而网站的CSS文件为style.css，那我们可以在style.css开头加入以下语句，即可将模版导入：

@import "master.css";

现在的问题是这个模版要怎么写呢？最近看到了Kyle写的一篇：Master Stylesheet: The Most Useful CSS Technique，是我见过最完整的Master Stylesheet，很多的细节都被考虑到了，直接就能使用。我唯一增加的一段程式码就是在Andrew那里看到的用于重设浏览器设定：

* {
	padding:0;
	margin:0;
}

以下是完整的master.css文件：

/***** Browser Settings *****/
* {
	padding:0;
	margin:0;
}
/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

我准备以此作为第一个版本，未来学到新的技巧，再加入，持续强化它。

另外，这里还有一篇关于Master Stylesheet的教学，有兴趣的朋友请点这里。

Related Posts

]]> http://cn.zacklive.com/general-master-css-stylesheet/152/feed/ 1 使用JQuery实现WordPress多层下拉导航 http://cn.zacklive.com/jquery-milti-level-drop-down-menu-wordpress/122/ http://cn.zacklive.com/jquery-milti-level-drop-down-menu-wordpress/122/#comments Thu, 28 Jan 2010 07:43:46 +0000 Zack http://cn.zacklive.com/?p=122 继续阅读 >>]]> WordPress jquery drop down menu 使用JQuery实现WordPress多层下拉导航

多层下拉导航(Drop Down Menu)，已经是一项十分普遍的技术。只是其实作方法各不相同，随着CSS的普及，有不少人试着以纯CSS的方式来实现，这种方法的最大问题是IE6不能完全支持，要克服这个障碍，需要比本身的程式还要多出很多的代码，所以并不是很多人采用。另外一种做法就是使用JavaScript，也是我们今天要讲的方法。由于时间关系（今天比较忙），本篇只讲怎么做，明天再具体讲解为什么这么做。今天我们要做到跟这个一样的效果

要用JavaScript的话，我会直接想到JQuery，这算是目前最流行的JavaScript库(lib)，有了它，我们能省下很多的时间。而且WordPress本身也包含JQuery，你可以在wp-includes\js里面找到。所以要在WordPress使用JQuery就更简单了，只要在<head></head>之间加入：

<?php wp_enqueue_script('jquery'); ? >

就可以了。现在我们假设我们的导航div是topmenu，请在上面那句的下一行加入：

<script type='text/javascript'>
$("#topmenu a").removeAttr("title");
jQuery(document).ready(function() {
jQuery("#topmenu ul").css({display: "none"}); // Opera Fix
jQuery("#topmenu li").hover(function(){
		jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
		},function(){
		jQuery(this).find('ul:first').css({visibility: "hidden"});
		});
});
</script>

这就是我们要用到的全部JavaScript，好像很少对吧，这就是JQuery可爱的地方。

再来我们看一下WordPress那边，就像平常那样用wp_list_pages()就可以了：

<ul id="topmenu">
<?php wp_list_pages(’sort_column=menu_order&title_li=’); ? >
</ul>

最后就是CSS，也是最重要，最复杂的部分：

#topmenu, #topmenu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	position:relative;
	line-height:1.5em;
	z-index:300;
	width:100%;
	background:#fff;
	font-weight:bold;
} 

#topmenu a {
	display:block;
	padding:0.25em 1em;
	color:#686868;
	border-right:1px solid #c8c8c8;
	text-decoration:none;
	background:#fff;
} 

#topmenu a:hover {
	background:#888;
	color:#fff;
} 

#topmenu li {
	float:left;
	position:relative;
}

#topmenu ul {
	position:absolute;
	display:none;
	width:12em;
	top:1.9em;
	left:-1px;
} 

#topmenu ul a {
	border-left:1px solid #c8c8c8;
} 

#topmenu li ul {
	border-top:1px solid #c8c8c8;
	width:14.1em;
} 

#topmenu li ul a {
	width:12em;
	height:auto;
	float:left;
	border-bottom:1px solid #c8c8c8;
} 

#topmenu ul ul {
	top:auto;
} 

#topmenu li ul ul {
	left:12em;
	margin:0px 0 0 10px;
} 

#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li:hover ul ul ul ul {
	display:none;
} 

#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li li li li:hover ul {
	display:block;
}

你可以将以上的CSS加入到主题的style.css文件里，这样就能实现多层下拉导航的效果。明天我会具体讲解这些代码的意义。写得有点匆忙，有错漏的地方，欢迎指正。

[via: kriesi.at|seoadsensethemes]

Related Posts

]]> http://cn.zacklive.com/jquery-milti-level-drop-down-menu-wordpress/122/feed/ 1