簡單個人網站
注：參考書《網頁開發手記》
程式碼結構圖
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/index.css" />
</head>
<body>
<div id="top">
<div id="top_txt">
<a href="javascript:addFav('個人網站示例')" 2.index.css
/*
* @Author: Lin
* @Date: 2017-07-29 17:21:14
* @Last Modified by: Lin
* @Last Modified time: 2017-07-30 19:03:27
*/
* {
margin:0px;
padding:0px;
}
html, body {
scrollbar-face-color:#98a363;
scrollbar-highlight-color:#e3e69d;
scrollbar-shadow-color:#999;
scrollbar-3dlight-color:#000;
scrollbar-arrow-color:#000;
scrollbar-track-color:#f4f4f0;
scrollbar-darkshadow-color:#666;
}
/*注：上面關於滾動條的設定在chrome中不可以顯示但是在ie中可以*/
body {
/*關於背景的設定*/
background:#d9d7cd;
background-image: url("../images/back.jpg");
background-repeat: no-repeat;
background-size: 150%;
}
ul {
list-style:none;
font-size:12px;
}
#top,#vi,#nav,#main,#bt {
width: 779px;
margin: 0px auto;
}
#top,#bt {
background-color:#000;
}
#top {
margin-top: 20px;
height:18px;
padding-top:5px;
text-align:right;
color:#fff;
}
#top_txt {
margin-right: 5px;
}
#top_txt a {
color:lightblue;
text-decoration: none;
}
#top_txt a:visited {
color:lightblue;
}
#top_txt a:hover {
color:#fff;
}
#vi {
height:85px;
background:#98a363;
background-image: url("../images/vii.jpg");
}
#tt {
margin-left:120px;
padding-top:8px;
text-indent:-40px;
line-height:1.8em;
font-size:20px;
font-weight:bold;
}
#nav {
height:35px;
background:#e6e4db;
}
#nav ul {
margin-left: 30px;
}
#nav ul li {
float:left;
}
#nav ul a {
display: block;
width: 85px;
height:25px;
padding-top: 10px;
text-decoration: none;
letter-spacing: 15px;
text-align: center;
color: #000;
font-size: 15px;
font-weight: bold;
}
#nav ul a:visited {
color: #000;
}
#nav ul a:hover {
color: #98a363;
background: #fff;
}
#nav ul li.bar {
width: 6px;
padding-top: 12px;
}
#main {
height: 560px;
background:#fff;
}
#bt {
height: 46px;
padding-top: 34px;
text-align: center;
color: #fff;
}
#left {
width: 180px;
height: 350px;
border: 1px solid #d9d7cd;
margin: 10px;
float: left;
clear: left; /*what is clear mean*/
}
h4 {
letter-spacing: 1em;
font-size: 15px;
background: #e6e4db;
height:24px;
border-bottom: 1px solid #d9d7cd;
padding-top: 5px;
margin-top: 2px;
padding-left: 10px;
}
#left h4 {
width: 170px;
}
#left ul {
margin: 16px;
line-height: 3em;
}
#left li {
width: 150px;
white-space: nowrap; /*what is this mean*/
overflow: hidden;
text-overflow: ellipsis;
}
#right {
width: 563px;
height: 350px;
border: 1px solid #d9d7cd;
margin-top: 10px;
float:left;
}
#right h4 {
width: 554px;
}
#right h5, #right .date, #right p {
margin-left: 30px;
}
#right h5 {
margin-top: 10px;
font-size: 13px;
}
#right .date {
font-style: italic;
}
#right p {
font-family: Georgia;
font-size: 15px;
width: 500px;
height: 90px;
background: #f4f4f0;
border: 1px solid #999;
text-indent: 2em;
line-height: 1.5em;
overflow: hidden;
}
hr {
margin-top: 20px;
}
#photo {
width: 756px;
height: 176px;
border: 1px solid #d9d7cd;
margin-left: 10px;
float: left;
}
#photo h4 {
width: 746px;
}
#photo_img {
width: 700px;
margin-left: 60px;
margin-top: 10px;
text-align: center;
}
#photo img {
display: block;
width: 100px;
height: 100px;
float: left;
margin-right: 30px;
border: 1px solid #d9d7cd;
}
#photo h5 {
width: 100px;
margin-right: 30px;
margin-top: 5px;
font-size: 12px;
float: left;
}
3.article.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/article.css" />
<script src="../js/article.js"></script>
</head>
<body>
<div id="top">
<div id="top_txt">
<a href="javascript:addFav('個人網站示例')" title="新增本頁到收藏夾">收藏本頁</a>
|
<a href="mailto:[email protected]" title="給站長髮郵件">聯絡站長</a>
</div>
</div>
<div id="vi">
<div id="tt">
成功沒有早晚<br />
努力就有收穫
</div>
</div>
<div id="nav">
<ul>
<li><a href="index.html" target="_self">首頁</a></li>
<li><a class="bar">|</a></li>
<li><a href="article.html" target="_self">日誌</a></li>
<li><a class="bar">|</a></li>
<li><a href="photo.html" target="_self">照片</a></li>
<li><a class="bar">|</a></li>
<li><a href="message.html" target="_self">留言</a></li>
</ul>
</div>
<div id="main">
<div id="right">
<h4>|最新日誌</h4>
<h5><a onclick="openContent(0)">Internet技術的應用</a></h5>
<span class="date">2017/07/30</span><br />
<p>在資訊科技發達的今天，讀者每天都可以感受到Internet技術在生活中的巨大作用。通過Internet，讀者可以每天瀏覽到最新的新聞，可以參與論壇各種話題火熱的討論，可以和世界各地的朋友一起玩遊戲等。
</p>
<hr />
<h5><a onclick="openContent(1)">網頁技術學前班</a></h5>
<span class="date">2017/07/28</span><br />
<p>Internet，中文成為國際網際網路。眾所周知，Internet起源於1969年，由美國國防部授權APPANET（高階研究規劃署）進行的網際網路的試驗。當初沒有人會預料到，在幾十年後的今天，網際網路成了全球互通的主要方式。網頁是Internet最主要的組成部分，在本章讀者可以學到很多Internet及網頁製作方面的基礎知識。TCP/IP協議使用客戶端/伺服器模式進行通訊，TCP/IP通訊是點對點的，即通訊是網路中的一臺主機與另一臺主機之間的。讀者要了解的是，當前Internet上的資料都是通過TCP/IP在網路上進行控制、轉發的。</p>
<hr />
<h5><a onclick="openContent(2)">css技術學前班</a></h5>
<span class="date">2017/07/27</span>
<br />
<p>css技術應用的具體內容</p>
<hr />
<h5><a onclick="openContent(3)">HTML技術應用</a></h5>
<span class="date">2017/07/28</span>
<br />
<p>HTML技術應用的具體內容</p>
<hr />
<h5><a onclick="openContent(4)">Javascript技術應用</a></h5>
<span class="date">2017/07/29</span>
<br />
<p>javascript技術應用的具體內容</p>
<hr />
<a href="#">下一頁</a>
</div>
</div>
<div id="bt">本網站版權為Lin所有<br />
<span id="sysmsg"></span>
</div>
<div id="content">
<h5 id="content_h5"></h5>
<span class="date" id="content_span"></span>
<br />
<p id="content_p"></p>
<button onclick="closeContent(this)">關閉視窗</button>
</div>
</body>
</html>4.article.css
/*
* @Author: Lin
* @Date: 2017-07-29 21:02:21
* @Last Modified by: Lin
* @Last Modified time: 2017-07-30 19:03:15
*/
* {
margin:0px;
padding:0px;
}
html, body {
scrollbar-face-color:#98a363;
scrollbar-highlight-color:#e3e69d;
scrollbar-shadow-color:#999;
scrollbar-3dlight-color:#000;
scrollbar-arrow-color:#000;
scrollbar-track-color:#f4f4f0;
scrollbar-darkshadow-color:#666;
}
/*注：上面關於滾動條的設定在chrome中不可以顯示但是在ie中可以*/
body {
/*關於背景的設定*/
background:#d9d7cd;
background-image: url("../images/back.jpg");
background-repeat: no-repeat;
background-size:150%;
}
ul {
list-style:none;
font-size:12px;
}
#top,#vi,#nav,#main,#bt {
width: 779px;
margin: 0px auto;
}
#top,#bt {
background-color:#000;
}
#top {
margin-top: 20px;
height:18px;
padding-top:5px;
text-align:right;
color:#fff;
}
#top_txt {
margin-right: 5px;
}
#top_txt a {
color:lightblue;
text-decoration: none;
}
#top_txt a:visited {
color:#lightblue;
}
#top_txt a:hover {
color:#fff;
}
#vi {
height:85px;
background:#98a363;
background-image: url("../images/vii.jpg");
}
#tt {
margin-left:120px;
padding-top:10px;
text-indent:-40px;
line-height:1.8em;
font-size:20px;
font-weight:bold;
}
#nav {
height:35px;
background:#e6e4db;
}
#nav ul {
margin-left: 30px;
}
#nav ul li {
float:left;
}
#nav ul a {
display: block;
width: 85px;
height:25px;
padding-top: 10px;
text-decoration: none;
letter-spacing: 15px;
text-align: center;
color: #000;
font-size: 15px;
font-weight: bold;
}
#nav ul a:visited {
color: #000;
}
#nav ul a:hover {
color: #98a363;
background: #fff;
}
#nav ul li.bar {
width: 6px;
padding-top: 12px;
}
#main {
height: 560px;
background:#fff;
}
#bt {
height: 46px;
padding-top: 34px;
text-align: center;
color: #fff;
}
/* 上面部分為外部樣式 */
#right h5 a {
text-decoration:underline;
color: lightblue;
}
#right h5 a:visited {
color: #8800ff;
}
#right h5 a:hover {
color: #8800ff;
}
h4 {
letter-spacing: 1em;
font-size: 15px;
background: #e6e4db;
height:24px;
border-bottom: 1px solid #d9d7cd;
padding-top: 5px;
margin-top: 2px;
padding-left: 10px;
}
#right {
margin-left: 10px;
width: 754px;
height: 538px;
border: 1px solid #d9d7cd;
margin-top: 10px;
float:left;
}
#right h4 {
width: 744px;
}
#right h5, #right .date, #right p {
margin-left: 30px;
}
#right h5 {
margin-top: 10px;
font-size: 13px;
}
#right .date {
font-style: italic;
}
#right p {
width: 700px;
height: 20px;
background: #f4f4f0;
border: 1px solid #999;
text-indent: 2em;
line-height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
}
hr {
margin-top: 20px;
}
#content {
position: absolute;
top: 195px;
left: 5px;
display: none;
width: 99%;
height: 440px;
background: #f4f4f0;
border: 1px solid #999;
text-align: center;
}
#content h5 {
text-align: center;
font-size: 16px;
margin: 10px;
}
#content p {
width: 700px;
相關推薦
簡單個人網站
注：參考書《網頁開發手記》
程式碼結構圖
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"&g
最簡單的github搭建個人網站及訪問html檔案
寫在前面：本文內容如題，沒有亂七八糟的步驟，最簡單的搭建個人網站，想要展示更多的個人能力，經驗，經歷，在簡歷上放上自己的個人網站連結無疑是一種比較好的方式。前端對伺服器要求不是太高，主要是找個平臺給我放放網站什麼的就好了，GitHub允許上傳個人網站專案並自定義域名，而且
製作簡單的個人網站，將本地網站公佈在網路上
本人只是剛入門的小萌新，本文適合剛剛入門做網站開發的小盆友喲做網站前的準備工作：1。首先你得有自己的雲伺服器，可以去阿里雲購買，以學生身份註冊的話，一個月也就9.9元（購買、註冊請百度）2。然後你需要下載一個flashfxp,這是一種上傳工具，將你的本地檔案上傳到你的雲伺服器
個人網站如何使用支付寶收款實現
php 支付寶想給個人網站增加一個支付，找到https://neue.v2ex.com/t/350564，按照裏面大家討論的，還真的可以了。1.開通功能https://neue.v2ex.com/t/326701 有個商家二維碼圖中二維碼是服務商的員工碼，作為推廣的服務商肯定是會有返利但是不通員工碼，個人是
Python獲取個人網站的所有課程下載鏈接和密碼，並保存到Mongodb中
one find() net agent play col pat 進行 jpg 1、獲取網站課程的分類地址；
‘‘‘
爬取屌絲首頁，獲取每個分類名稱和鏈接
‘‘‘
import requests
from lxml import etree
headers = {
五步搭建屬於自己的個人網站
64位 下載 service 2.7 develop 需要 color apt 1.7 五步搭建屬於自己的個人網站
如果你非常想擁有一個完全屬於自己的個人站點，本篇文章幫你起飛。搭建個人站點的方式有多種多樣，本篇主要介紹基於Java環境搭建個人站點。
5步完成個人網站搭
NodeJS+Express+MongoDB 簡單個人博客系統【Study筆記】
修改 exp 文章 edi view 代碼 mage 註釋 存在 Blog 個人博客系統
iBlog是在學習NodeJs時候一個練手項目Demo
系統支持用戶註冊/登錄，內容文章查看，評論，後臺管理（定制顯示的分類版塊，進行文章內容添加）超級管理員還可進行用戶管理等
目前只
做個人網站的一些經驗
廣告商 終極 網站 一個 容易 初步 媽媽 天都 等級 煎蛋網、月光網站、盧松松網站都獲得了成功。 我把網站劃分為幾個等級((違規網站、專業性質網站、商業網站、作弊、垃圾站不在此列，僅僅指個人網站) 起步階段：0—1000ip(負收益) 初級階段：10
個人網站怎麽通過cpa廣告聯盟掙錢
CPA廣告聯盟 個人網站
對於個人網站來說，網站在運營的時候面臨的不是流量提升，而是流量如何變現，是尋找同行相關廣告主嗎？還是賣產品？這些對於個人網站來說難度都太大，所以個人網站想要賺錢最好是選擇廣告聯盟平臺，而就當前的局勢來看，cpa廣告聯盟無疑是個人站長賺錢的首選平臺，也讓個人網站賺
個人網站如何選擇支付接口（API回調）
nvi 這一 退款 src 如圖所示 了吧 stripe 趨勢 mkvg 本人持續關註“個人網站支付接口”這個話題已久，期間也開發、對接過很多支付方的接口，如Paypal、支付寶、微信、環迅等。終於決定花點時間寫一款WordPress付費閱讀工具然後寫幾篇相關的文章。當然跟
個人網站：www.hazel.xin
size 文章 www 關註 ref bsp http ont style 個人網站地址：www.hazel.xin
博客園記錄ACM
個人博客記錄生活和一些技術型文章
歡迎大家關註^_^個人網站：www.hazel.xin
Nginx 學習筆記（一）個人網站的Https配置
ast 請求重定向 nginx nta pda opera 配置虛擬主機 location cat 一、系統環境
1、系統：Ubuntu 16.04.2 LTS
2、WEB服務器：Openresty11.2.5
二、開始配置
1、獲取certbot客戶端
wget htt
用阿裏雲獨享虛擬主機搭建個人網站
搭建 回顧 res tar 國外 text .com 跟著 如果 轉載一篇好文。
我一般不用國內虛擬主機
我在 購買域名空間要考慮的事 寫過為什麽我怕用國內的虛擬主機服務，回顧一下兩條理由
第一，廠商太壞，超售有限的共享主機資源，只管賺錢不管服務質量
第二，共享主機商的有些
如何使用 Github pages 建立托管個人網站 - 更新於 2017.10.13 （部分搬運）
直接 自己 一個 pos 查看 網站 osi 文件名 git clone 首先PS：該教程極大部分摘自博客園某同道，但畢竟 Github 版本勤更不綴，導致無法適用，以下為本人（Blackatall）最新版教程。
開始教程之前的準備工作：
1、需要你自己寫的網頁文件。
2
從零開始利用vue-cli搭建簡單音樂網站（一）
路徑 nod .com mman csdn desc blog -a where 最近在學習vue框架，練習了一些例子之後，想著搭建一個vue項目，了解到官方有提供一個vue-cli工具來搭建項目腳手架，嘗試了一下，寫下博客來記錄一下。
一、工具環境
1、node.js 6
簡單的網站首頁
乒乓球 完成 自動 左移 adding opacity ava tag title
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網站首頁
ASP.NET Core 一步步搭建個人網站（7）_Linux系統移植
window std bce stat 能夠 rpm 設置 with err 摘要
考慮我們為什麽要選擇.NET Core？
因為它面向的是高性能服務器開發，拋卻了 AspNet 的臃腫組件，非常輕量，加上微軟的跨平臺戰略，對 Docker 的親和性，對於開發人員也非常友好
CentOS7.3上部署簡單的網站(Tomcat)
oar boa firewall 查看 cat 由於 轉載 默認端口 tails
本文轉載自：沙師弟專欄 https://blog.csdn.net/u014597198/article/details/79649219 [ 感謝郭大大 ]
服務器版本：CentOS
從零開始系列之vue全家桶（4）帶新手小白一起搭建第一個個人網站項目
轉載 個人網站 rfi red nbsp oot ott osx 全部 未經允許，嚴禁轉載，全文由blackchaos提供。
在安裝好了前面大部分需要的插件，我們開始進行第一個個人項目。結合vue+vuex+vue-cli+vue-router+webpack使用。
個人網站html5雪花飄落代碼JS特效下載
ret 聖誕 pri 個人網站 nts 網站 www. pos jquery庫 如何給自己的網站/頁面添加雪花代碼、特效呢?有的網站配合自己的主題模板添加雪花飄落效果挺好看的。特別是與冬天季節相關的主題，很多的博客空間都加了雪花的效果。在網上搜索了幾種雪花效果，做了簡單的修