如何创建CSS模板

今天IT同学会电脑技术教程网，为您带来一个CSS教程将教您从头开始创建一个CSS模板。 你要了解如何创建一个完整的CSS 3栏布局。 本教程将是一个非常好而且很简单的制作CSS模板的教程。 它使用的头只有一个形象，你完全自由地改变颜色，字体或它的一切东西。 .由此产生的模板是一个有效的XHTML，包括搜索引擎优化后的代码内容编码（导航）和5浏览器（Firefox，Internet Explorer中（6-8），Opera，Safari和铬）进行测试。 在本教程中我假设你了解一些HTML语言的知识。

你可以选择任何文本编辑器做为这个模板的CSS编辑器。我强烈建议不要将代码从本CSS教程复制并粘贴到你的编辑器，要自己阅读和理解。 如果你想学到更多你必须使用你自己的手指，而不是使用您的鼠标复制。先来看一下简单的HTML代码：
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Layout 1</title> 
  5. </head> 
  6. <body> 
  7. <div id="header"> Header </div> 
  8. <div id="content"> Content </div> 
  9. <div id="navigation"> Navigation </div> 
  10. <div id="news"> News </div> 
  11. <div id="footer"> Footer </div> 
  12. </body>
  13. </html> 

这个CSS模板总共有五部分：标题，导航，内容，新闻和页脚。  每个 div有一个HTML属性的ID。 这些属性以后可以帮助您选择正确的分区当您添加CSS样式。 . HTML标记组也被称为容器

HTML标记分区没有任何自己的格式，你不会看到在浏览器中的任何变化。 但仍是最重要的步骤，然后再利用CSS开始。 你必须仔细检查你的div是否打开和关闭正常。 如果没有检查，整个布局将可能失败。添加到HTML文件头部分的HTML标记的样式 。

首先第一个CSS样式是重置所有的HTML标记。 通常，浏览器默认有一些不同的HTML元素的填充。 这些默认的设置在不同的浏览器显示的和你要控制的布局将不一样。 添加下面的行之间的风格标签：

  1. * { margin:0; padding: 0; } 

下一步是设置整个页面的背影颜色以及字体大小为12PX

  1. body { background: #eeeeee; font-family: sans-serif; font-size: 12px; } 

设置页头部分的样式，定义本CSS模板的头部宽高

  1. <head> <title>Layout 1</title> <style type="text/css"> ... </style> </head> 

下一步是非常重要的，如果你要建设3栏布局，要设置左右两个各占25%的宽度，然后其他的歌中间的DIV，看看代码

  1. <div id="wrapper"> <div id="content"> Content </div> </div> 

给它添加样式

  1. div#wrapper { width: 100%; } div#content { margin: 0 25%; background: #BDBD00; } 

现在来设置CSS模板导航部分的样式

  1. div#navigation { background: white; width: 25%; float: left; } 

导航被放置在同一的内容不符合。 .将它移动到左边的部分内容，首先添加浮动包装分区 （即分区包含内容分区）。 后者div有100％的宽度，因此，所有其他分区的标记来afiter它在下一行上。 此行打破增加一条，作为逻辑上是没有其他分区，可以自动显示在右边100％的股利。 但是如果你添加一个负利润导航，它将滑翔相同的行，其中的内容，并在左侧放置。随着缘左侧移动-100％的内容之前，“导航”，从而使第一列（ 查看结果 ）错位：

  1. div#wrapper { ... float: left; } div#navigation { ... margin-left: -100%; } 

新闻部分代码

div#news { background: white; width: 25%; float: left; margin-left: -25%; } 

底部的css代码

  1. div#footer { background: #800000; width: 100%; clear: left; } 

现在本css教程中css模板的布局已经准备就绪，开始给网站添加内容

  1. <div id="header"> <h1>business&copy;ompany</h1> </div> 

然后加一些文本样式和背景图片
  1. div#header h1 { color: white; font-size: 86px; font-family: 
  2. serif; text-align: right; border-bottom: 1px solid #ffffff; padding-right: 20px;
  3.  background: #800000 url(bg.jpg) repeat-x left 25px; } 

最后一部分是格式化页脚的部分，添加页脚的边框等

  1. div#header h1 { color: white; font-size: 86px; font-family: serif; 
  2. text-align: right; border-bottom: 1px solid #ffffff; padding-right: 20px;
  3.  background: #800000 url(bg.jpg) repeat-x left 25px; } 

本CSS教程就算完了,我们建立了一个简单的CSS模板，有什么不明白的可以再来IT同学会电脑教程网学习

posted on 2010-04-28 10:18  IT同学会  阅读(531)  评论(0)    收藏  举报

导航