这个结构其实已经可以直接使用了。您只需再重新定义字体、背景颜色、每个层和HTML标签的字体风格和一些其他自定义类。
点击下载源代码文件
步骤一:HTML文件结构创建一个新页面,并且把以下代码复制然后粘贴到body标签内:
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)步骤二:CSS文件div id=container
div id=topbar顶栏/Logo层/div
div id=navbar
a href=index.html?homeHome/a
a href=index.html?aboutAbout/a
a href=mailto:myemailaddres@email.comContact me/a
/div
div id=main
div id=column_left
h1文章标题/h1
h22008年12月5日/h2
p在这里添加您的文本内容/p
/div
div id=column_right
h3分类/h3
右侧内容添加分类或widget (twitter、 我博客的读者等)
/div
div id=column_right_adsense
h3AdSense/h3
Adsense 120 X 600
/div
!– Don’t remove spacer div. Solve an issue about container height –
div class=spacer/div
/div
div id=footer? 2008 Information about your site/div
/div
现在,创建一个CSS文件然后链接到index.html
/*
HTML重定义标签
*/
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}/*
页面结构
*//* #container has an absolute width (780 pixel) */
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
/*
自定义类
*//* 在这里添加您的自定义类 */
保存所有文件然后就可以试试了!
点击下载源代码文件