一、div+css的基础知识：
1、引进div+css的作用：
我们知道，传统的网站是用table表格标签布局的，为什么如今的网站都抛弃了table、而使用div+css、我想广大的站长朋友们也都清楚！
打个比方，div与css关系就像“字”与“字体、字号、颜色”。div是一张皮,就像网页的一个页面，而css就是毛，就如网页上各个内容板块的风格！有皮无毛无所谓皮毛，反之亦然！所以我们说div与css就是“脸”和“面”的关系！说到这，可能有些朋友更晕了！没关系，继续往下看。。
2、 认识div：
div,是division的简写，我们暂时理解为“分区”的意思吧，由此可知，div的作用只是起到吧一张空白的页面划分为不同的“区间”，这些区间就形成了网页上的各个板块。。。
到底如何利用div这个标签来划分网页内容板块呢，具体技术内容下面再讲！！
3、认识css：
css,是Cascading Style Sheet的缩写，也就是“层叠样式表”的意思！前面说到的划分分区的任务是由div标签控制的，是“脸”那么css就是“面”了，是决定给一张由div标签设计出来的网页这张“脸”化什么妆的！
到这里，广大新手朋友应该对div+css的关系有所了解了吧！o(∩_∩)o...哈哈
二、div+css的技术基础：
我们知道，传统的网页是table和页面内的style标签设计的，缺点很多，比如网页下载慢，要等所有表格标签下载完才会完全显示，占宽带，且不利于搜索引擎的搜索；网页更新升级特别难等等。。
而div+css就不同了，它遵循代码分离的原则，讲求框架(div)和风格（css）相分离.更有利于后期维护，节省宽带，下载快，有利于搜索引擎。
实例：首先建立一个网页index.html。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
</body>
</html> 复制代码上面代码是哟用DW新建的一个html页面，不知道大家是否熟悉html语言，我还是说一下吧。介于<head>与</head>之间的网站头部标签，用来定义网页版本，关键词之类的，不是网页的实际内容！介于<body></body>之间的才是网页的主体内容。所以关于网页的板块设计的代码div标签都要写在<body>与</body>之间！
同<body></body>标签一样，div的标签语法也一样，即<div>文字</div>，注意，在代码的时候，大家一定别忘了 结尾的</div>闭合标签，否则网页会出错！这也是很多站长在更新首页时，后台出现前台首页的一个原因，切记！！
好了，我们继续吧，给刚建立的空白网页加上div标签吧^_^| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<div id="left"> <!--以上为网页主体左栏-->
<p>left</p>
</div>
<div id="middle"> <!--以上为网页主中栏-->
<p>middle</p>
</div>
<div id="right"> <!--以上为网页主右栏-->
<p>right</p>
</div>
</body>
</html> 复制代码以上红字部分就是我们刚刚添加的div标签了。这是如果我们预览网页的话，发现基本的网页内容就有了，预览如下： /left
middle
right 复制代码哎！你会觉得这样的页面真是太难看了！是吧，呵呵，这只是一张"脸"，如何给这张“脸”化化妆！让网页看上去更好看，更有美感！就需要使用我们的css了！
关于css控制页面的方式我先在这里说一下，css是通过对html网页进行风格控制来美化我们的网页的！它css大体有四种链接方式：
一，行内样式表 ：那上面的代码举个例子， <p style=“color:red; font-size:20px;” >left</p>, 这样预览一下你会发现“left”变成了红色，字体为20像素了。
二，内嵌式：就是在<head>与</head>之间加入一下风格代码。
<head>
<style tyle="text/css" rel="stylesheet">
<!--
p{
color:red;
font-size:20px;
}
--!>
</style>
</head>
此种方法也可以实现上面一样的效果。
三、链接式：这种方式是先建立一个css文件，然后把该css风格文件链接如你的网页，该css文件的扩展名是 .css ，如我们建立一个css风格文件 style.css .然后把该文件链接到你网页中，具体做法是在刚刚建立的网页文件的<head></head>之间加入以下代码：
<link href="style.css" rel="stylesheet" type="text/css" />
四、导入样式：导入样式与上面第二种链接样式表基本相容，只是语法上略有不同，采用的是import方式导入的。代码如下：
<head>
<style tyle="text/css" rel="stylesheet">
<!--
@import url(style.css);
--!>
</style>
</head>
相信从以上代码中，大家可以大概了解css的语法规则，我也不多说了，网上有很多的教程，我推荐一个，大家可以进去看看
http://tech.163.com/05/0825/11/1S0F0GQK00091589.html
三、建立div+css的基本网页布局
1、首页index.html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner"></div>
<div id="mainbox">
<div id="left"> <!--以上为网页主体左栏-->
<p>left</p>
</div>
<div id="middle"> <!--以上为网页主中栏-->
<p>middle</p>
</div>
<div id="right"> <!--以上为网页主右栏-->
<p>right</p>
</div>
</div>
<div id="footer"></div>
</body>
</html> 复制代码 2、 关联的css文件style.css的代码如下： @charset "utf-8";
.style {
}
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
color:#3300FF;
background-color:#ccc;
}
#mainbox{
width:1000px;
margin:0px;
background:#fff;
border:1px solid #0000FF;
}
#left{
position:absolute;
top:1px;
left:0px;
width:180px;
height:500px;
margin:0px;
background:#fff;
border:1px solid #0000FF;
}
#middle{
padding:10px;
background:#fff;
height:500px;
margin:1px 190px 0px 190px;
margin-top:1px;
border:1px solid #0000FF;
}
#right{
position:absolute;
top:1px;
right:0px;
height:500px;
margin:0px;
background:#fff;
width:180px;
border:1px solid #0000FF;
}
|