📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ▶️1.視訊示範
- 🧩 2.圖檔示範
- 四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠CSS樣式代碼
- 五、🎁更多源碼
二、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言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代碼）。
三、🔗網站效果
▶️1.視訊示範
L22JP 個人部落格個人介紹 4頁 無js
🧩 2.圖檔示範
四、💒 網站代碼
🧱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="css/style.css">
</head>
<body>
<div id="bigbox">
<div id="banner">
<img src="picture/banner.png" alt="">
</div>
<nav>
<a class="dangqian" href="">首頁</a>
<a href="duanwen.html">短文</a>
<a href="rizhi.html">日志</a>
<a href="liuyan.html">留言闆</a>
</nav>
<div id="main">
<div id="main_left">
<h2>關于我</h2>
<img src="picture/me.png" alt="">
<p>
<span>姓名</span>:*****<br>
<span>性别</span>:男<br>
<span>愛好</span>:聽歌 踢足球 打遊戲<br>
<span>性格</span> :開朗<br>
<span>家鄉</span>:新疆烏恰縣<br>
<span>專業</span>:計算機網絡技術
</p>
</div>
<div id="main_right">
<h2>熱愛生活</h2>
<p>
一、歲月從來不曾靜好，隻是有人在替你背負枷鎖，含淚前行。也許是父母，也許是朋友，也許是陌生人……無論是誰，請記得常懷感恩之心。
</p>
<p>
二、這個世界并不完美，甚至有點殘酷。你無法決定下一段旅途遇見的是好事還是壞事，可你能決定面對它們的态度。你看這個世界的角度，決定了這個世界給你的溫度。
</p>
<p>
三、總會有一件事讓你瞬間長大，也總會有一個人讓你淚如雨下。願你早日領教這個世界的深深惡意，讓自己活得開心得意。
</p>
<p>
四、想要與衆不同，卻總随遇而安，想要做很多未做的事，卻在現實棘手的吃喝拉撒前低下了頭，我們間歇性熱血滿腔，長時間迷茫犯懶，别等了，再努力試試看！
</p>
<img src="picture/life.png" alt="">
</div>
</div>
<div id="luxing">
<h2>旅行生活</h2>
<div>
<div id="picture">
<img src="picture/11.png" alt="">
<p>在日月潭</p>
</div>
<div id="picture">
<img src="picture/22.png" alt="">
<p>
在模裡西斯
</p>
</div>
<div id="picture">
<img src="picture/33.png" alt="">
<p>
在馬爾代夫
</p>
</div>
<div id="picture">
<img src="picture/44.png" alt="">
<p>
在玉龍雪山
</p>
</div>
</div>
</div>
<footer>
<p>
版權所有©*****
</p>
</footer>
</div>
</body>
</html> 🏠CSS樣式代碼
* {
margin: 0px;
padding: 0px;
list-style: none;
}
body {
background-color: #4B7C99;
}
#bigbox {
width: 1000px;
margin: 0 auto;
}
#banner {
width: 1000px;
font-size: 0px;
}
#banner img {
width: 1000px;
}
nav {
background-color: #CCD0D9;
width: 1000px;
height: 60px;
}
nav a {
text-decoration: none;
line-height: 60px;
margin-left: 50px;
margin-right: 50px;
color: #020C16;
font-weight: bold;
}
nav a:hover {
color: #1a9be6;
}
.dangqian {
color: #1a9be6;
}
#main {
height: 490px;
width: 1000px;
margin: 0 auto;
background-color: #86aacb;
}
#main_left {
width: 300px;
display: inline-block;
background-color: #86aacb;
float: left;
}
h2 {
box-sizing: border-box;
padding-left: 10px;
font-size: 20px;
line-height: 30px;
background-color: #03151F;
color: #CCD0D9;
}
#main_left img {
width: 300px;
}
#main_left p {
margin-left: 10px;
line-height: 40px;
}
#main_left span {
font-weight: bold;
}
#main_right {
position: relative;
width: 680px;
margin-left: 20px;
display: inline-block;
height: 200px;
}
#main_right img {
position: absolute;
width: 260px;
right: 0px;
top: 30px;
}
#main_right p {
width: 400px;
display: inline-block;
margin-left: 10px;
text-indent: 32px;
line-height: 30px;
margin-top: 10px;
}
#luxing {
background-color: #86aacb;
width: 1000px;
}
#luxing div {
font-size: 0px;
}
#picture {
font-size: 0px;
display: inline-block;
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
}
#picture img {
width: 200px;
}
#picture p {
font-size: 16px;
text-align: center;
line-height: 60px;
}
footer {
line-height: 60px;
font-size: 14px;
text-align: center;
background-color: #CCD0D9;
}
#main_right ul li {
width: 660px;
margin-left: 10px;
font-size: 12px;
margin-top: 10px;
border-bottom: 1px dotted #ccc;
padding-bottom: 10px;
}
#main_right ul li span {
font-size: 14px;
font-weight: bold;
}
#liuyan {
width: 660px;
margin-left: 10px;
margin: 20px;
}
#liuyan span {
display: inline-block;
width: 80px;
line-height: 40px;
}
button {
width: 100px;
height: 30px;
margin-left: 80px;
}