学生个人网页制作代码

很多在校学生特别是学电子商务的还有计算机专业的，这些都是与网站制作和网页制作有关系的，在毕业时都要做自己的作品，本文小郭就给在校学生分享个人网页制作的代码。

首先，我们可以大概画个草图，想像一下一个网页是什么样的，之后呢，我们可以通过PS根据你的草图设计出整个网页出来，尺寸宽度可以是1920px，然后居中的内容主体部分宽度可以是1200px，网站的布局一般是头部 + 中间主体内容部分 + 网站底部。

一、网站头部代码

<header class="header">
	<ul class="menu-list">
		<li><a href="index.html">首页</a></li>
		<li><a href="index2.html">关于我</a></li>
		<li><a href="index3.html">网页制作</a></li>
		<li><a href="index4.html">毕业论文</a></li>
		<li><a href="index4.html">在线留言</a></li>
	</ul>
</header>

二、主体内容部分代码

<div class="page-wrap">
	<!-- 这里是轮播图代码 -->
	<div class="index-banner">
		<ul>
			<li><a href="###"><img src="images/banner1.jpg" alt="轮播图1"></a></li>
			<li><a href="###"><img src="images/banner2.jpg" alt="轮播图2"></a></li>
		</ul>
	</div>
	<!-- 这里可以放简介介绍一下自己 -->
	<div class="index2">
		<div class="about-box">
			<p>小郭博客是一个分享pbootcms、dedecms、帝国CMS、极致CMS、yzmcms等各类CMS建站教程的技术博客</p>
		</div>
	</div>
	<!-- 这里可以放一些校园生活照片 -->
	<div class="index3-photo">
		<ul>
			<li><a href="###"><img src="images/pic1.jpg" alt="学校操场生活"></a></li>
			<li><a href="###"><img src="images/pic2.jpg" alt="学生宿舍生活"></a></li>
			<li><a href="###"><img src="images/pic2.jpg" alt="教室日常照片"></a></li>
		</ul>
	</div>
</div>

三、网站底部代码

<footer>
	<p>本网页由小郭制作完成，欢迎大家访问小郭博客</p>
</footer>

好啦，以上就是学生个人网页制作的详细代码了。更多网页制作教程请继续关注小郭博客，也可加入建站交流qq群：30051275