大家好,又见面了,我是你们的朋友全栈君。
1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。
DIV结构如下: │body {}/这是一个HTML元素,具体我就不说明了/ └#Container {}/页面层容器/ ├#Header {}/页面头部/ ├#PageBody {}/页面主体/ │├#Sidebar {}/侧边栏/ │└#MainBody {}/主体内容/ └#Footer {}/页面底部/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style> /*基本信息*/ body {
font: 12px Tahoma; margin: 0px; text-align: center; background: #FFF; } /*页面层容器*/ #container {
width: 100% } /*页面头部*/ #Header {
width: 800px; margin: 0 auto; height: 100px; background: #FFCC99 } /*页面主体*/ #PageBody {
width: 800px; margin: 0 auto; height: 400px; background: #CCFF00 } /*侧边栏*/ #Sidebar {
float: left; width: 200px; margin: 0 auto; height: 400px; background: #CCFF01 } /*主体内容*/ #MainBody {
float: left; width: 600px; margin: 0 auto; height: 400px; background: #CCCC02 } /*页面底部*/ #Footer {
width: 800px; margin: 0 auto; height: 50px; background: #00FFFF } </style>
</head>
<body>
<div id="container">
<!--页面层容器-->
<div id="Header">
<!--页面头部-->
</div>
<div id="PageBody">
<!--页面主体-->
<div id="Sidebar">
<!--侧边栏-->
</div>
<div id="MainBody">
<!--主体内容-->
</div>
</div>
<div id="Footer">
<!--页面底部-->
</div>
</div>
</body>
</html>
页面如下:
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/106673.html原文链接:https://javaforall.cn