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>

HTML/JSP/CSS网页编写实例，附源码相关推荐

学生个人网页制作html(附源码)
如何做一个简单的学生个人网页制作html1.单击"开始"以输入附件2.打开记事本3.输入<html><body><h1>学生个人网页制作html ...
C#共享内存实例附源码
原文 C#共享内存实例附源码网上有C#共享内存类,不过功能太简单了,并且写内存每次都从开头写.故对此进行了改进,并做了个小例子,供需要的人参考. 主要改进点: 通过利用共享内存的一部分空间(以下称 ...
MVC 网上招聘系统的设计与实现java jsp 程序设计课程设计毕业设计-附源码02135
因上传问题只上传了文案图片未上传网上招聘系统的设计与实现摘要随着时代的发展,中国的互联网技术愈加成熟,已经有越来越多的社会群体开始学会使用互联网技术,整个社会正在朝着智能化.信息化的方 ...
MVC 停车场管理系统java jsp 程序设计课程设计毕业设计-附源码02141
因上传问题只上传了文案图片未上传点赞+收藏+关注 → 私信领取本源代码.数据库摘要如今,我国现代化发展迅速,人口比例急剧上升,在一些大型的商场,显得就格外拥挤,私家车的数量越来越 ...
MVC 网上零食销售系统的设计与实现java jsp 程序设计课程设计毕业设计-附源码02139
因上传问题只上传了文案图片未上传点赞+收藏+关注 → 私信领取本源代码.数据库网上零食销售系统的设计与实现摘要:本文介绍了网上零食销售系统的整个开发过程,采用国内认准的B2C商城建站系 ...
连载四：PyCon2018｜恶意域名检测实例(附源码)
第八届中国Python开发者大会PyConChina2018,由PyChina.org发起,由来自CPyUG/TopGeek等社区的30位组织者,近150位志愿者在北京.上海.深圳.杭州.成都等城市举 ...
前后端滑块验证码实例附源码（java jquery）
背景: 发送短信验证码或者登录等场景操作之前都需要进行图片验证码校验或者滑块验证码校验:此举是为了减少黑盒对服务端进行暴力破解密码或者频发短信轰炸请求的操作: 但如果滑块验证完全由前端进行操作,实际上 ...
制作个人网页过程（附源码）
主标题: <div align="center"><b><h1>Weclome you! My friend - Krazy</h1> ...
【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总（附源码）
[写在前面]web开发过程中,页面背景色想要一个渐变的效果很多时候网上一找全是官网那种很丑的色系,尤其是一些按钮和一些大背景色时候,不能搞得很yellow,今天我就做个工具人给大家罗列一些我在工作过程 ...

HTML/JSP/CSS网页编写实例，附源码

HTML/JSP/CSS网页编写实例，附源码相关推荐

最新文章

热门文章