單頁式網頁切版 ：畫面切版（三）

奧莉薇-avatar-img
奧莉薇
更新 發佈閱讀 16 分鐘

※ contact內容：

index.html：


		<!-- Start contact -->
		<div class="hero hero-bg-grey">
			<div class="container">
				<!-- 區段介紹 -->
				<div class="section-intro">
					<!-- 標題 -->
					<h2 class="title">CONTACT</h2>
					<!-- 文字說明 -->
					<p class="para">
						我們提供的服務在這裡有初步的介紹，諸如此類的介紹等等<br>多的文字就可以換行繼續寫</p>
				</div>
				<div class="row">
					<div class="col-1-2">
						<div class="contact-info">
							<div class="info-item">
								<h4 class="title"><span>PHONE $ TEL</span></h4>
								<a href="tel:0912345678" class="info">0912-345-678</a>
							</div>
							<div class="info-item">
								<h4 class="title"><span>LOCATION</span></h4>
								<a href="#!" class="info">高雄市苓雅區某某路123號</a>
							</div>
							<div class="info-item">
								<h4 class="title"><span>HOURS</span></h4>
								<div class="info">
									上午 11:00 至下午 6:00、週四公休
								</div>
							</div>
						</div>
					</div>
					<div class="col-1-2">
						<!-- 多一個容器裝地圖 -->
						<div class="map-container">
							<iframe
								src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29376.28631563166!2d120.19355499999999!3d23.022458099999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e7659ed76b0c7%3A0xa2380aab1510d45c!2z6Ie65Y2X5biC6Iqx5ZyS5aSc5biC!5e0!3m2!1szh-TW!2stw!4v1757404466409!5m2!1szh-TW!2stw"
								width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
								referrerpolicy="no-referrer-when-downgrade"></iframe>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End contact -->

style.css：

/* 聯絡資訊 */
.contact-info {
	padding-top: 40px;
}

.contact-info .info-item {
	margin-bottom: 24px;
}

.contact-info .info-item .title {
	color: #d5a26f;
	line-height: 36px;
	margin-bottom: 16px;
}

.contact-info .info-item .title span {
	border-bottom: 2px solid #d5a26f;
	/* 顯示行高 */
	display: inline-block;
}

.contact-info .info-item .info {
	line-height: 32px;
	color: #333;
}

/* 地圖 */
.map-container {
	width: 100%;
	padding-top: 75%;
	border: 1px solid #000;
}
.map-container iframe{
	position: absolute;
	left: 0;
	top: 0;
}

成果顯示：

vocus｜新世代的創作平台

※ footer內容：

index.html：

	<!-- Start contact -->
		<div class="hero hero-bg-grey">
			<div class="container">
				<!-- 區段介紹 -->
				<div class="section-intro">
					<!-- 標題 -->
					<h2 class="title">CONTACT</h2>
					<!-- 文字說明 -->
					<p class="para">
						我們提供的服務在這裡有初步的介紹，諸如此類的介紹等等<br>多的文字就可以換行繼續寫</p>
				</div>
				<div class="row">
					<div class="col-1-2">
						<div class="contact-info">
							<div class="info-item">
								<h4 class="title"><span>PHONE $ TEL</span></h4>
								<a href="tel:0912345678" class="info">0912-345-678</a>
							</div>
							<div class="info-item">
								<h4 class="title"><span>LOCATION</span></h4>
								<a href="#!" class="info">高雄市苓雅區某某路123號</a>
							</div>
							<div class="info-item">
								<h4 class="title"><span>HOURS</span></h4>
								<div class="info">
									上午 11:00 至下午 6:00、週四公休
								</div>
							</div>
						</div>
					</div>
					<div class="col-1-2">
						<!-- 多一個容器裝地圖 -->
						<div class="map-container">
							<iframe
								src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29376.28631563166!2d120.19355499999999!3d23.022458099999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e7659ed76b0c7%3A0xa2380aab1510d45c!2z6Ie65Y2X5biC6Iqx5ZyS5aSc5biC!5e0!3m2!1szh-TW!2stw!4v1757404466409!5m2!1szh-TW!2stw"
								width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
								referrerpolicy="no-referrer-when-downgrade"></iframe>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End contact -->
		<!-- Start footer -->
		<footer class="footer">
			<div class="hero">
				<div class="mask-dark"></div>
				<div class="container">
					<a href="#!" class="brand"></a>
					<!-- 導覽列的元件 -->
					<ul class="nav">
						<li class="nav-item">
							<a href="#!" class="nav-link">關於</a>
						</li>
						<li class="nav-item">
							<a href="#!" class="nav-link">服務</a>
						</li>
						<li class="nav-item">
							<a href="#!" class="nav-link">訂位</a>
						</li>
						<li class="nav-item">
							<a href="#!" class="nav-link">菜單</a>
						</li>
						<li class="nav-item">
							<a href="#!" class="nav-link">聯絡</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 著作權 -->
			<div class="copyright">
				<p>© Copyright 2020 All rights reserved
				</p>
			</div>
		</footer>

		<!-- End footer -->

style.css：

/* footer */
.footer {
	background-image: url('../images/bg/bg003.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.footer .brand {
	display: block;
	width: 240px;
	height: 240px;
	/* 水平方向置中 */
	margin: 0 auto;
	background-image: url('../images/common/logo-w.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

}

.footer .nav {
	/* border: 1px solid #fff; */
	/* 彈性排版 */
	display: flex;
	/* 自適應內容 */
	justify-content: center;
}

.footer .nav .nav-link {
	/* border: 1px solid #fff; */
	color: #fefefe;
	display: block;
	padding: 24px;
	line-height: 24px;
	/* 時間設定 */
	transition: all 0.3s;
}

/* 微互動 */
.footer .nav .nav-link:hover {
	color: #d5a26f;
}

/* 著作權  */
.footer .copyright {
	background-color: rba(0, 0, 0, 0.8);
	color: #ccc;
	text-align: center;
	line-height: 24px;
	padding: 16px;
	font-size: 14px;
}

成果顯示：

vocus｜新世代的創作平台

※ 頁面之間轉跳：透過ID連結

index.html：

	<!-- 導覽按鈕 -->
					<ul class="nav">
						<li class="nav-item">
							<a href="#about" class="nav-link">關於</a>
						</li>
						<li class="nav-item">
							<a href="#service" class="nav-link">服務</a>
						</li>
						<li class="nav-item">
							<a href="#reservation" class="nav-link">訂位</a>
						</li>
						<li class="nav-item">
							<a href="#menu" class="nav-link">菜單</a>
						</li>
						<li class="nav-item">
							<a href="#contact" class="nav-link">聯絡</a>
						</li>
					</ul>
					<div id="about" class="hero hero-bg-white">
					<div id="service" class="hero hero-bg-grey">
					<div id="reservation" class="hero reservation">
					<div id="menu" class="hero">
				<div id="contact" class="hero hero-bg-grey">




留言
avatar-img
奧莉薇走在成為後端工程師之路上
28會員
171內容數
全端網頁開發專業知識分享
奧莉薇走在成為後端工程師之路上的其他內容
2025/08/27
單頁式網頁切版 ：CSS文件整理
※ 英文原則： ※ 編碼宣告： ※ 文件開頭： ※ 文件開頭範例： ※ 註解範例： ※ 註解原則： ※ 元件權重原則： ※ 元件權重範例： ※ Class管理： ※ 語意化： 範例一： 範例二： 範例三： 範例四： 範例五： 範例六： ※ 開發人員工具：可以參考命名
Thumbnail
2025/08/27
單頁式網頁切版 ：CSS文件整理
※ 英文原則： ※ 編碼宣告： ※ 文件開頭： ※ 文件開頭範例： ※ 註解範例： ※ 註解原則： ※ 元件權重原則： ※ 元件權重範例： ※ Class管理： ※ 語意化： 範例一： 範例二： 範例三： 範例四： 範例五： 範例六： ※ 開發人員工具：可以參考命名
Thumbnail
2025/08/27
單頁式網頁切版 ：置中方法與複習
※ 各式置中方法與複習： ※ 建立center_practice專案： 1. margin: 0 auto： index.html： <body> <!-- margin: 0 auto; 的置中方式 --> <h2>1. margin: 0 auto; 的置中方式</h2> <div
Thumbnail
2025/08/27
單頁式網頁切版 ：置中方法與複習
※ 各式置中方法與複習： ※ 建立center_practice專案： 1. margin: 0 auto： index.html： <body> <!-- margin: 0 auto; 的置中方式 --> <h2>1. margin: 0 auto; 的置中方式</h2> <div
Thumbnail
2025/08/24
Html、CSS基礎 – 綜合實作：
※ 圖片放置結合商品卡範例： 商品成果範例： 建立product-card-2_example專案： index.html： <body> <!-- 網頁的最外層 --> <div class="wrapper"> <!-- 商品卡 --> <div class="prod
Thumbnail
2025/08/24
Html、CSS基礎 – 綜合實作：
※ 圖片放置結合商品卡範例： 商品成果範例： 建立product-card-2_example專案： index.html： <body> <!-- 網頁的最外層 --> <div class="wrapper"> <!-- 商品卡 --> <div class="prod
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
小P趨勢投資
算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯
背景：從冷門配角到市場主線，算力與電力被重新定價   小P從2008進入股市，每一個時期的投資亮點都不同，記得2009蘋果手機剛上市，當時蘋果只要在媒體上提到哪一間供應鏈，隔天股價就有驚人的表現，當時光學鏡頭非常熱門，因為手機第一次搭上鏡頭可以拍照，也造就傳統相機廠的殞落，如今手機已經全面普及，題
#AI#算力#電力
Thumbnail
avatar-avatar
小P趨勢投資
算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯
背景：從冷門配角到市場主線，算力與電力被重新定價   小P從2008進入股市，每一個時期的投資亮點都不同，記得2009蘋果手機剛上市，當時蘋果只要在媒體上提到哪一間供應鏈，隔天股價就有驚人的表現，當時光學鏡頭非常熱門，因為手機第一次搭上鏡頭可以拍照，也造就傳統相機廠的殞落，如今手機已經全面普及，題
#AI#算力#電力
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(二)
#人體速寫#女性人體速寫#象象與嬌妻
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(二)
#人體速寫#女性人體速寫#象象與嬌妻
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(三)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(三)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(七)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(七)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
雞蛋布丁的沙龍
多樣化海報設計合輯：獨特魅力和情感
#關鍵字#網站#排名
Thumbnail
avatar-avatar
雞蛋布丁的沙龍
多樣化海報設計合輯：獨特魅力和情感
#關鍵字#網站#排名
Thumbnail
avatar-avatar
畫的沙龍
插畫
Thumbnail
avatar-avatar
畫的沙龍
插畫
Thumbnail
avatar-avatar
教練實戰學院
07/01-02 心得暫停
Thumbnail
avatar-avatar
教練實戰學院
07/01-02 心得暫停
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(十三)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(十三)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
路路通的世界(賣瓜仔)的沙龍
[2024/08/13] 請試著找找看...
生活日誌！
#路路通的世界#賣瓜仔#生活日誌
Thumbnail
avatar-avatar
路路通的世界(賣瓜仔)的沙龍
[2024/08/13] 請試著找找看...
生活日誌！
#路路通的世界#賣瓜仔#生活日誌
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News