原创力文档- 1、本文档共29页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
手把手教你10步快速制作网站实例
十步学会用css建站(全)十步学会用css建站(全) 1
第1步规划网站 2
第2步创建HTML网站模板及文件目录等 4
第3步将网站分为五个div 6
第4步网页布局与div浮动等 7
第5步网页主要框架之外的附加结构的布局与表现 11
第6步页面内的基本文本的样式（css）设置 15
第7步网站头部图标与logo部分的设计 19
第8步页脚信息的表现设置 21
第9步导航条的制作 23
第10步解决IE浏览器的显示BUG 27
第1步规划网站
首先需要规划网站，本教程将以下图为例构建网站。
其基本布局见下图：
主要由五个部分构成：
Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px
Content 网站的主要内容。 Width: 480px Height: Changes depending on content
Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on
Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px
第2步创建HTML网站模板及文件目录等
1.创建html模板。
代码如下：
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html head meta http-equiv=Content-type content=text/html; charset=UTF-8 / titleCompanyName - 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文件的body和/body之间写入
div id=container Hello world. /div
创建css文件，命名为master.css,保存在/css/文件夹下。写入：
#container { width: 760px; background: red; }
控制html的id为container的盒子的宽为760px，背景为红色,表现如下。
现在为了让盒子居中，写入margin: auto;，使css文件为：
#container { width: 760px; margin: auto; background: red; }
现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：
html, body { margin: 0; padding: 0; }
第3步将网站分为五个div
1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：
div id=container div id=main-navMain Nav/div div id=headerHeader/div div id=sidebar-aSidebar A/div div id=contentContent/div div id=footerFooter/div /div
表现如下：
2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入：
#main-nav { background: red; height: 50px; } #header { background: blue; height: 150px; } #sidebar-a { background: dar
文档评论（0）