CSS+DIV之五个DIV搞定网页布局
打开dreamwaver软件,新建css.css和index.html页面,将这两个文件保存在同一目录下。以下是我新建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"  xml:lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312″ />
  <meta http-equiv="Content-Language" content="gb2312″ />
  <title>徐果萍博客</title>
  <meta name="Keywords" content="博客,互联网,情感,生活,工作" />
  <meta name="Description" content="博客,互联网,情感,生活,工作,徐果萍原创博客" />
  <meta name="author" content="starpiaosnow@163.com,徐果萍" />
  <meta name="robots" content="all" />
  <meta name="googlebot" content="all" />
  <link rel="stylesheet" rev="stylesheet" type="text/css" href="css.css"  _fcksavedurl=""css.css" " media="all"/>
</head>
<body>
  <div id="Container">页面盒子Container
  <div id="Header">页面头部Header</div>
  <div id="Sidebar">页面侧边Sidebar</div>
  <div id="Content">页面内容Content</div>
  <div id="Footer">页面底部Footer</div>

</body>
</html>
 
在主体之间有五个DIV代码:

<div id="Container">页面盒子Container
  <div id="Header">页面头部Header</div>
  <div id="Sidebar">页面侧边Sidebar</div>
  <div id="Content">页面内容Content</div>
  <div id="Footer">页面底部Footer</div>

  在新建css.css之间写入基本样式CSS代码:

/*全局定义*/
body {
 text-align: center; font-family:"宋体", arial;margin:0;
 padding:0; background: #FFF;
font-size:12px; color:red;
}

/*页面盒子*/
#Container {width:800px;margin:0 auto;background:#063;}

/*页面头部*/
#Header {height:50px;background:#063}

/*页面侧边*/
#Sidebar {height:150px;background:#00C}

/*页面内容*/
#Content {height:150px;background:#993}

/*页面底部*/
#Footer {height:50px;background:#000}

以上就是网页基本布局常用的五个DIV,一般网页的布局以此为基准而进行相应的变化.

     页面分为五个部分,其中页面侧边Sidebar和页面内容Content没有并排,将这两个DIV形成同列并对齐,float和clear参数就可以实现布局Layout,然后再接着学标题字体大小的控制以及ul、li标签运用。

  一、float
  语法:float: none|left|right
  参数:none: 对象不浮动 left: 对象浮在左边 right: 对象浮在右边
  说明:该属性的值指出了对象是否及如何浮动。

  如,我可以将Sidebar定位在左边,使得页面侧边和页面内容并列。在css.css文件中写入代码:

         #Sidebar{float:left;width:200px;}
  #Content{float:right;width:600px}

  二、clear
  语法:clear: none|left|right|both
  参数:none:允许两边都可以有浮动对象 both:不允许有浮动对象 
  left: 不允许左边有浮动对象 right:不允许右边有浮动对象
  说明:该属性的值指出了不允许有浮动对象的边。
  
  如,我可以将Sidebar和Content通过Footer来对齐两个层,如果两者层高不相同会出现其一占用Footer位置。在css.css文件中写入代码:
        #Footer{clear:none;}

  三、h1—h6
  我简单地将页面侧边和页面内容进行了定位,现在来设定header标题大小,通过html标题代码h1到h6,一般情况h1网站名/h1,h2网站副标题/h2,h3内容主标题/h3等。在index.html文件中Header写入代码:
  <div id=”Header”><h1>徐果萍博客</h1><h2>www.xuguoping.net</h2></div>

  为了避免标题之外会出现空白之处,可以在css.css的文件中为h1,h2写入如下代码: 
        h1,h2{margin:0;padding:0;}

  四、ul、li
  无论是Header区主导航栏还是Footer区底导航栏,我们都可以利用ul和li来写菜单代码。在index.html文件的Footer区新建DIV层。

       <div id=”Footer”><div id=”Fmenu”>
  <ul>
  <li><a href=”#” mce_href=”#”>博客门</a></li>
  <li><a href=”#” mce_href=”#”>追梦阁</a></li>
  <li><a href=”#” mce_href=”#”>工作室</a></li>
  <li><a href=”#” mce_href=”#”>梦幻国</a></li>
  </ul></div>
  </div>
  预览效果,发现利用ul、li制作导航栏菜单,菜单不在同一行,而且菜单前面还有小圆点.

一、同行去掉小圆点

  因为小圆点是写入分类出现的,所以只要在css.css文件中Footer处写入代码,就可以轻松除去小圆点。
  #Fmenu ul { list-style:none; margin:0px;}
  #Fmenu ul li {float:left; margin:0 15px}
  #Fmenu { padding:15px 15px 0 0}

  其中list-style:none,取消列表前小圆点。
  margin:0px,删除UL的缩进,使所有列表菜单不缩进。
  float:left,内容同一行显示,不再出现分列显示菜单。
  margin:0 15px,菜单之间产生一个30像素的距离,左和右各15px。
  padding:15px 15px 0 0,利用padding属性固定菜单位置。

  二、去掉链接下划线

  小圆点除去之后,菜单下划线如何除去呢?这下划线产生是链接的属性,所以只要有链接属性,都可以通过以下代码进行美化。分别定义链接link、已使用的链接visited、正在被点击链接hover。其中text-decoration去掉下划线使用none即可,而且可以根据三种状态的不同颜色,css.css文件中Footer处写入代码。
  
  三、链接背景色及块级微调

#Fmenu ul li a:link { color:red; text-decoration:none}
  #Fmenu ul li a:visited { color:green; text-decoration:none;}
  #Fmenu ul li a:hover { color:#FFF; text-decoration:underline;}

 

  菜单链接背景色添加非常简单,只要在各种状态下写入background即可。为了使背景色填满整个li的宽度,通过在a的样式定义中增加display:block,使链接以块级元素显示。此外,链接还可以增加text-align:center(菜单的文字属性)、height:20px(增加背景色高度)、margin-left:5px(两菜单相空距离)、line-height:20px(定义行高促使菜单文字纵向居中),css.css文件中Footer处写入代码。
  
    #Fmenu a { display:block; text-align:center; height:20px;}
  #Fmenu li { float:left; width:100px; background:#FFF; margin-left:5px; line-height:20px;}

 
  通过这样三个步骤的话,就可以将菜单美化了。以后可以通过网络资源对这些美化继续深入,初步学习只要会这些,应该会有成就感了。在接着下一课要学习页面布局的其他相关内容!
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312″ />
<meta http-equiv="Content-Language" content="gb2312″ />
<title>徐果萍博客</title>
<meta name="Keywords" content="博客,互联网,情感,生活,工作" />
<meta name="Description" content="博客,互联网,情感,生活,工作,徐果萍原创博客" />
<meta name="author" content="starpiaosnow@163.com,徐果萍" />
<meta name="robots" content="all" />
<meta name="googlebot" content="all" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="all"/>
<style>
/*全局定义*/
 body { text-align: center; font-family:"宋体", arial; margin:0; padding:0; background: #FFF;
font-size:12px; color:red;}
h1,h2{ margin:0; padding:0;}

/*页面盒子*/
#Container { width:800px; margin:0 auto; background:#063;}

/*页面头部*/
#Header { height:50px; background:#063}

/*页面侧边*/
#Sidebar { height:150px; background:#00C; float:left; width:200px;}

/*页面内容*/
#Content { height:150px; background:#993;}

/*页面底部*/
#Footer { height:50px; background:#000; clear:both}
#Fmenu ul { list-style:none; margin:0px;}
#Fmenu li { float:left; margin:0 15px;}
#Fmenu { padding:15px 15px 0 0}
#Fmenu ul li a:link { text-decoration:underline}
#Fmenu ul li a:visited { color:green; text-decoration:none;}
#Fmenu ul li a:hover { color:blue; text-decoration:underline;}
#Fmenu a { display:block; text-align:center; height:20px;}
#Fmenu li { float:left; width:100px; background:#FFF; margin-left:5px; line-height:20px;}</style>
</head>
<body><div id="Container">页面盒子Container
<div id="Header"><h1>徐果萍博客</h1><h2>www.xuguoping.net</h2></div>
<div id="Sidebar">页面侧边Sidebar</div>
<div id="Content">页面内容Content</div>
<div id="Footer"><div id="Fmenu">
<ul>
<li><a href="#" mce_href="#">博客门</a></li>
<li><a href="#" mce_href="#">追梦阁</a></li>
<li><a href="#" mce_href="#">工作室</a></li>
<li><a href="#" mce_href="#">梦幻国</a></li>
</ul></div>
</div>
</div>
</body>
</html>

文章来源:艺吧网站制作  发布于:News_date 已被阅读: 次 BY:CVG