Table of contents
write in front
Although I have graduated for several years, I still want to share many original web page production examples I did during my student days, hoping to bring some substantial help to the younger generations. Of course, I also shared the source code on the public account "IT Huang Dada" above, just go back to "My hometown Lianyungang".
involving knowledge
My hometown web page production, web page production demo, simple web page production, 3-page web page production, web page production graphic description, my hometown web page production source code download.
原创于CSDN博主《IT黄大大》，主页有更多demo分享哟，期待您的访问与关注！！！
Effect display
page1
page2
page3
1. Web page concept
In fact, when making this kind of web page work, we usually use floating layout to achieve it. Because the compatibility requirements of this type of static page are not high, we need to think about the general framework.
In the process of making my page, I mainly use the floating layout, designing and making it from left to right, and from top to bottom. Of course, I will first To make a layout for the page frame, I will first design the following parts:
- Header: banner (mainly including navigation map and logo)
- Menu: menu (mainly uses a tag to jump)
- Theme: main (core content display)
- Bottom: foot (copyright statement)
2. Production steps
In fact, in the first part, we talked about the four parts of the overall architecture of the web page. Here we mainly talk about the implementation of the main module. During the production process, we should imagine each module as a box, and then stuff things into the box. This is what we often call the box model
2.1 Build the framework
The core framework has the following parts:
The header, menu and tail can be the same, and the middle part is the theme introduction that reflects different pages.
<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 Rich elements
I have enriched the middle module, that is, it has a left and right structure. The left side mainly introduces the basic information about Lianyungang, and the right side can write some about your own interests and life.
As shown below, I will use the ul li tag to make it.
<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 Add styles
After the page is created, we need to design the style for each element of the page, such as the page font color, the position of each element, etc.
<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. Source code sharing
In fact, this is the source code I wrote when I was a student. It is purely original. I hope everyone can be inspired. Of course, the main purpose is to bring you an idea for making web pages through this article, rather than just copy and paste. Of course, I am sure. Some readers want the source code. I have shared the source code of all pages in my official account. I hope everyone can
- A, WeChat Public Name《IT Yellow University》
- B. Reply [My hometown Lianyungang]
- C, ready to goDownload complete source package.
I hope that in the new year I can learn with you, grow together, and make progress together, and strive to become rich as soon as possible. Thank you for your attention in the most beautiful time! ! !