您的位置：首页 > Web前端 > CSS

如何创建CSS模板

2010-04-28 10:18 711 查看

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

你可以选择任何文本编辑器做为这个模板的CSS编辑器。我强烈建议不要将代码从本CSS教程复制并粘贴到你的编辑器，要自己阅读和理解。如果你想学到更多你必须使用你自己的手指，而不是使用您的鼠标复制。先来看一下简单的HTML代码：

<!DOCTYPEhtml>
<html>
<head>
<title>Layout1</title>
</head>
<body>
<divid="header">Header</div>
<divid="content">Content</div>
<divid="navigation">Navigation</div>
<divid="news">News</div>
<divid="footer">Footer</div>
</body>
</html>
这个CSS模板总共有五部分：标题，导航，内容，新闻和页脚。每个div有一个HTML属性的ID。这些属性以后可以帮助您选择正确的分区当您添加CSS样式。.HTML标记组也被称为容器

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

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

*{margin:0;padding:0;}
下一步是设置整个页面的背影颜色以及字体大小为12PX

body{background:#eeeeee;font-family:sans-serif;font-size:12px;}
设置页头部分的样式，定义本CSS模板的头部宽高

<head><title>Layout1</title><styletype="text/css">...</style></head>
下一步是非常重要的，如果你要建设3栏布局，要设置左右两个各占25%的宽度，然后其他的歌中间的DIV，看看代码

<divid="wrapper"><divid="content">Content</div></div>
给它添加样式

div#wrapper{width:100%;}div#content{margin:025%;background:#BDBD00;}
现在来设置CSS模板导航部分的样式

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

div#wrapper{...float:left;}div#navigation{...margin-left:-100%;}
新闻部分代码

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

底部的css代码

div#footer{background:#800000;width:100%;clear:left;}
现在本css教程中css模板的布局已经准备就绪，开始给网站添加内容

<divid="header"><h1>business©ompany</h1></div>
然后加一些文本样式和背景图片

div#headerh1{color:white;font-size:86px;font-family:
serif;text-align:right;border-bottom:1pxsolid#ffffff;padding-right:20px;
background:#800000url(bg.jpg)repeat-xleft25px;}
最后一部分是格式化页脚的部分，添加页脚的边框等

div#headerh1{color:white;font-size:86px;font-family:serif;
text-align:right;border-bottom:1pxsolid#ffffff;padding-right:20px;
background:#800000url(bg.jpg)repeat-xleft25px;}
本CSS教程就算完了,我们建立了一个简单的CSS模板，有什么不明白的可以再来IT同学会电脑教程网学习

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航