one-simpleMagazine v1 正式发布

  经过几天的反复调整,已达到比较好的配色方案。部分细节也得到修正,现在就正式共享给大家使用 ;) Yo2 系统已安装好,在推荐、精美、双栏、三栏、简朴分类中可以找到(不如说全部分类都能显示:D)

  one-simpleMagazine 是一个模仿 wordpress 杂志类模板的布局设计而成,虽然感觉模板有些设计元素,但它却非常简朴。整个模板只有一个 30k大小的背景图片。博客首页采用杂志类型的展现方式,首个文章全文输出,而其他文章则以 300字以内的摘要输出,摘要中可自动缩略显示文章内部的图片(有杂志味)其他分页则全部以摘要显示。博客首页支持双侧栏,一左一右。右侧栏为主侧栏,可摆放常用的区块,而左侧栏则以文章分类、存档的博客导航为主。整个模板基于单层 div 进行渲染,可以加快页面的显示速度(如使用多层 div 嵌套,浏览器则需要下载完整的 html 内容后才能显示) 。

  如需修改左侧栏的宽度,请修改css的#contents-main和#leftbar,当中两个数值加起来应该等于 600px 。而右侧栏则不建议修改宽度,涉及的改动会多一些。背景图片请通过修改 css 进行更换。

  下载:one-simpleMagazine 模板

  *UPDATE: 右侧栏HTML代码放置到页面最下方、侧栏区块加入 overflow:hidden 属性(防止侧栏内容撑破模板)

  *UPDATE: WordPress 官方下载地址:http://wordpress.org/extend/themes/one-simplemagazine ,支持 Gavatar 头像

one-simpleMagazine 模板制作中…

  昨晚想到自己的博客侧栏内容越来越多,基于 K2 模板精简出来的单栏模式,显然无法满足需求。开始琢磨自己做个仿杂志类型的模板

one-simplemagazine-仿杂志 wordpress 模板

  配色比较鲜,部分细节还需要慢慢调整。毕竟这只是我今天下午基于 wordpress 默认模板的基础上制作出来的,有待慢慢打磨 :) 正式作品将会公开下载使用。这也将是我第一个公开发行的 wordpress 模板 :D 请多多支持,提出宝贵意见。

完美实现垂直水平居中的 DIV

  这个问题,估计很多网页设计员都会遇到过,如何在页面中建立出一个垂直水平居中的 DIV 呢?

  我在 google 搜索了一下关键字“div 垂直居中” ,约有71,900项符合的查询。但并未能找到一个正确的,符合 XHTML和CSS规范的办法。自己就琢磨了一下,其实也不难,虽然DIV不支持未明确高度的垂直居中,但这个是可以变通的。

  我们知道 div 的 position 属性是支持百分比数值来进行定位的,有了这个定位能力,我们就可以把 div 的显示坐标定位在网页的绝对中心了,再通过 margin 属性把 div 设置为我们需要的宽度和高度就可以。当然我们的 margin-top 和 margin-left 属性需要使用到负数,把DIV的定位从中心分别向上和向左移动到合适的地方。下面这个例子可以在页面上建立一个垂直水平居中的 DIV:

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直水平居中的 DIV</title>
<style type="text/css">
<!--
#pageFrame {
position: absolute; // 设置为绝对定位
left: 50%; // 设置显示坐标 X
top: 50%; // 设置显示坐标 Y
width:760px; // 设置 DIV 宽度
height:460px; // 设置 DIV 高度
margin-left:-380px; // 根据 DIV 的宽度,设置此值
margin-top:-230px; // 根据 DIV 的宽度,设置此值
background:#EEE;
}
-->
</style>
</head>

<body>
<div id="pageFrame">垂直水平居中的 DIV</div>
</body>
</html>

  使用此方法,既不需要书写不标准的 css 代码,使用各浏览器的Hack,更不需要使用 JavaScript 来实现。