这篇文章主要介绍“DIV CSS布局的方法”，在日常操作中，相信很多人在DIV CSS布局的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”DIV CSS布局的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
布局知识：
DIV+CSS布局，CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。
div+css布局好处：便于维护，有利seo（谷歌将网页打开速度作为排名因素及SEO因素），网页打开速度更快，符合web标准等。
制作div+css网页前思考布局：
首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。
下面通过一个实例讲解下CSS布局分析，我们以DIVCSS5列表页面分析css布局：
首先我们可以分析出我们DIV CSS布局重构此页面结构框架，我们可以看出是 上、中、下结构，其中又包括了左右结构。
由此我们就要写此页面CSS和html时候就先从上到下 从外到内原则写css与html。
我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html ，css文件命名为index.css。这里有个诀窍就是可以导入模板方式来建css与html初始页面，然后将css文件引用到html，也就是我在模板里介绍的css模板，再在CSS模板的基础上再写再添加css。
以下是index.html 的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=gb2312" /> <title>css布局案例实验页面-www.亿速云.com.cn</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">我是头部（上）</div> <div id="centers"> <div class="c_left">我是中的左</div> <div class="c_right">我是中的右</div> <div class="clear"> </div> </div> <div id="footer">我是底部（下）</div> </body> </html> |
index .css的CSS代码如下：
| 以下为引用的内容： body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h2, h3, h4, h5, h6, h7, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} ol, ul ,li{list-style: none;} img {border: 0;} body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;} .clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;} .clear{clear:both;height:1px; margin-top:-1px; width:100%;} .dis{display:block;} .undis{display:none;} /*此上面代码是初始CSS模板，下面是新写CSS布局框架代码*/ #header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;} #header{ height:68px; border:1px solid #CCCCCC; } #centers{ padding:8px 0;} #footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;} #centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; } #centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7} |
你可以考出此两段代码新建个试试，我们就布局出以上美工页面CSS和html框架，然后根据各内容继续添加CSS与html源代码。
到此，关于“DIV CSS布局的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
