div框架布局？div网页布局的实现方法
各位老铁们，大家好，今天由我来为大家分享div框架布局，以及div网页布局的实现方法的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
怎么可以最简单的使用div+css制作网页框架
1、布局先把大框架确定，再逐步把内部的细节构建出来，从层级关系来看就是由外往内布局；
2、如果你对divcss不是很熟悉，那么你可以先以图片作为背景图片代替
3、如果对布局定位不是很熟练，那么可以暂时以绝对位置来布局
4、自己不熟悉的情况下，在设计平面页面的时候就要先考虑到自己是否有能力写出这个页面的布局出来，或者说自己写出来的不出问题；比如圆角、阴影、半透明效果、模块错位叠加等等；
其实页面布局是否简单只是相对而言的，精通的人和新手的看法肯定不同，从长远来看，新手还是不要取巧，写divcss代码的时候不要怕出错，不要怕难，碰到了问题就去寻找解决的方法，针对问题然后去解决问题是最好的解决方式，当你不再碰到问题或者很少碰到问题的时候，就说明你已经精通或者离精通不远了
还有一点要说一下，学习得有一个喜欢的态度，不要当做负担或者任务来学习，当你对一个东西感兴趣的时候你会学习的很快；就好比读书的时候某些学生某一科的成绩一直很好，绝大部分人其实都是感兴趣才会学的那么好
怎么进行divcss网页布局
1
在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
<html>
<head>
<title></title>
<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1"></div>
<divid="top2"></div>
<divid="top3"></div>
</div>
</body>
</html>
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=这个只是随便写的，你爱等于什么就等于什么
<html>
<head>
<title></title>
<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我截图的照片</div>
<divid="top2">
<divclass=""></div>
<divclass=""></div>
</div>
<divid="top3">
<divclass="jingyan"></div>
<divclass="jingyan"></div>
</div>
</div>
</body>
</html>
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;text-align:center;line-height:50px;font-size:30px}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
.{background:FF6666;height:380px;width:380px;float:left;margin:10px}
.jingyan{background:FFCC00;height:530px;width:380px;float:left;margin:10px;}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
<html>
<head>
<title></title>
<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我老婆的照片</div>
<divid="top2">
<divclass=""><imgsrc="QQ图片20141212090452.jpg"></div>
<divclass=""><imgsrc="QQ图片20141212090346.jpg"></div>
</div>
<divid="top3">
<divclass="jingyan"><imgsrc="QQ图片20141212090224.jpg"></div>
<divclass="jingyan"><imgsrc="QQ图片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的
什么是div+ css布局
1、能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，避免了使用table表格修改部分页面。
2、提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
3、有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
4、浏览器兼容性。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。
5、需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。
div框架布局的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于div网页布局的实现方法、div框架布局的信息别忘了在本站进行查找哦。