家鄉(xiāng)旅游景點(diǎn)網(wǎng)頁作業(yè)制作 網(wǎng)頁代碼運(yùn)用了DIV盒子的使用方法，如盒子的嵌套、浮動(dòng)、margin、border、background等屬性的使用，外部大盒子設(shè)定居中，內(nèi)部左中右布局，下方橫向浮動(dòng)排列，大學(xué)學(xué)習(xí)的前端知識(shí)點(diǎn)和布局方式都有運(yùn)用，CSS的代碼量也很足、很細(xì)致，使用hover來完成過渡效果、鼠標(biāo)滑過效果等，使用表格、表單補(bǔ)充模塊，為方便新手學(xué)習(xí)頁面中沒有使用js有需要的可以自行添加。
?精彩專欄推薦????????????
? 【作者主頁——??獲取更多優(yōu)質(zhì)源碼】
? 【web前端期末大作業(yè)——????畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例(1000套)】
一、網(wǎng)頁介紹??
1 網(wǎng)頁簡介：此作品為學(xué)生個(gè)人主頁網(wǎng)頁設(shè)計(jì)題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
3.知識(shí)應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識(shí)中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級(jí)三級(jí)頁面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了Logo（源文件）所需的知識(shí)點(diǎn)。
一、網(wǎng)頁效果??
二、代碼展示??
1.HTML結(jié)構(gòu)代碼 ??
代碼如下（示例）：以下僅展示部分代碼供參考~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>浙江</title>
</head>
<body>
<div class="wrapin">
<header class="clearfix">
<div class="logo"> <img src="images/logo.png" alt=""> </div>
<nav>
<ul class="clearfix">
<li><a href="index.html">首頁</a></li>
<li><a href="guanyu.html">浙江經(jīng)濟(jì)</a></li>
<li><a href="tupian.html">圖片鑒賞</a></li>
<li><a href="msgj.html">名勝古跡</a></li>
<li><a href="denglu.html">登錄</a></li>
<li><a href="zhuce.html">注冊(cè)</a></li>
</ul>
</nav>
</header>
<div class="banner"> <img src="images/ban.jpg" alt="" width="100%"> </div>
<div class="box-img">
<ul class="clearfix" style="padding-top:20px">
<li><img src="images/q1.jpg">
<p>浙江風(fēng)貌</p>
</li>
<li><img src="images/q2.jpg">
<p>浙江風(fēng)貌</p>
</li>
<li><img src="images/q3.jpg">
<p>浙江風(fēng)貌</p>
</li>
</ul>
</div>
<div class="box-1 clearfix">
<div class="left"> <img src="images/e.jpg"> </div>
<div class="rii">
<h3>浙江</h3>
<p> 浙江，簡稱“浙”，是中華人民共和國省級(jí)行政區(qū)。省會(huì)杭州，位于長江三角洲地區(qū) [1]
，中國東南沿海，浙江界于東經(jīng)118°01'～123°10'，北緯27°02'～31°11'之間，東臨東海，南接福建，西與安徽、江西相連，北與上海、江蘇接壤，境內(nèi)最大的河流錢塘江，因江流曲折，稱之江，又稱浙江，省以江名，簡稱"浙"。浙江省總面積10.55萬平方千米。<br>
<table width="100%" border="1">
<caption>
浙江方言
</caption>
<tbody>
<tr>
<th align="center" width="210"><div><b>吳語分片</b></div></th>
<th align="center" width="581"><div><b>使用地區(qū)</b></div></th>
</tr>
<tr>
<td align="center" width="210"><div>吳語太湖片</div></td>
<td align="center" width="581"><div>杭州、嘉興、湖州、寧波、紹興、舟山</div></td>
</tr>
<tr>
<td align="center" width="210"><div>吳語臺(tái)州片</div></td>
<td align="center" width="581"><div>臺(tái)州、寧波局部地區(qū)、溫州局部地區(qū)</div></td>
</tr>
<tr>
<td align="center" width="210"><div>吳語金衢片</div></td>
<td align="center" width="581"><div>金華、衢州</div></td>
</tr>
<tr>
<td align="center" width="210"><div>吳語甌江片</div></td>
<td align="center" width="581"><div>溫州</div></td>
</tr>
<tr>
<td align="center" width="210"><div>吳語上麗片</div></td>
<td align="center" width="581"><div>麗水</div></td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
<footer> 浙江 </footer>
</div>
</body>
</html>
2.CSS樣式代碼 ??
/*通用類*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
font-size: 14px;
background: #f5f5f5;
color: #333;
position: relative;
}
img {
border: none;
}
a {
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
ul {
list-style-type: none;
}
em {
font-style: normal;
}
.lt {
float: left;
}
.rt {
float: right;
}
div.clear {
font: 0px Arial;
line-height: 0;
height: 0;
overflow: hidden;
clear: both;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/*wrapin 主體容器寬度*/
.wrapin {
width: 1200px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
header{
height: 80px;
background-color: #348;
}
.logo{
width: 30%;
float: left;
}
.logo img{
width: 180px;
}
nav{
width: 70%;
height: 100%;
float: left;
line-height: 80px;
text-align: center;
}
nav ul li{
width: 16.6%;
float: left;
}
nav ul li a{
display: block;
height: 100%;
color: #fff;
font-size: 16px;
}
.box-1{
padding: 20px 0;
}
.box-1 .left,.box-1 .rii{
width: 50%;
float: left;
}
.box-1 .left img{
width: 92%;
margin-left: 2%;
}
.box-1 .rii{
padding-right: 20px;
box-sizing: border-box;
}
.box-1 .rii h3{
font-size: 28px;
line-height: 30px;
font-weight: bold;
text-align: center;
padding-bottom: 20px;
}
.box-1 .rii p{
line-height: 25px;
}
.box-img ul li{
width: 33.33%;
float: left;
padding: 0 10px;
box-sizing: border-box;
}
.box-img ul li img{
width: 100%;
height: 240px;
display: block;
object-fit: cover;
}
.box-img ul li p{
padding: 15px 0;
text-align: center;
font-size: 16px;
color: #333333;
}
footer{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #334488;
color: #fff;
font-size: 18px;
}
.box-2{
text-align: left;
padding: 0 30px;
box-sizing: border-box;
padding-bottom: 30px;
}
.box-2 h3{
font-size: 32px;
text-align: center;
padding-top: 50px;
}
.box-img-two ul{
padding-bottom: 30px;
}
.box-img-two ul li{
margin-top: 30px;
}
.ty{
font-size: 30px;
text-align: center;
padding: 20px 0;
}
.msgj ul{
padding-bottom: 50px;
}
.msgj ul li{
margin-top: 50px;
}
.msgj ul li img{
width: 40%;
float: left;
}
.msgj ul li .text{
width: 60%;
float: left;
padding: 0 30px;
box-sizing: border-box;
}
.msgj ul li .text h3{
font-size: 25px;
padding-bottom: 50px;
padding-top: 15px;
}
.msgj ul li .text p{
line-height: 25px;
min-height: 80px;
}
.msgj ul li .text a{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #334488;
color: #fff;
font-size: 16px;
border-radius: 15px;
display: block;
margin-top: 50px;
}
.mui-input-group{
width: 500px;
margin: 50px auto;
padding: 30px 50px;
box-sizing: border-box;
border: 1px solid #333333;
}
.mui-input-group label{
display: block;
}
.mui-input-group input{
width: 100%;
height: 40px;
margin: 25px 0;
}
.xq{
padding: 0 50px;
box-sizing: border-box;
padding-bottom: 50px;
}
.xq p{
font-size: 20px;
line-height: 26px;
}
三、個(gè)人總結(jié)??
一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)
- 頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分；
- 所有頁面相互超鏈接，可到三級(jí)頁面，有5-10個(gè)頁面組成；
- 頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)；
- 菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)；
- 要有JS特效，如定時(shí)切換和手動(dòng)切換圖片新聞；
- 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；
- 頁面清爽、美觀、大方，不雷同。
- 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
四、更多干貨??
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “??點(diǎn)贊” “??評(píng)論” “??收藏” 一鍵三連哦！
2.??【????????????關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！文章來源：http://www.zghlxwxcb.cn/news/detail-766264.html
3.以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學(xué)習(xí)??????????????
文章來源地址http://www.zghlxwxcb.cn/news/detail-766264.html
到了這里，關(guān)于HTML+CSS簡單的網(wǎng)頁制作期末作業(yè)——浙江旅游景點(diǎn)介紹網(wǎng)頁制作的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
