用户界面的设计和实现(DIV+CSS,可编辑的TreeView用户控件)-技术开发专区

用户界面的设计和实现(DIV+CSS,可编辑的TreeView用户控件)

作者：ITPUB论坛编辑： nancy 2008-05-21 00:00

【IT168技术文档】

Div+Css布局

任何系统都要和最终的用户交互才能体现它的价值。在线考试系统也不例外。因为本系统是基于web的系统因此系统和用户交互的就是通过html来完成的。因为界面的设计需要布局和美化。下面我们介绍下本系统是如何利用div+css来给用户界面布局和美化的。

如图所示。该布局分四大块。上面是标题显示部分。中间分两部分。左边是菜单栏。右边是内容区域。最下面是版权信息部分。下面看看上图html代码和css代码

<html>
<head>
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="head">在线考试系统</div>
<div id="main">
<div id="menu">菜单栏</div>
<div id="content">内容区域</div>
</div>
<div id="bottom">版权所有 2008</div>
</body>
</html>

body
{}{
margin:0px;
padding:0px;
text-align:center;
font-size:40px;
}
#head
{}{
width:100%;
height:80px;
background-color:#3399CC;
color:#FFFFFF;
}
#main
{}{
width:100%;
height:480px;
}
#menu
{}{
width:10%;
height:100%;
float:left;
background-color:#33CCCC;
}
#content
{}{
width:90%;
height:100%;
float:right;
background-color:#CCCCCC;
}
#bottom
{}{
width:100%;
height:60px;
background-color:#CCFF00;
}

利用css和div布局不但网页代码比用table布局看起来更加的容易理解。而且也更简洁。我们通过css文件和html分离很好的分离了内容和样式。让整个站点修改样式更加的简单。

关注我们