我的家乡潍坊HTML静态网页 学生个人网页设计作品 学生家乡网页模板 简单个人主页成品
生活随笔
收集整理的這篇文章主要介紹了
我的家乡潍坊HTML静态网页 学生个人网页设计作品 学生家乡网页模板 简单个人主页成品
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
家鄉(xiāng)旅游景點網(wǎng)頁作業(yè)制作 網(wǎng)頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設(shè)定居中，內(nèi)部左中右布局，下方橫向浮動排列，大學(xué)學(xué)習(xí)的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細致，使用hover來完成過渡效果、鼠標(biāo)滑過效果等，使用表格、表單補充模塊，為方便新手學(xué)習(xí)頁面中沒有使用js有需要的可以自行添加。
?精彩專欄推薦👇🏻👇🏻👇🏻
? 【作者主頁——🔥獲取更多優(yōu)質(zhì)源碼】
? 【web前端期末大作業(yè)——🔥🔥畢設(shè)項目精品實戰(zhàn)案例(1000套)】
文章目錄🌰
- 一、網(wǎng)頁介紹📖
- 一、網(wǎng)頁效果🌌
- 二、代碼展示😈
- 1.HTML結(jié)構(gòu)代碼 🧱
- 2.CSS樣式代碼 🏠
- 三、個人總結(jié)😊
- 四、更多干貨🚀
一、網(wǎng)頁介紹📖
1 網(wǎng)頁簡介：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點。
一、網(wǎng)頁效果🌌
二、代碼展示😈
1.HTML結(jié)構(gòu)代碼 🧱
代碼如下（示例）：以下僅展示部分代碼供參考~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的家鄉(xiāng)山東濰坊</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="mian"> <div class="top"> <div class="logo"> <img src="images/logo.png" /> </div> </div> <div id="nav"> <ul> <li><a href="index.html">網(wǎng)站首頁</a></li> <li><a href="jianjie.html">家鄉(xiāng)簡介</a></li> <li><a href="techan.html">家鄉(xiāng)特產(chǎn)</a></li> <li><a href="liuyan.html">在線留言</a></li> </ul> </div> <div class="content"> <div class="ibox1"> <div class="ibox1-left"> <img src="images/img2.jpg" /> </div> <div class="ibox1-right"> <div class="title"><h1>家鄉(xiāng)簡介</h1></div> <P>濰坊，古稱濰州、濰縣，別稱鳶都，是山東省地級市，國務(wù)院批復(fù)確定的山東省半島城市群的區(qū)域中心城市。截至2018年，全市下轄5個區(qū)、2個縣、代管6個縣級市，總面積15859平方千米，2019年末常住人口935.15萬人，城鎮(zhèn)人口581.4萬人，城鎮(zhèn)化率62.18%，全市社會消費品零售總額2702.7億元。</P> <p>濰坊市位于山東半島西部，居膠東經(jīng)濟圈中心位置，地跨東經(jīng)118°10′～120°01′，北緯35°41′～37°26′。氣候?qū)倥瘻貛Ъ撅L(fēng)型半濕潤大陸性氣候，市域地貌自北向南，由低到高，形成幾個臺階。濰坊市是世界風(fēng)箏都，連續(xù)榮獲國家環(huán)保模范城市、國家衛(wèi)生城市、國家園林城市、國家食品安全示范城市、國際和平城市、全國文明城市、中國優(yōu)秀旅游城市、中國特色魅力城市、全國科技進步先進城市、全國循環(huán)經(jīng)濟示范市，全國雙擁模范城市、中國最具幸福感城市，中國外貿(mào)百強城市等獎項，榮獲中國人居環(huán)境獎。</p> <div class="more"><a href="jianjie.html">點擊查看更多</a></div> </div> </div> <div class="ibox2"> <div class="title"><h1>著名人物</h1></div> <div class="ibox2-ner"> <div class="bx"> <div class="xhao">1</div> <h2>莫言，本名管謨業(yè)，1955年2月17日出生于山東省濰坊市高密市東北鄉(xiāng)文化發(fā)展區(qū)大欄平安村，中國當(dāng)代作家。首位中國籍諾貝爾文學(xué)獎獲得者。</h2> <img src="images/img4.jpg" /> </div> <div class="bx"> <div class="xhao">2</div> <h2>郭蘭村(1902—1978) 名 馨。濰坊市濰城區(qū)城里人。他擅長工筆人物，兼畫駿馬和工筆花鳥。平生得意作品有《水滸傳人物繡像》一百單八將。</h2> <img src="images/img5.jpg" /> </div> <div class="bx"> <div class="xhao">3</div> <h2>臧克家（1905年10月8日～2004年2月5日），著名詩人，山東濰坊諸城人，曾用名臧瑗望，筆名少全、何嘉。被譽為"農(nóng)民詩人"。第一部詩集是《烙印》</h2> <img src="images/img6.jpg" /> </div> <div class="bx"> <div class="xhao">4</div> <h2>劉墉（1720年-1805年1月24日/25日），字崇如，號石庵，出生于山東高密。清朝政治家、書法家。大學(xué)士劉統(tǒng)勛長子。劉墉享年八十五歲，追贈太子太保，賜謚號文清。</h2> <img src="images/img7.jpg" /> </div></div> </div></div> <div class="foot">版權(quán)所有©我的家鄉(xiāng)山東濰坊</div></div> </body> </html>2.CSS樣式代碼 🏠
@charset "utf-8"; /* CSS Document */body {margin: 0 auto;font-size: 14px;font-family: "微軟雅黑",arial;line-height: 22px;background:#e9ecec; }div,p,input,ul,li,h1 {height: auto;margin: 0;padding: 0;vertical-align: middle; }li {list-style: none; }img {border: 0;margin: 0;padding: 0; }a {color: #333;text-decoration: none; }a:hover {color: #c60707;text-decoration: none;overflow: hidden; } .mian{width:1100px;height:auto;overflow:hidden;margin:0 auto;} .top{height:335px;background:url(../images/img1.jpg);background-repeat: no-repeat;} .logo{width:648px;height:77px;padding-top:75px;margin:0 auto;} #nav{height:45px;background:#0ab0b6; } #nav ul{padding:0px;} #nav ul li{width:275px;text-align:center;height:45px;float:left;} #nav ul li a{display:block;width:275px;height:45px;line-height:45px;color:#FFF;font-size:18px;} #nav ul li a:hover{background:#34bfc4;} .content{height:auto;overflow:hidden;background:#FFF;padding:20px;} .ibox1{height:441px;margin-bottom:30px;} .ibox1-left{width:496px;height:441px;float:left;margin-right:20px;} .ibox1-right{width:544px;float:left;} .ibox1-right p{line-height:30px;font-size:14px;text-indent:2em;margin-bottom:10px;} .title{padding-left:20px;height:45px;border-bottom:#3c7301 1px solid;background:url(../images/img3.jpg) no-repeat;margin-bottom:20px;} .title h1{font-size:18px;color:#0ab0b6;line-height:40px;} .more{height:45px;line-height:45px;width:207px;text-align:center;margin:0 auto;background:#0ab0b6;} .more a{color:#FFF;font-size:14px;} .ibox2{height:590px;} .ibox2-ner{height:480px;padding-top:20px;} .bx{width:217px;float:left;margin:0px 20px;} .bx h2{color:#0e0e0e;line-height:25px;font-size:14px;text-align:center;margin-bottom:15px;font-weight:normal;} .xhao{width:30px;height:30px;margin:0 auto;background:url(../images/xuh.png) no-repeat;line-height:30px;text-align:center;color:#FFF;font-size:16px;margin-bottom:20px; } .foot{height:110px;background:#0ab0b6;line-height:110px;text-align:center;font-size:14px;color:#FFF;} .tit{height:55px;line-height:55px;text-align:center;font-size:20px;font-family:"微軟雅黑";} .content p{line-height:25px;font-size:14px;text-indent:2em;margin-bottom:10px;} .centimg{display:block;margin:0 auto;margin-top:10px;margin-bottom:10px;} hr{margin-bottom:30px;} .cuos{height:230px;background:#eae9e9;padding:15px;margin-bottom:30px;} .cuos img{float:left;margin-right:15px;} .jies{width:745px;float:left;} .jies h3{line-height:35px;font-size:16px;font-weight:normal;} .jies p{line-height:25px;font-size:14px;color:#999;text-indent:0px;} .dianji{color:#F00;} .liuyan{height:auto;overflow:hidden;} .liuyan p{line-height:30px;font-size:14px;text-align:center;} .wenk{border:none;border:#CCC 1px solid;height:20px;line-height:20px;padding:5px;color:#666;width:355px;} .liyk{width:360px;} .tij{display:block;width:150px;height:30px;line-height:30px;text-align:center;border:#666 1px solid;margin:0 auto;} .left{width:300px;float:left;margin-right:20px;} .left h1{line-height:40px;height:40px;font-size:16px;} .left p{line-height:40px;height:40px;text-align:center;font-size:14px;} .right{width:740px;float:left;} .right h1{line-height:40px;height:40px;font-weight:normal;font-size:18px;border-bottom:#CCC 1px dashed;text-align:center;margin-bottom:20px;} .right p{text-indent:2em;font-size:14px;margin-bottom:10px;} .right img{display:block;margin:0 auto;margin-top:10px;margin-bottom:10px;}三、個人總結(jié)😊
一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定)
四、更多干貨🚀
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【👇🏻👇🏻👇🏻關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題😈歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻🔥
總結(jié)
以上是生活随笔為你收集整理的我的家乡潍坊HTML静态网页 学生个人网页设计作品 学生家乡网页模板 简单个人主页成品的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C51单片机程序注释与样例
- 下一篇： 无序列表举例html,HTML中的无序列