您现在的位置：陈设世家 >> 网络垃圾桶 >> 作品展示 >> DIVCSS >> 正文热点新闻

DIV+CSS网站入门实例

正文：
这是一个非常实用,又非常典型的例子,另外我更觉得这是一个通用的例子,还非常简单,我是这么认为的,因为在经历了以前那段迷惘的时间之后,这也可以算是自己总结的一个经验.

这里我假设你已经会使用网页制作软件，也知道如何附加一个外部样式表。把这个实例尽量的讲的清楚,让读者看完后能做出东西来.

凭心而言,做一个网页确实需要的不仅是网页方面,另外象图象的处理,颜色的感知都是必须的,所以要是希望自己做的网页更漂亮些,那么你就必须不断的学习再学习,这是一个不变的真理.先看下效果

下面你需要做的就是按照我说的一步步去做,先不要理为什么要这么做。这里我按照建一个网站的最精简流程来说，将初学者认为高深的东西统统去掉

一、网站的简单规划
开始做网站的时候不是先打开什么网页设计软件，更应该做的打开你的文字处理软件，或者直接拿起你纸和笔，对自己即将要做的事情进行规划，不要将这一个简单的步骤当成儿戏，经验告诉我们“磨刀不误砍材功”。用到的图片素材，就是网站的站标LOGO和<h1>标题的背景，基本很简单
里面需要写的至少应该象下面的那样：

代码如下

CODE:

网站名：cmsmadesimple网站内容管理系统
网站栏目：首页产品介绍联系方式
网站的目录结构：
   images/          存放需要用到的图片包括标志、修饰图片和内容图片
   index.html       首页（公司介绍）
   product.html    产品页面
   contact.html    联系方式
   style.css          样式表文件

二、页面的结构
做为一个小企业的公司网站来说，或者笼统的说也是这样，就是所有页面的结构比较统一。页面之间会有相同的部分出现，余下的就是不同的地方。所以需要用结构来归整。我们可以使用最常用的结构：
上：页面顶部，logo标志及菜单
中：主体内容
下：页脚，版权信息、重复菜单、联系电话等
关于以下标签可以参看:XHTML中基本标签的解释
通常结构都会层的来做，现在知道为什么叫层叠样式表了吧。层的标签是<div></div>,所以这个页面的结构如下面那样,你来分析一下,看能不能明白

代码如下

CODE:

三、填充内容
网页标准中一个重要的思想就是“内容与表现的分离”，所以现在可以添加内容了，这个内容一般有了之后就不太会容易改变，这只是针对普遍情况。完整的代码

代码如下

CODE:

<html>
<head>
<title>网页标准入门实例</title>
</head>
<body>
<div id="hedaer">
   <div id="topmenu"><ul><li>首页</li></ul></div>
</div>
<div id="content">
   <div id="left">
         <div id="leftmenu">
         <ul>
         <li><a href="index.html">首页</a></li>
         <li><a href="product.html">产品介绍</a></li>
         <li><a href="contact.html">联系我们</a></li>
         </ul>
         </div>
   </div>
   <div id="right>
         <div id="rightimages"></div>
         <h1>cmsmadesimple是一个适合小型网站的内容管理系统</h1>
            <p><a href="http://cmsmadesmiple.cn">CMS Mades Simple</a>是一种易于使用和安装的内容管理程序，和其他CMS产品有明显的不同，这点在使用中也能明显的体会到。使用CMSMS，就像喝咖啡，或者度假一样的轻松，这应该是所有CMS系统所追求的目标，但真正能让人感到舒服与舒心却不那么容易做到。还好，CMS Made Simple 并没有让人失望。</p>
<p>使用CMS Made Simple可以很容易的控制内容和插件，你可以让它们显示在页面的任何位置。通过内置的模版系统可以设置用户所需要的风格样式，让用户的网站别具一格，多姿多彩。 </p>
<p>CMS Made Simple 的目标是提供在以静态网站为主的网站，能有一个简单而且有效的内容管理。如果你的网站内容不是经常改变，你该需要一个什么样的内容管理系统呢？让我们来告诉你：现在有很多的内容管理系统，但是他们基本是相似的。如果你有大量的新闻和文章发布在你的网站上，那么它们是非常好的，但是如果你的网站的内容不是经常改变，或者只有少部分内容改变用这些是否有效率？CMS Made Simple更新你的网站的时候，可以让内容变成静态页面，它不管有多少其他内容存放在你的网站上。</p>
   </div>
</div>
<div id="footer"><hr />
<p><a href="index.html">首页</a> | <a href="product.html">服务理念</a> | <a href="renzheng.html">认证体系</a> | <a href="jing.html">实景展示</a> | <a href="contact.html">联系我们</a></p><p>轻松建设和管理企业网站 <a href="http://cmsmadesmiple.cn">powered by cmsmadesimple</a></p></div></div>
</body></html>

到这里，你可能会发现一个规律，导航菜单是由<ul><li>标签包起来的，标题是由<h1>，内容是由<p>，这就对了，HTML语言的特点就用这些成对的标签将网页内容结构化。a标签是用来做网页之间的链接的

四、用样式表来展现内容，布局结构
新建一个css样式表文件，将以下代码拷贝，保存为style.css，你会发现代码是很规律的书写，其中我给出了一些注释，其中大部分单词都不会陌生,实在不知道什么意思的话,可以查一下字典

代码如下

CODE:

/*定义页面边距及间距,内容对齐方式为居中,背景色*/
body{margin:0;padding:0;text-align:center;background:#E0CE05;}
/*顶部结构的样式,宽760px,高100px注意单位一定不能丢,将网站标志做为背景,不平铺位置左上*/
#header{background:url(images/logo.jpg) #FFF no-repeat left top; height:100px; width:760px;}
/*顶部菜单,如果没有需要的话,其实这个菜单是可以不要的,为了好看就带着吧*/
#topmenu{ height:25px; background:#c00; border :  double buttonface; margin-top:75px; text-align:left;}
/*顶部菜单链接的样式,不带下划线,白色字*/
#topmenu a{ text-decoration:none; color:#fff; line-height:25px;}
#topmenu ul{ margin:0; padding:0 0 0 30px; list-style:none;}
/*中间内容的那一大快,背景色白色*/
#content{width:760px;background:#FFF;}
/*左部结构位置,使用漂浮属性*/
#left{float:left;}
#leftmenu {
MARGIN: 5px 20px 0px 10px;
BACKGROUND: #dfdfdf;
COLOR: #666;
BORDER:#fff 2px solid;
WIDTH:160px;
text-align:left;
}
/*左部菜单列表样式，边距间距为0，去掉列表中前面符号*/
#leftmenu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none;
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
DISPLAY:inline;
}
/*每个菜单上面加上一条白色线*/
#leftmenu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}
/*加上链接后的样式，前面加了一个icon_dot_lmenu.gif图片，实际上就是个点*/
#leftmenu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
/*鼠标指上去的样式*/
#leftmenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff;
}
/*右边主体内容，220对布局很重要，左边框设置成虚线*/
#right{
margin-left:220px;
border-left:dotted 1px #666;}
/*标题<h1>的样式，背景是那个点三角的红条*/
h1{
background:#c00 url(images/bg_navipath.jpg) no-repeat;
padding-left:25px;
font-size:1.2em;
text-align:left;
margin-top:5px;
}
h3{text-align:left;}
p{
text-align:left;
text-indent:2em;
padding-left:10px;
padding-right:10px;
line-height:1.6em;
}
#rightimages{
height:136px;
MARGIN-top: 5px;
text-align:left;
margin-right:10px;
background:url(images/top.jpg) no-repeat;
}
#footer{
width:740px;background:#fff; padding:0 10px; font-size:12px;}
#footer p{text-align:center; margin:0 0 10px 0;}
#footer a{color:#c00; text-decoration:none;}
h2 a{text-decoration: none; font-size:12px;}
h2 a:hover{text-decoration:underline;}

上一篇文章：怎么让DIV的高度，宽度自适应

下一篇文章： CSS控制图片的问题

作者：xiaolout… 文章来源：蓝色理想www.blueidea.com 点击数：更新时间：2006-12-26

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

更多关于 DIV+CSS网站入门实例的文章
没有相关文章

热门影视
最新电视剧

·用博客寻找爱情	·高贵生活就上尊玩网	·星期天去哪聚会	·免费发布企业招聘
·在线一亿片视频观看	·挑战美女无极限	·创建我的书签	·1块钱,自己有网站

DIV+CSS网站入门实例

更多关于 DIV+CSS网站入门实例 的文章

更多关于 DIV+CSS网站入门实例的文章