HTML5原始碼-實現一個簡單的個人主頁
阿新 • • 發佈：2018-12-23
class="selected" 表示這個連結標籤和其他連結標籤有所不同
原始碼：
<!doctype html>
<html>
<head>
<title>個人主頁</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
</head>
<body>
<header>
<h1>
個人 <span class="orange"> 的BLOG </span>
</h1>
</header>
<nav>
<ul>
<li><a href="index.html" class="selected">部落格首頁 </a> </li>
<li><a href="index1.html">關於我 </a></li>
<li><a href="index2.html">給我留言 </a></li>
<li><a href="index3.html">友情連結 </a></li>
<li><a href="index4.html">我的信箱 </a></li>
<li><a href="index5.html">社群 </a></li>
</ul>
</nav>
<div id="content">
<section>
<h1>晚上</h1>
<p> 早上起來腦袋都昏沉，直到現在都是。 機器還在響著，車間裡更熱，所以我不去開空調，只希望自然風再大些。 那些可愛的人們在我的眼皮底下辛苦的幹著活，又髒又累，我怎麼忍心？？？ 把褥子被子都拿出去晒了，太陽出來又進去，到底是怎麼啦提不起勁兒？ 這些工作都做完，喝了一杯溫開水，汗流浹背，衣服溼透了，腦袋依然昏沉。 宿舍裡很壓抑，不知道是自己的原因還是環境就這樣？
</p>
<p>當年張爸爸在工地上，沒有風扇，沒有空調，只要一把舊芭蕉扇就度過了幾個夏天，何況我晚上還有一臺電風扇，比起他的艱辛我這又算什麼。 張媽媽在家裡放了關於佛的書籍還有音樂，每天重複著大慈大悲，這些音樂聽得我特別感動，一有空閒就想聽聽這樣的音樂看看這些書。 他們本來就是一群超善良的人們，過於懂得感恩是值得善待的人們，想到他們我就特心疼特忘情。
</p>
<p>昨天感冒了，這種天氣下還能感冒，晚上吃了藥今天就好了，好神奇啊，身體不舒服一劑藥就可以治癒，如果心不舒服了該怎麼治療？也許只是一句問候，一聲關懷。可是，就是因為冷漠，才讓人更自立的吧！
</p>
</section>
<aside>
<ul>
<li><a href="index1.html" class="selected">日誌 </a> </li>
<li><a href="index1.html">相簿 </a></li>
<li><a href="index1.html">個人檔案 </a></li>
<li><a href="index1.html">分享 </a></li>
<li><a href="index1.html">音樂地帶 </a></li>
<li><a href="index1.html">視訊 </a></li>
<li><a href="index1.html">更多 </a></li>
</ul>
</aside>
</div>
<footer>
<p>版權朱林斯所有</p>
<hr />
<small>法律條文</small>
<small>聯絡我們</small>
<small>客戶意見</small>
<small>商戶合作</small>
</footer>
</body>
</html>
CSS樣式
@charset "utf-8";
*{margin:0px;padding:0px}
/* h5*/
body{
background-color:#eceddd;
font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif;
text-align: center;
color: #333333;
}
header{
background: url(Img/bgheader.jpg) no-repeat #85D0ED;
width: 902px;
height: 203px;
padding-top: 0px;
margin: 0px auto;
color: #000000;
}
header h1 {
float:left;
font-size:2.9em;
padding-top:60px;
padding-left:37px;
font-family:Arial,verdana, sans-serif;
color:#37210c;
font-weight:bolder;
letter-spacing:-1px;
}
.orange{
color:#e67e1f;
}
nav{
list-style-type:none;
margin:0px auto;
width:902px;
background-color:#303;
clear:both;
}
nav ul{
list-style:none;
margin-bottom:0px;
margin-top:0px;
margin-left:0px;
width:902px;
}
nav ul li{
text-align:center;
float:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
width:150px;
}
nav ul li a{
display:block;
background-color:#37210c;
border-right:1px solid #fff;
line-height:2.5em;
margin-right:0px;
padding:8px 14px 8px 14px;
color: #ecf9ff;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
}
nav li a:hover{
color: #000;
background-color:#ecf9ff;
}
nav ul li .selected{
color: #ecf9ff;
background-color:#e67e1f;
}
aside{
float:left;
list-style:none;
margin-left:10px;
height:50%;
}
aside ul{
list-style:none;
margin-bottom:20px;
margin-top:20px;
margin-left:0px;
}
aside li{
text-align:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
border-bottom:1px solid #eaeada;
}
aside ul li a{
background-image: url(Img/bullet.gif);
background-repeat:no-repeat;
background-position:left center;
display:block;
background-color:#ffffff;
line-height:1.7em;
margin-right:0px;
padding-top:6px;
padding-bottom:6px;
padding-left:22px;
color: #666666;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
width:165px;
}
aside li a:hover{
color: #37210c;
background-color:#f7f7f2;
}
aside .selected{
color: #37210c;
background-color:#f7f7f2;
}
#content{
margin:0 auto;
width:902px;
background-color:#dfeef9;
height:290px;
clear:both;
}
section{
float:left;
width:75%;
margin-right:0px;
margin-top:15px;
background-color:#FFF;
text-align:left;
font-size:0.9em;
padding:5px;
}
section h1{
display:block;
font-size:0.9em;
width:50px;
font-family: arial;
text-align:left;
font-weight:bold;
color:#403f3b;
font-family:arial;
font-weight:bold;
padding:5px;
margin-top:5px;
margin-left:12px;
}
section p{
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
color: #000000;
padding:10px;
text-align:left;
}
footer {
width:902px;
height: 85px;
clear:both;
margin-top: 10px;
background-color:#dfeef9;
color:#666666;;
margin-left:auto;
margin-right:auto;
margin-bottom: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
footer p{
font-size:0.7em;
font-family:arial;
font-weight:normal;
line-height: 1.4em;
color:#555555;
padding:25px 0 0 10px;
text-align:center;
}
footer a {
font-size:1em;
text-decration:none;
font-weight:normal;
color:#467AA7;
text-align:center;
}
footer a:hover{
text-decoration:underline;
font-weight:normal;
color:#467AA7;
text-align:center;
原始碼：
<!doctype html>
<html>
<head>
<title>個人主頁</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
</head>
<body>
<header>
<h1>
個人 <span class="orange"> 的BLOG </span>
</h1>
</header>
<nav>
<ul>
<li><a href="index.html" class="selected">部落格首頁 </a> </li>
<li><a href="index1.html">關於我 </a></li>
<li><a href="index2.html">給我留言 </a></li>
<li><a href="index3.html">友情連結 </a></li>
<li><a href="index4.html">我的信箱 </a></li>
<li><a href="index5.html">社群 </a></li>
</ul>
</nav>
<div id="content">
<section>
<h1>晚上</h1>
<p> 早上起來腦袋都昏沉，直到現在都是。 機器還在響著，車間裡更熱，所以我不去開空調，只希望自然風再大些。 那些可愛的人們在我的眼皮底下辛苦的幹著活，又髒又累，我怎麼忍心？？？ 把褥子被子都拿出去晒了，太陽出來又進去，到底是怎麼啦提不起勁兒？ 這些工作都做完，喝了一杯溫開水，汗流浹背，衣服溼透了，腦袋依然昏沉。 宿舍裡很壓抑，不知道是自己的原因還是環境就這樣？
</p>
<p>當年張爸爸在工地上，沒有風扇，沒有空調，只要一把舊芭蕉扇就度過了幾個夏天，何況我晚上還有一臺電風扇，比起他的艱辛我這又算什麼。 張媽媽在家裡放了關於佛的書籍還有音樂，每天重複著大慈大悲，這些音樂聽得我特別感動，一有空閒就想聽聽這樣的音樂看看這些書。 他們本來就是一群超善良的人們，過於懂得感恩是值得善待的人們，想到他們我就特心疼特忘情。
</p>
<p>昨天感冒了，這種天氣下還能感冒，晚上吃了藥今天就好了，好神奇啊，身體不舒服一劑藥就可以治癒，如果心不舒服了該怎麼治療？也許只是一句問候，一聲關懷。可是，就是因為冷漠，才讓人更自立的吧！
</p>
</section>
<aside>
<ul>
<li><a href="index1.html" class="selected">日誌 </a> </li>
<li><a href="index1.html">相簿 </a></li>
<li><a href="index1.html">個人檔案 </a></li>
<li><a href="index1.html">分享 </a></li>
<li><a href="index1.html">音樂地帶 </a></li>
<li><a href="index1.html">視訊 </a></li>
<li><a href="index1.html">更多 </a></li>
</ul>
</aside>
</div>
<footer>
<p>版權朱林斯所有</p>
<hr />
<small>法律條文</small>
<small>聯絡我們</small>
<small>客戶意見</small>
<small>商戶合作</small>
</footer>
</body>
</html>
CSS樣式
@charset "utf-8";
*{margin:0px;padding:0px}
/* h5*/
body{
background-color:#eceddd;
font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif;
text-align: center;
color: #333333;
}
header{
background: url(Img/bgheader.jpg) no-repeat #85D0ED;
width: 902px;
height: 203px;
padding-top: 0px;
margin: 0px auto;
color: #000000;
}
header h1 {
float:left;
font-size:2.9em;
padding-top:60px;
padding-left:37px;
font-family:Arial,verdana, sans-serif;
color:#37210c;
font-weight:bolder;
letter-spacing:-1px;
}
.orange{
color:#e67e1f;
}
nav{
list-style-type:none;
margin:0px auto;
width:902px;
background-color:#303;
clear:both;
}
nav ul{
list-style:none;
margin-bottom:0px;
margin-top:0px;
margin-left:0px;
width:902px;
}
nav ul li{
text-align:center;
float:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
width:150px;
}
nav ul li a{
display:block;
background-color:#37210c;
border-right:1px solid #fff;
line-height:2.5em;
margin-right:0px;
padding:8px 14px 8px 14px;
color: #ecf9ff;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
}
nav li a:hover{
color: #000;
background-color:#ecf9ff;
}
nav ul li .selected{
color: #ecf9ff;
background-color:#e67e1f;
}
aside{
float:left;
list-style:none;
margin-left:10px;
height:50%;
}
aside ul{
list-style:none;
margin-bottom:20px;
margin-top:20px;
margin-left:0px;
}
aside li{
text-align:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
border-bottom:1px solid #eaeada;
}
aside ul li a{
background-image: url(Img/bullet.gif);
background-repeat:no-repeat;
background-position:left center;
display:block;
background-color:#ffffff;
line-height:1.7em;
margin-right:0px;
padding-top:6px;
padding-bottom:6px;
padding-left:22px;
color: #666666;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
width:165px;
}
aside li a:hover{
color: #37210c;
background-color:#f7f7f2;
}
aside .selected{
color: #37210c;
background-color:#f7f7f2;
}
#content{
margin:0 auto;
width:902px;
background-color:#dfeef9;
height:290px;
clear:both;
}
section{
float:left;
width:75%;
margin-right:0px;
margin-top:15px;
background-color:#FFF;
text-align:left;
font-size:0.9em;
padding:5px;
}
section h1{
display:block;
font-size:0.9em;
width:50px;
font-family: arial;
text-align:left;
font-weight:bold;
color:#403f3b;
font-family:arial;
font-weight:bold;
padding:5px;
margin-top:5px;
margin-left:12px;
}
section p{
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
color: #000000;
padding:10px;
text-align:left;
}
footer {
width:902px;
height: 85px;
clear:both;
margin-top: 10px;
background-color:#dfeef9;
color:#666666;;
margin-left:auto;
margin-right:auto;
margin-bottom: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
footer p{
font-size:0.7em;
font-family:arial;
font-weight:normal;
line-height: 1.4em;
color:#555555;
padding:25px 0 0 10px;
text-align:center;
}
footer a {
font-size:1em;
text-decration:none;
font-weight:normal;
color:#467AA7;
text-align:center;
}
footer a:hover{
text-decoration:underline;
font-weight:normal;
color:#467AA7;
text-align:center;
}
HTML5原始碼—實現一個簡單的個人主頁http://bbs.h5edu.cn/?/article/3717