当前位置:首页 > DIV+CSS实例 > 正文

常用的DIV+CSS网站布局的基本框架结构-完整版

作者:无忧IT 来源:网络收集 【 】 浏览: 修改日期:2009-11-22 我要评论(13)     

这个模板是左右两列布局模板,不再是最基础的搭建框架,更多的块结构也做出来了,如果符合这种结构的可以直接拿来使用(我做的网站大部分都是这种结构的,嘿嘿^_^)。在IE和FF下测试没变形,但没测试W3C认证,估计还通不过(个别兼容的样式通不过)。

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=utf-8" />
<title>常用的DIV+CSS网站布局的基本框架结构-完整版</title>
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="header">
      <h1>头部</h1>
  </div>
  <div class="clearfloat"></div>
  <div id="nav">
    <ul>
      <li><a href="#">导航一</a></li>
      <li><a href="#">导航二</a></li>
      <li><a href="#">导航三</a></li>
      <li><a href="#">导航四</a></li>
      <li><a href="#">导航五</a></li>
    </ul>
  </div>
  <div id="mainContent">
        <div id="main">
          <div class="mainbox">
            <h2>块标题</h2>
            <ul>块内容</ul>
          </div>
        </div>
    <div id="side">
          <div class="sidebox">
            <h4>块标题</h4>
            <ul>块内容</ul>
          </div>
        </div>
    </div>
    <div class="clearfloat"></div>
    <div id="footer">
    底部
    </div>
</div>
</body>
</html>

CSS样式表layout.css代码:

@charset "utf-8";
/* CSS Document */
 

@import url("/css/global.css");

/*body*/
#container {margin:0 auto; width:950px;}
 

/*header*/
#header { height:50px; background:#ff911a;}
#header h1 { padding:10px 20px;}
#nav { background:#FF6600; height:24px; margin-bottom:6px;}
#nav ul li { float:left;}
#nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none;}
#nav ul li a:hover { text-decoration:underline;}

/*main*/
#mainContent { overflow:auto; zoom:1; margin-bottom:6px;}
#side { width:200px; float:left;}
.sidebox { border:1px solid #ed6400; margin-bottom:6px;}
.sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
.sidebox ul { padding:4px 6px;}
#main{ width:742px; float:right;}
.mainbox { border:1px solid #ed6400; margin-bottom:6px;}
.mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
.mainbox ul { padding:4px 6px;}

/*footer*/
#footer { border-top:3px solid #ccc; height:50px; text-align:center; padding:6px;}

被包含的CSS样式表global.css代码(把用于全局的样式单独放在一个样式表中,避免重复,方便调用):

@charset "utf-8";
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
h1 { font-size:20px; font-family:'microsoft yahei';}
h2 { font-size:14px;}
h3 { font-size:14px; font-weight:normal;}
h4 { font-size:12px;}
h5 { font-size:12px; font-weight:normal;}
ul { list-style:none;}
img { border:0px;}
a { color:#195cb5; text-decoration:none;}
a:hover { color:#f00;}
 

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;} 

 

〖栏目所有文章〗Tags: 标签地图

更多评论(13)..网友评价

151905230(125.122.*.*) 发表于:2013-10-22 18:22:59
PS培训群151905230 想更好学习吗?想参加系统专业培训吗??? 各种软件下载,各种科目讲座,全天YY答疑!
fengyiyi(219.140.*.*) 发表于:2014-08-13 20:51:11
这个评论如果能有thread comment就好了,盖楼···
aixuan2046(180.124.*.*) 发表于:2014-07-22 21:49:57
mainbox和sidebox里的<ul>标签里怎么没有<li>
管理员回复:需要的话就加上呀
xiaomi518(112.94.*.*) 发表于:2014-04-04 15:33:44
你的头部那么简单,怎么也要清楚浮动?
管理员回复:这是个基本框架,即是框架,就要保证能适应多种情况
xiaomi518(112.94.*.*) 发表于:2014-04-04 15:31:07
如果不清除浮动,行吗?
管理员回复:不清除可能会导致页面错乱
lisfan(122.239.*.*) 发表于:2014-01-13 19:26:43
hx不要越级,其它没什么,
tracy(59.40.*.*) 发表于:2013-12-14 09:27:43
为什么side块里面要定义个sidebox?我把sidebox的样式写到side里面为什么就不行了
管理员回复:sidebox本身就在side里边呢
雨尘(121.35.*.*) 发表于:2013-12-10 11:51:12
确实上下排列!
管理员回复:不会的,我做站都是用这个框架的

【视频教程】新手常见问题

Copyright ®2013-2018 www.51itstudy.com online services. All rights reserved.

意见反馈 E-mail: kefu@51itstudy.com

声明:本网站尊重并保护知识产权,根据《信息网络 传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在24小时内通本站,我们会及时删除!

    

粤ICP备14015648号-3