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

最新推荐文章于 2024-08-10 10:42:27 发布

qitiandasheng521

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量1.9k

点赞数

分类专栏： HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/qitiandasheng521/article/details/119938370

版权

初学者通过实践完成了一个包含Header、PageBody（Sidebar和MainBody）、Footer的简单网页，页面由5个盒子构成，展示了三层结构的HTML/CSS布局。提供源码供学习交流。

摘要由CSDN通过智能技术生成

最近在刚接触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<