網(wǎng)站開(kāi)發(fā)服務(wù)商百度網(wǎng)頁(yè)版網(wǎng)址
🎉精彩專欄推薦 💭文末獲取聯(lián)系
?? 作者簡(jiǎn)介: 一個(gè)熱愛(ài)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
💂 作者主頁(yè): 【主頁(yè)——🚀獲取更多優(yōu)質(zhì)源碼】
🎓 web前端期末大作業(yè)： 【📚畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁(yè)制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】
🔖 HTML+CSS+JS實(shí)例代碼： 【🗂?HTML+CSS+JS實(shí)例代碼 (炫酷特效網(wǎng)頁(yè)代碼) 繼續(xù)更新中…】
🎁 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南： 【📂web前端零基礎(chǔ)到高級(jí)學(xué)習(xí)視頻教程 120G干貨分享】
🥇 關(guān)于作者: 曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過(guò)去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 💪堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開(kāi)來(lái)！
HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。
文章目錄
- 一、網(wǎng)頁(yè)介紹
- 一、網(wǎng)頁(yè)效果
- 二、代碼展示
- 1.HTML代碼
- 2.CSS代碼
- 三、個(gè)人總結(jié)
- 四、精彩推薦
一、網(wǎng)頁(yè)介紹
1 網(wǎng)頁(yè)簡(jiǎn)介：此作品為學(xué)生個(gè)人主頁(yè)網(wǎng)頁(yè)設(shè)計(jì)題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的網(wǎng)頁(yè)制作，畫面精明，代碼為簡(jiǎn)單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁(yè)編輯：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
3.知識(shí)應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁(yè)知識(shí)中的: Div+CSS、鼠標(biāo)滑過(guò)特效、Table、導(dǎo)航欄效果、Banner、表單、二級(jí)三級(jí)頁(yè)面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了Logo（源文件）所需的知識(shí)點(diǎn)。
一、網(wǎng)頁(yè)效果
二、代碼展示
1.HTML代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<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=gb2312" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" tppabs="http://yanshi.brahj.cn/chengpin/dianying/css/index.css">
<script src="js/jquery-1.4a2.min.js" tppabs="http://yanshi.brahj.cn/chengpin/dianying/js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.KinSlideshow-1.2.1.min.js" tppabs="http://yanshi.brahj.cn/chengpin/dianying/js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){$("#KinSlideshow").KinSlideshow();
})
</script>
<style type="text/css">
.code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{font-size:14px;}
.info{ font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;}
.info p{ margin:0; padding:0; line-height:22px; text-indent:40px;}
h2.title{ margin:0; padding:0; margin-top:50px; font-size:18px; }
h3.title{ font-size:16px;}
.importInfo{ font-family:Verdana; font-size:14px;}
</style>
</head><body bgcolor="#0d0908">
<center>
<div class="head"><img src="images/top.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/top.jpg" /></div>
<div class="page"><div class="nav"><p>好萊塢大片推薦</p>
</div><div class="content" style="padding-top:10px;">
<div class="guntu">
<marquee><img src="images/h1.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h1.jpg" width="160" height="90" /> <img src="images/h2.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h2.jpg" width="160" height="90" /> <img src="images/h3.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h3.jpg" width="160" height="90" /> <img src="images/h4.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h4.jpg" width="160" height="90" /> <img src="images/h5.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h5.jpg" width="160" height="90" /> <img src="images/h6.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h6.jpg" width="160" height="90" /></marquee>
</div><div class="jianzhu"><p>美國(guó)喜劇</p><p>英國(guó)喜劇</p></div><div class="jianzhu_bot"><div class="jianzhuA">
<a href="dianying1.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying1.html"><img src="images/1.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/1.jpg" border="0" align="left" style=" float:left;"/></a>
<p style=" float:left; margin-left:10px; display:inline">《媽媽咪呀》主角是希臘小島上以開(kāi)餐館為生的一對(duì)母女。女兒即將出嫁，她很希望自己的父親能夠親自在婚禮當(dāng)日將她的手遞到新郎手中，可惜她的媽媽從來(lái)沒(méi)有告訴過(guò)她到底誰(shuí)是她的父親。于是在出嫁之前，她偷看了媽媽的日記，發(fā)現(xiàn)媽媽有三個(gè)情人都極有可能是她的親生父親，在情急之下，她根據(jù)所找到的舊信件地址，寄了三張請(qǐng)柬邀請(qǐng)他們參加她的婚禮。在她媽媽不知道的情況下，女主角的“三個(gè)爸爸”在...<a href="dianying1.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying1.html">[詳細(xì)]</a><br />
</p>
</div><div class="jianzhuA"><a href="dianying6.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying6.html"><img src="images/6.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/6.jpg" border="0" align="left" style=" float:left;"/></a><p style=" float:left; margin-left:10px; display:inline"> 如果你認(rèn)為則是一部描寫幽靈僵尸的電影，那你就大錯(cuò)特錯(cuò)了，本片改編自丹尼爾·克羅斯的同名漫畫小說(shuō)，講述了兩個(gè)二十歲的少女在高中畢業(yè)和以后生活之間這段時(shí)間里，一段奇怪的、不知拿來(lái)做什么的空白。在她們看來(lái)這段時(shí)間里的現(xiàn)實(shí)世界比幽靈世界更可怕。<br />伊尼德和麗貝卡是一對(duì)非常要好的朋友，是那種呆在一起時(shí)特別舒服自在的朋友
...<a href="dianying6.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying6.html">[詳細(xì)]</a></p>
</div></div><div class="jianzhu_bot"><div class="jianzhuA">
<a href="dianying2.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying2.html"><img src="images/2.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/2.jpg" border="0" align="left" style=" float:left;"/></a>
<p style=" float:left; margin-left:10px; display:inline">本片根據(jù)1998年的法國(guó)電影《Le Dinerde Cons》改沒(méi)編而成。主人公和一班自命聰霸明的朋友相約舉行“白癡晚宴?！?#xff0c;規(guī)則很簡(jiǎn)單，即每人攜一名“白癡之最”共赴晚餐，看看到底誰(shuí)帶來(lái)的客人最愚不可及，以此來(lái)逗樂(lè)取笑。后來(lái)主人公找到了一個(gè)看起來(lái)很傻的男人，原以為他是最佳人選。沒(méi)想到因?yàn)殛幉铌?yáng)錯(cuò)，對(duì)方傻頭傻腦的舉動(dòng)，反倒將主人公愚弄了一番，讓其叫苦不迭。...<a href="dianying2.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying2.html">[詳細(xì)]</a><br />
</p>
</div><div class="jianzhuA"><a href="dianying7.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying7.html"><img src="images/7.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/7.jpg" border="0" align="left" style=" float:left;"/></a><p style=" float:left; margin-left:10px; display:inline"> 在這個(gè)動(dòng)蕩不安的亂世中，很少有像英國(guó)情報(bào)局這么值得信賴的單位。它擁有全世界最頂尖的情報(bào)員、最尖端的先進(jìn)科技、最犀利的武器配備以及最有效的情報(bào)搜集網(wǎng)，而且每一名英國(guó)情報(bào)局特派員都是十八般武藝樣樣精通的頂尖高手。
<br />
因此當(dāng)他們得到有人想偷走英國(guó)王室珠寶的情報(bào)時(shí)，就派出局里最頂尖的超級(jí)間諜：天字第一號(hào)特派員前往調(diào)查。但是...他很快就被壞掛掉了。更慘的是
...<a href="dianying7.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying7.html">[詳細(xì)]</a></p>
</div></div><div class="jianzhu_bot"><div class="jianzhuA">
<a href="dianying3.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying3.html"><img src="images/3.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/3.jpg" border="0" align="left" style=" float:left;"/></a>
<p style=" float:left; margin-left:10px; display:inline">對(duì)于剛滿30歲的皮特·卡爾文（保羅·路德脯飾）來(lái)說(shuō)，沒(méi)有什么比目丁前這件事更讓他尷尬的了－－前不久的一天晚上，他向交往了好幾年的女朋友祖伊（拉什達(dá)·瓊斯飾）求婚，而祖伊也答應(yīng)了他的求婚。本來(lái)，這是個(gè)挺讓人高興的事，但正當(dāng)皮特著手準(zhǔn)備婚禮的時(shí)候才發(fā)現(xiàn)，錢不是問(wèn)題，時(shí)間不是問(wèn)題，訂酒店選婚紗選蜜月度假在哪里通通都是問(wèn)題，最大的問(wèn)題是，皮特根本找不到一個(gè)可以做他新婚伴郎的人...<a href="dianying3.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying3.html">[詳細(xì)]</a><br />
</p>
</div><div class="jianzhuA"><a href="dianying8.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying8.html"><img src="images/8.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/8.jpg" border="0" align="left" style=" float:left;"/></a><p style=" float:left; margin-left:10px; display:inline"> 影片講述了英國(guó)女王伊麗莎白二世的父親喬治六世國(guó)王的故事。喬治六世就是那位為了美人而放棄江山的愛(ài)德華八世的弟弟，愛(ài)德華退位后，他很不情愿地坐上了國(guó)王的寶座。然而喬治六世有很嚴(yán)重的口吃，發(fā)表講話時(shí)非常吃力，連幾句很簡(jiǎn)單的話都結(jié)結(jié)巴巴地講不出來(lái)。幸運(yùn)的是他遇到了語(yǔ)言治療師萊昂納爾（LionelLogue），通過(guò)一系列的訓(xùn)練兩人成為好友，國(guó)王的口吃也大為好轉(zhuǎn) ...<a href="dianying8.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying8.html">[詳細(xì)]</a></p>
</div></div><div class="jianzhu_bot"><div class="jianzhuA">
<a href="dianying4.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying4.html"><img src="images/4.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/4.jpg" border="0" align="left" style=" float:left;"/></a>
<p style=" float:left; margin-left:10px; display:inline">又名: 靴貓外傳 / 鞋貓劍客(臺(tái))/ 無(wú)敵貓劍俠(港)<br />穿靴子的貓還未遇見(jiàn)史萊克之前，他伙同Humpty Dumpty（著名童話角色、一個(gè)身材似蛋的家伙，由扎克·加利費(fèi)安納基斯配音）、颯爽英姿的貓女俠Kitty（薩爾瑪·海耶克配音）一起去保護(hù)鵝媽媽下的金蛋不被壞人偷去。<br />...<a href="dianying4.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying4.html">[詳細(xì)]</a><br />
</p>
</div><div class="jianzhuA"><a href="dianying9.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying9.html"><img src="images/9.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/9.jpg" border="0" align="left" style=" float:left;"/></a><p style=" float:left; margin-left:10px; display:inline"> 別名：Ein russischerSommer Askin son mevsimi Tolsto, le dernier automne <br />主演：克里斯托弗·普盧默 海倫·米倫 詹姆斯·麥卡沃伊 保羅·吉亞瑪提 約翰·塞森斯 Patrick Kennedy 凱瑞·康頓 安-瑪莉·杜芙 <br />導(dǎo)演：邁克爾·霍夫曼 <br />
...<a href="dianying9.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying9.html">[詳細(xì)]</a></p>
</div></div><div class="jianzhu_bot"><div class="jianzhuA">
<a href="dianying5.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying5.html"><img src="images/5.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/5.jpg" border="0" align="left" style=" float:left;"/></a>
<p style=" float:left; margin-left:10px; display:inline">為了完成父親的心愿，維克多（湯姆·漢克斯Tom Hanks 飾）從故國(guó)乘坐飛機(jī)前往美國(guó)肯尼迪機(jī)場(chǎng)，但戲劇性的事情發(fā)生了：他被告知祖國(guó)發(fā)生政變，而他的身份證護(hù)照一一失效，同時(shí)他的簽證也無(wú)法再使用。進(jìn)退兩難的維克多只有在機(jī)場(chǎng)滯留，等待新證件的辦理。<br />但是，他在機(jī)場(chǎng)等待了整整9個(gè)月。在這9個(gè)月里面，他用機(jī)場(chǎng)的洗手間洗漱，在候機(jī)室睡覺(jué)，他已經(jīng)學(xué)懂因地制宜，在機(jī)場(chǎng)照料自己的生活...<a href="dianying5.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying5.html">[詳細(xì)]</a><br />
</p>
</div><div class="jianzhuA"><a href="dianying10.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying10.html"><img src="images/10.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/10.jpg" border="0" align="left" style=" float:left;"/></a><p style=" float:left; margin-left:10px; display:inline"> 利茲的一個(gè)俄羅斯黑幫在英國(guó)無(wú)法無(wú)天，通過(guò)集裝箱將東歐人拐賣到英國(guó)，這些東歐女人被賣去色情服務(wù)，男人則被迫參加非法地下格斗。然而他們與當(dāng)?shù)厣倘薌abeTaylor發(fā)生了沖突 ...<a href="dianying10.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying10.html">[詳細(xì)]</a></p>
</div></div></div></div><div class="foot"><p>制作時(shí)間：2012年6月</p></div></center>
</body>
</html>2.CSS代碼
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}*{margin:0;padding:0;border:0; font-family:"Times New Roman", Times, serif;}
body {font-family:"Times New Roman", Times, serif;font-size: 12px;color:#000000;line-height: 20px;text-align:left}
ul,li{list-style-type:none;}.head{width:1002px; margin:0 auto; text-align:left; height:260px;}
.page{width:1002px; margin:0 auto; background:#FFFFFF;padding-top:5px;}.nav{width:1002px; height:30px; background:url(http://www.meimeipet.com/chengpin/dianying/images/nav_bg.gif) repeat-x; line-height:30px; text-align:center; font-size:14px; font-weight:bold; color:#ffffff;}.foot{width:1002px; margin:0 auto; padding:20px 0; color:#FFFFFF}.content{width:1002px; padding:30px 0; text-align:left;}.guntu{width:1002px; height:110px; margin:0 auto; overflow:hidden; padding-bottom:10px;}.jianzhu{width:982px; height:26px; margin:0 auto; background:#565050; line-height:26px;}
.jianzhu p{line-height:26px; color:#FFFFFF;width:440px; float:left; margin-left:40px; display:inline; height:26px; font-weight:bold; font-size:14px; text-align:left; }
.jianzhu p a{color:#FFFFFF;}.jianzhu_bot{width:982px; margin:0 auto; overflow:hidden; padding-top:20px; padding-bottom:20px; border-bottom:1px solid #565050; background:#c2bdbd;}
.jianzhuA{width:440px; float:left; margin-left:40px; display:inline; text-align:left}.meishi{width:760px; margin:0 auto; padding:30px; text-align:left;}
.meishi h3{font-size:18px; font-weight:bold; text-align:center; line-height:30px; padding:10px 0;}.dianying{width:982px; margin:0 auto; overflow:hidden; padding-top:20px; padding-bottom:20px; border-bottom:1px solid #565050; background:#c2bdbd;}
.dianying_tu{width:120px; float:left; margin-left:40px; display:inline;}
.dianying_zi{width:720px; float:left; margin-left:20px; display:inline; text-align:left;}.jianjie{width:902px; margin:0 auto; text-align:left; padding:20px 20px; background:#999999}三、個(gè)人總結(jié)
一套合格的網(wǎng)頁(yè)應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)
- 頁(yè)面分為頁(yè)頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁(yè)腳四大部分；
- 所有頁(yè)面相互超鏈接，可到三級(jí)頁(yè)面，有5-10個(gè)頁(yè)面組成；
- 頁(yè)面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)；
- 菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)；
- 要有JS特效，如定時(shí)切換和手動(dòng)切換圖片新聞；
- 頁(yè)面中有多媒體元素，如gif、視頻、音樂(lè)，表單技術(shù)的使用；
- 頁(yè)面清爽、美觀、大方，不雷同。
- 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來(lái)，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
四、精彩推薦
1.看到這里了就 【點(diǎn)贊收藏博文】 三連支持下吧，你的支持是我創(chuàng)作的動(dòng)力, 【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】 。
2.關(guān)注我?guī)鷮W(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問(wèn)題可以相互學(xué)習(xí)交流
