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

奧莉薇-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;
}

成果顯示：

raw-image

※ 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;
}

成果顯示：

raw-image

※ 頁面之間轉跳：透過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
奧莉薇走在成為後端工程師之路上
26會員
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
釀電影，啜一口電影的美好。
《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。
#釀電影#釀評論#藝術評論
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。
#釀電影#釀評論#藝術評論
Thumbnail
avatar-avatar
趙鐸的沙龍
柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望
柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。
#2026北藝嚴選#臺北表演藝術中心#北藝嚴選
Thumbnail
avatar-avatar
趙鐸的沙龍
柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望
柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。
#2026北藝嚴選#臺北表演藝術中心#北藝嚴選
Thumbnail
avatar-avatar
花神沒有咖啡館的沙龍
《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
花神沒有咖啡館的沙龍
《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
涵柳的沙龍
《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生
《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
涵柳的沙龍
《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生
《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
路路通的世界(賣瓜仔)的沙龍
[2024/08/13] 請試著找找看...
生活日誌！
#路路通的世界#賣瓜仔#生活日誌
Thumbnail
avatar-avatar
路路通的世界(賣瓜仔)的沙龍
[2024/08/13] 請試著找找看...
生活日誌！
#路路通的世界#賣瓜仔#生活日誌
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
象象與嬌妻的沙龍
人體速寫(七)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(七)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(三)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(三)
#人體速寫#女性人體速寫
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(二)
#人體速寫#女性人體速寫#象象與嬌妻
Thumbnail
avatar-avatar
象象與嬌妻的沙龍
人體速寫(二)
#人體速寫#女性人體速寫#象象與嬌妻
Thumbnail
avatar-avatar
雞蛋布丁的沙龍
多樣化海報設計合輯：獨特魅力和情感
#關鍵字#網站#排名
Thumbnail
avatar-avatar
雞蛋布丁的沙龍
多樣化海報設計合輯：獨特魅力和情感
#關鍵字#網站#排名
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News