网页布局

最新推荐文章于 2024-04-26 15:21:52 发布

SuperCustomer

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量107

点赞数

分类专栏： CSS 文章标签： CSS HTML JSP

本文链接：https://blog.csdn.net/SuperCustomer/article/details/83701288

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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、效果

SuperCustomer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页布局

1、JSP页面&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm
复制链接

扫一扫