📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、🌐網站示範
- 五、🔧 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
🧑個人網頁設計、🙋♂️個人履歷制作、👨💼簡單靜态HTML個人網頁作品、👨🏭個人介紹網站模闆 、等網站的設計與制作。
二、✍️網站描述
⭐個人網頁設計網站模闆采用DIV CSS布局制作，網頁作品有多個頁面，如 :個人介紹（文字頁面）、我的作品（圖檔清單）、個人技能（圖文頁面）、線上留言（表單頁面）CSS樣式方面網頁整體采用左右布局結構，制作了網頁背景圖檔，導航區域每個導航背景色不同，導航背景色與頁面背景呼應。
🏅 一套A+的網頁應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作）。
其中：
（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；
（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。
四、🌐網站示範
五、🔧 網站代碼
🧱HTML結構代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>薛之謙</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/jianjie.css">
</head>
<body>
<!-- ’頭部導航欄 -->
<div id="title">
<div id="nav">
<!-- 頭部logo -->
<div id="logo">
Joker Xue
</div>
<!-- 頭部導航欄 -->
<div id="nav_title">
<a href="index.html">首頁</a>
<a href="">簡介</a>
<a href="movies.html">影視作品</a>
<a href="photo.html">明星美圖</a>
<a href="message.html">留言</a>
</div>
<div id="nav_right">
<input type="text" placeholder="關鍵詞搜尋">
<a href="login.html">登入</a>
<a href="register.html">注冊</a>
</div>
</div>
<!-- 名言 -->
<div id="mingyan">
<p>盛名也許會遲到</p>
<p>
但絕不會缺席
</p>
<p>
薛之謙
</p>
</div>
</div>
<!-- 小導航欄 -->
<div id="mini_daohang">
目前位置：<a href="index.html">首頁</a><span>></span><a href="">簡介</a>
</div>
<!-- 中間内容區域 -->
<div id="main">
<div id="mian_title">
<img src="static/picture/renwu.jpg" alt="">
<h2>薛之謙 <span>1983年7月17日(農曆6月8日)上海中國</span></h2>
<!-- 表格 -->
<table>
<tr>
<td style="width: 100px">中文名</td>
<td style="width: 240px">薛之謙</td>
<td style="width: 100px">職業</td>
<td>歌手、音樂制作人、演員</td>
</tr>
<tr>
<td>外文名</td>
<td>Joker Xue</td>
<td>經紀公司</td>
<td>海蝶音樂</td>
</tr>
<tr>
<td>别 名</td>
<td>謙謙、二謙</td>
<td rowspan="4">代表作品</td>
<td rowspan="4">認真的雪、演員、醜八怪、紳士、意外、你還要我怎樣、剛剛好、幾個你、我好像在哪見過你、渡、初學者、怪咖、一半、動物世界、方圓幾裡、深深愛過你、慢半拍、天外來物</td>
</tr>
<tr>
<td>國 籍</td>
<td>中國</td>
</tr>
<tr>
<td>出生地</td>
<td>上海 </td>
</tr>
<tr>
<td>出生日期</td>
<td>1983年7月17日(農曆6月8日)</td>
</tr>
<tr>
<td>血 型</td>
<td>O型</td>
<td>身 高</td>
<td>172 cm</td>
</tr>
<tr>
<td>職業</td>
<td>歌手、音樂制作人、演員</td>
<td>星 座</td>
<td>巨蟹座</td>
</tr>
</table>
<h3>個人簡介</h3>
<div class="jianjie">
<p>薛之謙（Joker Xue），1983年7月17日出生于上海市，中國内地流行樂男歌手、音樂制作人、影視演員，畢業于格裡昂酒店管理學院。</p>
<p>
2005年，因參加選秀節目《我型我秀》而正式出道。2006年，發行首張同名專輯《薛之謙》 ，随後憑借歌曲《認真的雪》獲得廣泛關注
。2007年，憑借專輯《你過得好嗎》獲得MusicRadio中國TOP排行榜内地年度最受歡迎男歌手獎。2008年，發行專輯《深深愛過你》，同年在上海舉行個人首場演唱會“謙年傳說”
。2013年，專輯《幾個薛之謙》獲得MusicRadio中國TOP排行榜内地推薦唱片；同年，發行專輯《意外》 。2014年，獲得第21屆東方風雲榜最佳唱作人獎 [171]
；同年他還獲得音悅V榜年度盛典年度創作歌手獎 。
</p>
<p>
2015年6月，薛之謙首度擔當制作人并發行原創EP《紳士》 ；同年，他還主演都市勵志劇《媽媽像花兒一樣》
。2016年，憑借EP《紳士》、《一半》獲得第16屆全球華語歌曲排行榜最受歡迎男歌手、五大最受歡迎男歌手獎、上海地區傑出歌手獎及最受歡迎創作歌手獎，而歌曲《初學者》則獲得年度二十大金曲獎
。2017年4月，開啟“我好像在哪見過你”全國巡回演唱會 ；同年，薛之謙獲得第7屆全球流行音樂年度盛典年度最佳男歌手及MusicRadio榜中國TOP排行榜内地最佳男歌手
。
</p>
<p>
2018年7月，薛之謙“摩天大樓”世界巡回演唱會于北京站啟程，整個巡演橫跨4大洲，8個國家，21個城市，累計上演場次23場。2019年，發行專輯《塵》
。2020年12月31日，發行第11張個人專輯《天外來物》。
</p>
</div>
<h3>演藝經曆</h3>
<div id="yanyijingli">
<img src="static/picture/yyjl.webp" alt="">
<p>2005年，薛之謙因參加選秀節目《我型我秀》獲得四強而正式出道；同年9月，簽約上騰娛樂</p>
<p>
2006年3月25日，獲得了第十三屆東方風雲榜頒獎盛典東方新人銀獎；6月12日，發行首張個人原創同名專輯《薛之謙》
，他包攬專輯六首曲和五首詞的創作，專輯發行1個月銷量突破20萬張，而他則成為年度銷量最高内地男歌手，随後，主打歌《認真的雪》獲得第十四屆東方風雲榜十大金曲獎
。8月，薛之謙出席香港“2006年度新城國語力頒獎禮”，現場演唱《黃色楓葉》 。10月，薛之謙出席新加坡第六屆全球華語歌曲排行榜頒獎典禮，榮獲最受歡迎男新人獎 。
</p>
<img id="renwusi" src="static/picture/renwusi.webp" alt="">
<p>
2007年，薛之謙作為流行音樂的代表，參加由中華人民共和國文化部和俄羅斯聯邦文化電影署聯合舉辦的中國文化節重點項目”沿伏爾加河友誼之旅”，在沿河11個城市作通路演出
。2007年7月31日，發行第二張個人原創專輯《你過得好嗎》
，該專輯銷量在一個月内破15萬，而薛之謙憑此專輯榮獲MusicRadio中國TOP排行榜内地年度最受歡迎男歌手獎，同名主打歌《你過得好嗎》則獲得北京流行音樂典禮内地年度金曲獎。
</p>
<p>
2008年7月25日，北京奧運聖火在河南省鄭州市傳遞，火炬手薛之謙手持火炬傳遞
。11月26日，發行第三張個人原創專輯《深深愛過你》，專輯收錄9首歌曲，同名主打歌《深深愛過你》更是由他作詞作曲并演唱，分為前世、今生兩個版本，随後，該曲獲得北京流行音樂典禮年度金曲獎及第9屆全球華語歌曲排行榜最受歡迎二十大金曲獎
；12月20日，薛之謙在上海舉行個人首場演唱會“謙年傳說”。
</p>
<p>
2010年3月27日，薛之謙獲得了第17屆東方風雲榜頒獎典禮最佳年度飛躍獎；4月3日，薛之謙參加《抗旱救災我們在行動》大型公益晚會 。5月30日，薛之謙擔任由中央人民廣播電台
MusicRadio音樂之聲欄目舉辦的《音樂世博會 周日也瘋狂》節目嘉賓，探訪了瑞士館和俄羅斯館 。9月，薛之謙跨界影視，主演了個人首部大銀幕作品《一隻狗的大學時光》。
</p>
<p>
2012年7月17日，發行第四張個人專輯《幾個薛之謙》，共收錄9首歌曲，專輯于次年4月獲得MusicRadio中國TOP排行榜内地推薦唱片 ；9月，他與上騰娛樂約滿不續
；12月27日，推出單曲《方圓幾裡》 。
</p>
<p>
2013年1月6日，正式簽約坤宏傳媒；10月5日，薛之謙獲得全球華語歌曲排行榜上海地區傑出歌手 ；11月11日，發行第五張個人專輯《意外》，專輯收錄10首歌曲。
</p>
<p>
2021年2月10日，參加東方衛視《新春潮樂會》；8月，加盟B站年度原創音樂綜藝《我的音樂你聽嗎》 ；9月19日，參加東方衛視代際潮音綜藝節目《中國夢之聲·我們的歌第三季》
；11月，加盟綜藝《中國潮音》。 11月27日、28日，舉辦天外來物演唱會廣州站
；12月，在TMEA騰訊音樂娛樂盛典上，獲得最具影響力内地男歌手獎項，歌曲《耗盡》也是年度十大金曲 ；12月31日，參加“2021最美的夜bilibili·晚會”，
演唱《狐狸》、《洛城》 ；12月31日，在江蘇衛視2022跨年演唱會中，第九個出場，演唱黃土高坡，第23個出場，演唱像風一樣。
</p>
</div>
</div>
</div>
<!-- 底部版權運用js擷取系統時間進行dom操作改變頁面文字顯示 -->
<footer>
<div id="footer">
<div id="logo2">
Joker Xue
</div>
<div id="banquan">
版權所有@薛之謙
</div>
<div id="time" class="showTime">
</div>
</div>
</footer>
</body>
<script src="static/js/time.js"></script>
</html> 💒CSS樣式代碼
/* 簡介開始 */
#mian_title {}
#mian_title h2 {
font-size: 30px;
padding-bottom: 10px;
margin-bottom: 30px;
border-left: 20px solid #4F9CEE;
padding-left: 20px;
}
#mian_title h2 span {
font-size: 16px;
margin-left: 20px;
color: #838384;
}
#mian_title img {
float: right;
width: 200px;
}
#mian_title h3 {
border-left: 20px solid #4F9CEE;
padding-left: 20px;
margin-bottom: 20px;
margin-top: 30px;
}
/* 表格 */
#mian_title table {
width: 800px;
border-collapse: collapse;
line-height: 30px;
font-size: 14px;
}
#mian_title table tr {
border-bottom: 1px dashed #ccc;
}
#mian_title table tr td:nth-child(2n-1) {
color: #999999;
}
.jianjie p {
font-size: 14px;
line-height: 30px;
text-indent: 28px;
}
/* 演藝經曆 */
#yanyijingli {
width: 100%;
text-align: center;
}
#yanyijingli img {
display: inline-block;
float: none;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
#renwusi {
float: right !important;
width: 200px !important;
margin: 30px 0px 30px 30px;
}
#yanyijingli p {
text-align: left;
font-size: 14px;
text-indent: 28px;
line-height: 30px;
}