css+div

最新推荐文章于 2023-03-25 17:26:45 发布

zn505119020

最新推荐文章于 2023-03-25 17:26:45 发布

阅读量244

点赞数

分类专栏： java相关

本文链接：https://blog.csdn.net/zn505119020/article/details/51578769

版权

java相关专栏收录该内容

66 篇文章 1 订阅

订阅专栏

index.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">
<title>Insert title here</title>
<link href="css.css" rel="stylesheet" type = "text/css" media = "all">
</head>
<body>
	<div id="container">
		<div id="header">
			<div id = "menu">
				<ul>
					<li><a href="#">首页</a></li>
					<li class="menuDiv"></li>
					<li><a href="#">博客</a></li>
					<li class="menuDiv"></li>
					<li><a href="#">设计</a></li>
					<li class="menuDiv"></li>
					<li><a href="#">相册</a></li>
					<li class="menuDiv"></li>
					<li><a href="#">论坛</a></li>
					<li class="menuDiv"></li>
					<li><a href="#">关于</a></li>					
				</ul>
			</div>
			<div id="banner"></div>
		</div>
		<div id="PageBody">
			<div id="SideBar">侧边栏
			</div>
			<div id="MainBody">主体内容
			</div>
		</div>
		<div id="Footer"> copy zn 2016
		</div>
	</div>
</body>
</html>

css.css

@CHARSET "UTF-8";
/*  基本信息*/
body {
	font:12px Tahoma;margin: opx;text-align: center;background: #FFF;
}
a:LINK,a:VISITED{font-size: 12px;text-decoration: none;}
a:HOVER{}

/*页面层容器*/
#container{
	width: 800px; margin: 10px auto; height: 810; background: #FFF;
}
#header{
	background: url(2_3.gif) no-repeat #00ff00; 
}
#menu{padding: 20px 20px 0 0}
.menuDiv{width: 1px;height: 28px;background: #999}
#menu ul{list-style: none; margin: 0px; float: right;

}
#menu ul li{float: left; margin: 0 10px; display: block;line-height: 28px;
}
#menu ul li a:LINK,#menu ul li a:VISITED{font-weight: bold; color: #666}
#menu ul li a:HOVER{background-color: 69c; color:#fff}
#menu ul li a:ACTIVE{color: #f00}
#banner{
	background: url(ban.jpg) 0 30px no-repeat;
	width: 730px;
	margin: auto;
	height: 240px;
	border-bottom: 5px solid #400000;
	clear:both;
}
#PageBody{
	width: 800px; height:400; margin: 0px auto;background: #CCFF00
}
#SideBar{
	clear:left;
	width: 198px;text-align: left;float: left;overflow: hidden; 
	border: 1px solid #E00;
	height: 398px;
}
#MainBody{
	clear: right; 
	width: 590px;text-align: center;overflow: hidden;
	border: 1px solid #E00;
	height: 398px;
}
#Footer{
	width: 798px;height:120px;
	text-align:center;
	border:1px solid #ff0000;
	 margin: 0px auto;background: #00FFFF;
}