网页布局

最新推荐文章于 2015-10-30 12:33:31 发布

原创最新推荐文章于 2015-10-30 12:33:31 发布 · 170 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #JSP

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了一个使用JSP和CSS实现的网页布局案例。包括JSP页面结构定义及CSS样式设置，通过清晰的代码展示如何创建具有头部、菜单栏、主体内容区域及底部的标准网页布局。

1、JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>首页</title>
</head>
<body>
	<div id="container">
		<div id="header">header</div>
		<div id="menubar">menubar</div>
		<div id="main">
			<div id="sidebar">sidebar</div>
			<div id="content">content</div>
		</div>
		<div id="footer">footer</div>
	</div>
</body>
</html>

2、CSS样式

@CHARSET "UTF-8";

body {
	margin: 5px auto;
}

#container {
	margin: 0 auto;
	width: 900px;
}

#header {
	height: 100px;
	background: #DEF0FF;
	margin-bottom: 5px;
}

#menubar {
	height: 35px;
	background: #DEF0FF;
	margin-bottom: 5px;
}

#main {
	overflow: auto;
	zoom: 1;
	margin-bottom: 5px;
}

#sidebar {
	float: left;
	width: 200px;
	height: 350px;
	background: #B2D3F5;
}

* html #sidebar {
	margin-right: -3px;
}

#content {
	height: 350px;
	background: #DEF0FF;
}

#footer {
	width: 100%;
	height: 60px;
	background: #DEF0FF;
	clear: both;
}

3、效果