写在前面
虽然已经毕业了好些年，但是还是想把学生时代做的很多原创性网页制作实例分享出来哈，希望能给后生们带来一些实质性的帮助哈，当然也分享了源代码在公众号《IT黄大大》上面，回“我的家乡连云港”即可。
涉及知识
我的家乡网页制作，网页制作demo，简单的网页制作，3页面网页制作，网页制作图文说明，我的家乡网页制作源码下载。
原创于CSDN博主《IT黄大大》，主页有更多demo分享哟，期待您的访问与关注！！！
效果展示
page1
page2
page3
1、网页构思
其实在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。
在我的页面制作过程中，我主要采用的是浮动式布局，从左往右，从上至下的顺序来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，首先我会设计下面几部分：
- 头部：banner（主要包括导航图和logo之类的）
- 菜单：menu（主要是采用a标签进行跳转的）
- 主题：main（核心内容展示）
- 底部：foot（版权声明）
2、制作步骤
其实在第一部分就说了一些关于网页的整体架构的四个部分，这里主要讲一下main模块的实现，在制作的过程中我们应该把每个模块想象成一个盒子，然后往盒子里塞东西，这个也就是我们常说的盒子模型
2.1 搭建框架
核心框架如下几个部分：
头部和菜单及尾部可以是一样的，其中中间部分是体现不同页面的主题介绍。
<body>
<div class="title_img">
<img src="images/logo.png" width="83" height="92" alt="">
<h2>最美海港-连云之城</h2>
</div>
<div class="title_menu" id="title"><a href="../index.html">
<div class="menu_li active">家乡简介</div>
</a>
<a href="daylog/daylog.html">
<div class="menu_li">千里之行</div>
</a>
<a href="daylog/aboutme.html">
<div class="menu_li">特色详情</div>
</a>
<div class="search">
<span>站内搜索</span>
<input type="text" />
<button>搜索</button>
</div>
</div>
<div class="info">
<div class="left">
<div class="about">>>关于家乡</div>
<div class="left-img"></div>
<div class="left-text">
</div>
</div>
<div class="right">
<div class="log">
<div class="daylog"> >>个人爱好区</div>
</div>
<div class="pic">
</div>
</div>
<div class="bott"></div>
</div>
</body>
2.2 丰富元素
针对中间模块我做了一个丰富，也就是有左右结构，左边主要介绍有关连云港的基本资料，右边可以写一些关于自己的兴趣生活等。
如下所示我将采用ul li标签进行制作。
<div class="left">
<div class="about">>>关于家乡</div>
<div class="left-img"></div>
<div class="left-text">
<div class="name">
<img src="images/girl.gif" />
<span>古称“梅州”</span>
</div>
<div class="name">
<a href="https://baike.baidu.com/item/%E8%BF%9E%E4%BA%91%E6%B8%AF/177420?fr=aladdin"><span>江苏省 连云港市</span></a>
</div>
<div class="name f-color">
<span>中国首批沿海开放城市、新亚欧大陆桥东方桥头堡、“一带一路”交汇点城市、国家东中西区合作示范点、上海合作组织出海基地</span>
</div>
</div>
</div>
<div class="right">
<div class="log">
<div class="daylog"> >>个人爱好区</div>
<ul>
<li><img src="images/ico4.gif" /><span> 【喜足球】足球场上挥洒汗水，全身的投入，享受运动着的生命</span><span class="ri-li">
2018-09-25</span></li>
<li><img src="images/ico4.gif" /><span> 【听音乐】静下来的时候也喜欢一个人听听时下流行的音乐 </span><span class="ri-li">2017-09-22
10:13</span></li>
<li><img src="images/ico4.gif" /><span> 【爱电子科技】科技最诱人，电子工程最诱我 </span><span class="ri-li">2019-03-22
08:03</span></li>
<li><img src="images/ico4.gif" /><span> 【偶游戏】学习课余也喜欢享受那五杀的感觉，劳逸结合 </span><span class="ri-li">2019-02-20
11:07</span></li>
<li><img src="images/ico4.gif" /><span> 【约电影】三两个室友一起影院走起，享受视觉盛宴</span><span class="ri-li">2017-09-20
10:44</span></li>
</ul>
</div>
<div class="pic">
<div class="daylog"> >>日常生活</div>
<div style="padding:10px;margin-left:0px;">
<ul>
<li><img src="images/sc_1.jpg" width="130" height="160" /></li>
<li><img src="images/sc_2.jpg" width="130" height="160" /></li>
<li><img src="images/sc_3.jpg" width="130" height="160" /></li>
</ul>
</div>
</div>
</div>
2.3 添加样式
页面制作完成之后，我们要针对页面的每个元素进行样式的设计，比如页面字体颜色，每个元素的位置等。
<style type="text/css">
body,
html {
list-style: none;
}
#title {
width: 950px;
height: 60px;
background-image: url(images/navbg.gif);
background-repeat: repeat-y;
background-size: 100% 100%;
margin: 0 auto;
}
#title .menu_li {
font-size: 14px;
float: left;
line-height: 60px;
margin: 0px 10px;
width: 100px;
height: 60px;
color: #016941;
font-weight: bold;
text-align: center;
}
.title_img {
font-size: 9px;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 950px;
height: 225px;
margin: 0 auto;
background-image: url(images/banner.png);
}
.title_img img {
margin-left: 60px;
margin-top: 80px;
float: left;
}
h2 {
font-size: 59px;
float: left;
line-height: 80px;
margin-left: 120px;
color: #FF6EB4
}
.info {
width: 950px;
height: 700px;
margin: 0 auto;
margin-top: 0px;
border: 1px solid #FDF2CB;
}
.infotitle {
width: 100%;
text-align: center;
margin-top: 0px;
padding-top: 10px;
}
.active {
background-image: url(images/navbghover.gif);
background-repeat: repeat-y;
background-size: 100% 100%;
}
.left {
width: 350px;
margin-top: 15px;
margin-left: 20px;
float: left;
}
.about {
border-bottom: 2px solid #A92929;
font-size: 16px;
width: 370px;
height: 40px;
line-height: 40px;
}
.left-img {
width: 240px;
height: 320px;
margin: 10px auto;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(images/jx.png);
}
.name {
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
.f-color {
color: #B13C3C;
font-weight: bold;
line-height: 30px;
}
.search {
padding-top: 15px;
float: right;
color: #016941;
}
.right {
width: 550px;
margin-top: 15px;
margin-left: 390px;
padding: 20px 40px;
}
.log {
width: 500px;
height: 250px;
border: 1px solid #CCCC99;
}
.daylog {
width: 500px;
height: 30px;
line-height: 30px;
background-color: #CCCC99;
}
ul {
list-style: none;
font-size: 10px;
width: 450px;
padding: 5px 10px;
}
ul li {
border-bottom: 1px dotted #666;
margin-top: 10px;
}
.ri-li {
display: inline-block;
margin-right: 0px;
float: right;
}
.pic {
margin-top: 30px;
width: 500px;
height: 250px;
border: 1px solid #CCCC99;
}
.pic ul li {
width: 130px;
height: 130px;
float: left;
margin: 0px 10px;
border: none;
}
.pic td {
margin: 0px 10px;
}
.bott {
width: 950px;
height: 56px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(images/footer.gif);
margin-top: 20px;
text-align: center;
line-height: 80px;
}
input {
border-color: #016941;
width: 100px;
}
button {
background-color: #016941;
color: #fff;
}
h2 {
font-size: 59px;
float: left;
line-height: 80px;
margin-left: 120px;
color: #000;
}
td {
margin-top: 10px;
}
</style>
原创于CSDN博主《IT黄大大》，主页有更多demo分享哟，期待您的访问与关注！！！
3、源码分享
其实这个是我学生时代自己写的源码，纯原创，希望大家能够有所启发，当然主要就是希望通过这篇文章给大家带来一个制作网页的思路，而不是说一昧的复制粘贴，当然肯定有读者想要源码，我在自己的公众号里面分享了有关所有页面的源码，希望大家能够
- A、微信公众号《IT黄大大》
- B、回复【我的家乡连云港】
- C、即可下载完整源码包。
希望新的一年能和大家一起学习，一起成长，一同进步，争取早日实现暴富，感谢最美的时光有您的关注哈！！！