Skip to content


十步学会用css建站——第二步:创建html模板及文件目录等;

声明:《十步学会用css建站》这篇文章非我原创,原文来自Steve DennisCreating a CSS Layout from scratch,由jorux翻译。我转贴此文除了想丰富我的blog内容之外也是希望更多的朋 友能够在学习css中获得一些帮助。
1.创建html模板。代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>CompanyName - PageName</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="Enlighten Designs" /> <style type="text/css" media="all">@import "css/master.css";</style></head><body></body></html>

将其保存为index.html,并创建文件夹css,images,网站结构如下:
2.创建网站的大框,即建立一个宽760px的盒子,它将包含网站的所有元素。
在html文件的和之间写入
<div id="page-container">Hello world.</div>
创建css文件,命名为master.css,保存在/css/文件夹下。写入:
#page-container {width: 760px;background: red;}
控制html的id为page-container的盒子的宽为760px,背景为红色。表现如下:

现在为了让盒子居中,写入margin: auto;,使css文件为:

#page-container {width: 760px;margin: auto;background: red;}
现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙,就需要在css文件中写入:
html, body {margin: 0;padding: 0;}

Posted in blogspot.


0 回复

如果关注本文发展,欢迎订阅本文评论 RSS feed.



评论中可以使用HTML(点此看详情)

或是使用 引用通告(trackback).