您的位置?a href='/'>а˽ > CSS入门 >

认识css布局

发布日期?010-05-20 14:02:25 来源:css5.com.cn

大家都知道从平面设计人员拿来的PS(图片)?a href="/">CSS重构者重构时,需要对网页美工图片进行分析,只有进行很好的分析才能?strong>CSS布局?
因此DIV CSS布局在分析中占很大部分,我们分析网页美工图片不是分析图片好看是否,而是?a href="/">css布局出发分析网页的美工图片,而CSS布局分析直接影响以后的css重构html页面是否好写的一步?/p>

布局知识?br /> DIV+CSS布局,CSS布局是网页html通过div标签+css样式?/a>代码开发制作的(html)网页的统称?br /> div+css布局好处?/strong>便于维护,有利seo?a href="/css/98.html">谷歌将网页打开速度作为排名因素及SEO因素),网页打开速度更快,符?a href="/w3c/">web标准等?/p>

制作div+css网页前思考布局?/strong>
首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中(中包括左右)下布局框架来思考?
下面通过一个实例讲解下CSS布局分析,我们以а˽列表页面分析css布局?br />

首先我们可以分析出我?a href="/">DIV CSS布局重构此页面结构框架,我们可以看出?上、中、下结构,其中又包括了左右结构?/p>

由此我们就要写此页面CSS和html时候就先从上到?从外到内原则写css与html?/p>

我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html ?a href="/css/1339.html">css文件命名为index.css。这里有个诀窍就是可以导入模板方式来建css与html初始页面,然后将css文件引用到html,也就是我在模板里介绍的css模板,再在CSS模板的基础上再写再添加css?/p>

以下是index.html 的html代码?/p>

<!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布局案例实验页面-а˽.com.cn.cn</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">我是头部(上?lt;/div>
<div id="centers">
<div class="c_left">我是中的?lt;/div>
<div class="c_right">我是中的?lt;/div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer">我是底部(下?lt;/div>
</body>
</html>

index .css?a href="/mokuai/17.html">CSS代码如下?/p>

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, 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?a href="/html/26.html">html源代?/a>?

以上是我们今天讲解的css布局_div css布局重要及说明,希望对您有帮助。以上案例未详解希望你亲自多实践,只有实践才能练好技术?nbsp;

标签(Tag): 布局
本文分享URL地址?a href="/css/1.html">/css/1.html

作者:а˽

上一篇:没有?
下一篇:div class div id用法和区?/a>