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、效果
分享到：
相关推荐
网页设计排版布局是这一过程的核心，它涉及到如何合理安排网页中的元素，包括文字、图像、菜单、导航条等，以实现内容与形式的完美结合，提升用户体验和网站吸引力。 网页设计不仅仅是技术活，更是一种艺术创作。...
网页布局是网页设计的核心部分，它决定了网页内容的呈现方式和用户体验。"40种网页布局源代码"是一个集合，提供了40个不同的CSS布局方案，对于初学者来说，这是一个非常宝贵的资源，可以帮助他们理解并掌握CSS在网页...
在互联网世界中，Web标准网页布局是构建高效、可访问且具有良好用户体验的网站的关键技术。这一主题涵盖了HTML、CSS和JavaScript等核心Web技术，旨在确保网页在不同设备和浏览器上的一致显示。以下是对"Web标准网页...
同时，图片和文字的排版布局应该相互呼应，图片可以作为补充说明来辅助文字内容的表达。 参考线的使用能够帮助设计师更准确地定位元素的位置，保证设计的精准性。在Photoshop中可以设置辅助线，这些辅助线不仅帮助...
《变幻之美Div+CSS网页布局揭秘(案例实战篇)》是一本专为初学者和有一定基础的网页开发者设计的教程，旨在通过实例教学，深入浅出地解析如何使用Div+CSS进行网页布局。这本书的核心内容涵盖了HTML基础、CSS选择器、...
"别具光芒——CSS属性、浏览器兼容与网页布局"这个主题涵盖了三个核心概念：CSS属性、浏览器兼容性和网页布局。 首先，我们来详细探讨CSS属性。CSS提供了无数的属性，如颜色、字体、大小、位置等，这些属性共同决定...
在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的核心技术。本学习笔记将深入探讨CSS在网页布局中的应用，帮助读者掌握如何利用CSS创建美观且响应式的网页。 一、CSS基础 在了解网页...
在网页设计领域，`div+css`是一种广泛采用的布局技术，它将内容与样式分离，使得网页结构清晰，易于维护。本主题聚焦于“div+css网页布局设计模板源代码”，我们将深入探讨这一主题，了解相关知识点。 1. **Div元素...
《Div+CSS 3.0网页布局案例精粹》是一本深入探讨网页设计技术的书籍，专注于使用Div和CSS 3.0进行高效、灵活且响应式的网页布局。Div是HTML中的一个容器元素，用于组织网页内容，而CSS 3.0则是层叠样式表的最新版本...
"十个不错的DIV+CSS网页布局模版"这个资源提供了一系列经典布局，可以帮助开发者快速构建网页，理解并掌握这一技术。 首先，我们要了解什么是DIV。在HTML中，是一个通用的块级元素，用于组合其他HTML元素，为它们...
"结构优化之网页排版布局" 网页排版布局是指在网页设计中对视觉元素的安排和组织，以便实现信息内容的传达和展示。网页的设计必须遵循平面设计形式美的法则，使网页获得最大的视觉传达功能。以下是网页排版布局的...
本资源“CSS标准网页布局开发指南（光盘）源码”是一份专门针对CSS布局技术的学习资料，旨在帮助开发者掌握创建高效、标准化的网页布局技巧。 首先，我们要理解CSS布局的基础概念。在网页布局中，我们通常会遇到...
《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源，它涵盖了CSS（层叠样式表）和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例，旨在帮助用户从实践中掌握网页布局的...
网页布局参考 经典布局标准 网页布局 标准 html css 像素
在网页设计领域，Div CSS布局模版是一种常用的技术，用于构建高效、响应式的网页结构。Div，全称为“Division”，是HTML中的一个区块元素，它允许我们将网页内容划分为多个独立的部分，便于管理和样式化。CSS，即...
在IT行业中，网页布局是构建网站视觉效果和用户体验的核心部分。"别具光芒－网页布局案例剖析源代码"是一个专门探讨网页布局设计的资源，它提供了深入理解和实践CSS布局技术的机会。这个压缩包包含了名为"1css网页...
在网页设计领域，`DIV+CSS`是一种广泛采用的布局技术，它将内容与样式分离，使得网页结构清晰，易于维护和更新。本教程将深入探讨`DIV+CSS`网页布局的基础知识，帮助你理解这一核心技能。 首先，我们要了解什么是`...
《DIV+CSS网页布局商业案例精粹》是一本专注于网页设计和开发的专业书籍，其配书源代码提供了丰富的实例，让读者能够深入理解和实践DIV+CSS技术。在网页设计领域，DIV（Division）和CSS（Cascading Style Sheets）是...
《DIV+CSS网页布局商业案例精粹光盘源文件》是一个集合了众多基于DIV和CSS技术的网页设计实例，旨在帮助读者深入理解并掌握这两种关键技术在实际商业项目中的应用。这个压缩包包含了丰富的源文件，提供了实践学习和...