HTML/JSP/CSS网页编写实例，附源码
最近在刚接触web前端，学习网页编写，虽然网上案例很多但是实战起来还是问题很多，经过不懈努力终于完成了一个简单的web页面，在此记录一下，分享源码大家共同学习。
最终效果如下： 如上图所示整个页面有5个盒子组成，这5个盒子放置于Container中 共有3个层级，层级结构如下： Container –Header页面头部 –PageBody–页面主体 ----Sidebar–侧边栏 ----MainBody–内容展示主体 –Footer–底部
页面完整代码如下：
// An highlighted block
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>welcome</title>
<style type="text/css">
/*基本信息*/
*{
/*去除浏览器默认设置，否则页面顶部会出现空白边距*/
margin:0;/*设置外边距为0*/
padding:0;/*设置内边距为0*/
}
html,body{
font:12px Tahoma;/*全局设置字体和大小*/
margin:0 auto;
padding-bottom:0;
height:100%;
}
/*页面层容器*/
#Container{
width:100%;
height:100%;
background:#F5DEB3;
z-index:-1;
}
/*页面头部*/
#Header{
width:100%;
height:35px;
margin:0 auto;
background:#ADD8E6;
}
/*页面主体*/
#PageBody{
width:100%;/*与父节点同宽*/
height:calc(100% - 70px);/*计算盒子的高度，基于父节点高度-70px，此方式适配不同大小的屏幕，始终不会出现滚动条*/
top:0;
max-width:inherit;/*设置最大宽度为父盒子宽度*/
margin:0 auto;
box-sizing:border-box;
background:#E6E6FA;
display: flex;
}
/*侧边栏*/
#Sidebar{
float:left;
width:10%;/*父盒子宽度的10%*/
top:0;
bottom:0;
margin:0 auto;
background:#808080;
}
/*主体内容*/
#MainBody{
float:left;/*悬浮位置居左，注意是相对位置，如同存在多个同级盒子，则并排分布*/
width:90%;/*父节点宽度的90%*/
top:0;
bottom:0;
margin:0 auto;
background:#F5F5DC;
}
/*页面底部*/
#Footer{
width:100%;
height:35px;
margin:0 auto;
background:#ADD8E6;
}
.menu-style{
/*定义公共样式，对引用它的地方起作用*/
width:100%;/*注意为盒子宽度的10%，应用的地方不同计算出来的宽度不同*/
height:25px;
margin:0;
padding:0;
background:#DCDCDC;
}
</style>
</head>
<!--
<style type="text/css">
html{
height:100%;
}
body{
background-image:url(images/backimage.jpeg);
background-size:100% 100%;
padding:0;
margin:0;
}
</style>
-->
<body>
<div id="Container">
<!--页面容器层-->
<div id="Header">
<h1 align="center">智能接口测试系统</h1>
<!-- 页面头部 -->
</div>
<div id="PageBody">
<!-- 页面主体 -->
<div id="Sidebar">
<!-- 侧边栏 -->
<input type="button" value="首页" class="menu-style" onclick="window.location=register.jsp"><br/>
<form action="showAllCases_do" method="get">
<input type="submit" value="用例维护 " class="menu-style"><br/>
</form>
<input type="button" value="用例执行 " class="menu-style" onclick="window.location=showAllCases.jsp"><br/>
</div>
<div id="MainBody">
<!-- 主题内容 -->
</div>
</div>
<div id="Footer">
<!-- 页面底部 -->
</div>
</div>
</body>
</html>