Hopes

Start Here..

 

DIV+CSS(1)

首先我们可以分析出我们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.divcss5.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">&nbsp;</div> 
</div> 
<div id="footer">我是底部（下）</div> 
</body> 
</html>

index .css的CSS代码如下：

以下为引用的内容：
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与html源代码。 

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

posted on 2012-05-11 16:09 ** 阅读(154) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。
网站导航:
 

导航

统计

公告

你好！

常用链接

留言簿(2)

随笔档案

文章分类

文章档案

新闻档案

相册

收藏夹

C#学习

友情链接

搜索

最新评论

阅读排行榜

评论排行榜