我的家乡潍坊HTML静态网页 学生个人网页设计作品 学生家乡网页模板 简单个人主页成品
生活随笔
收集整理的這篇文章主要介紹了
我的家乡潍坊HTML静态网页 学生个人网页设计作品 学生家乡网页模板 简单个人主页成品
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
家鄉旅游景點網頁作業制作 網頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，內部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細致，使用hover來完成過渡效果、鼠標滑過效果等，使用表格、表單補充模塊，為方便新手學習頁面中沒有使用js有需要的可以自行添加。
?精彩專欄推薦👇🏻👇🏻👇🏻
? 【作者主頁——🔥獲取更多優質源碼】
? 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】
文章目錄🌰
- 一、網頁介紹📖
- 一、網頁效果🌌
- 二、代碼展示😈
- 1.HTML結構代碼 🧱
- 2.CSS樣式代碼 🏠
- 三、個人總結😊
- 四、更多干貨🚀
一、網頁介紹📖
1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了Logo（源文件）所需的知識點。
一、網頁效果🌌
二、代碼展示😈
1.HTML結構代碼 🧱
代碼如下（示例）：以下僅展示部分代碼供參考~
<!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>我的家鄉山東濰坊</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">網站首頁</a></li> <li><a href="jianjie.html">家鄉簡介</a></li> <li><a href="techan.html">家鄉特產</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>家鄉簡介</h1></div> <P>濰坊，古稱濰州、濰縣，別稱鳶都，是山東省地級市，國務院批復確定的山東省半島城市群的區域中心城市。截至2018年，全市下轄5個區、2個縣、代管6個縣級市，總面積15859平方千米，2019年末常住人口935.15萬人，城鎮人口581.4萬人，城鎮化率62.18%，全市社會消費品零售總額2702.7億元。</P> <p>濰坊市位于山東半島西部，居膠東經濟圈中心位置，地跨東經118°10′～120°01′，北緯35°41′～37°26′。氣候屬暖溫帶季風型半濕潤大陸性氣候，市域地貌自北向南，由低到高，形成幾個臺階。濰坊市是世界風箏都，連續榮獲國家環保模范城市、國家衛生城市、國家園林城市、國家食品安全示范城市、國際和平城市、全國文明城市、中國優秀旅游城市、中國特色魅力城市、全國科技進步先進城市、全國循環經濟示范市，全國雙擁模范城市、中國最具幸福感城市，中國外貿百強城市等獎項，榮獲中國人居環境獎。</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>莫言，本名管謨業，1955年2月17日出生于山東省濰坊市高密市東北鄉文化發展區大欄平安村，中國當代作家。首位中國籍諾貝爾文學獎獲得者。</h2> <img src="images/img4.jpg" /> </div> <div class="bx"> <div class="xhao">2</div> <h2>郭蘭村(1902—1978) 名 馨。濰坊市濰城區城里人。他擅長工筆人物，兼畫駿馬和工筆花鳥。平生得意作品有《水滸傳人物繡像》一百單八將。</h2> <img src="images/img5.jpg" /> </div> <div class="bx"> <div class="xhao">3</div> <h2>臧克家（1905年10月8日～2004年2月5日），著名詩人，山東濰坊諸城人，曾用名臧瑗望，筆名少全、何嘉。被譽為"農民詩人"。第一部詩集是《烙印》</h2> <img src="images/img6.jpg" /> </div> <div class="bx"> <div class="xhao">4</div> <h2>劉墉（1720年-1805年1月24日/25日），字崇如，號石庵，出生于山東高密。清朝政治家、書法家。大學士劉統勛長子。劉墉享年八十五歲，追贈太子太保，賜謚號文清。</h2> <img src="images/img7.jpg" /> </div></div> </div></div> <div class="foot">版權所有©我的家鄉山東濰坊</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;}三、個人總結😊
一套合格的網頁應該包含(具體可根據個人要求而定)
四、更多干貨🚀
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥
總結
以上是生活随笔為你收集整理的我的家乡潍坊HTML静态网页 学生个人网页设计作品 学生家乡网页模板 简单个人主页成品的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C51单片机程序注释与样例
- 下一篇： crh寄存器_STM32的CRH、CRL