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

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

※ 首頁重點：

index.html：

<body>
	<!-- 主結構 -->
	<div class="wrapper">
		<!-- Start main -->
				<section class="main">
			<!-- Start jumbotron -->
			<div class="jumbotron">
				<!-- 遮罩元件 -->
				<div class="mask-dark"></div>
				<div class="container">
					<div class="logo-image" style="background-image: url('images/common/logo-w.png');"></div>
				</div>
			</div>
			<!-- End jumbotron -->
		</section>
		<!-- End main -->
	</div>
</body>

style.css：

/* -------------------------- *\
	Component元件
\* -------------------------- */
/* 遮罩元件 */
.mask-dark {
	/* 脫離block */

	background-color: rgba(0, 0, 0, 0.7);
	/* 寬高不影響排版 */
	position: absolute;
	/* 定位 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* jumbotron設定 */
.jumbotron {
	border: 1px solid #000;
	padding-top: 224px;
	padding-bottom: 160px;
	background-image: url('../images/bg/bg001.jpg');
	background-size: cover;
	/* 設定背景圖片固定在視窗上 */
	background-attachment: fixed;
}

/* 設定背景圖片寬高 */
.jumbotron .logo-image {
	width: 320px;
	height: 320px;
	border: 1px solid #000;
	/* 照片置中 */
	background-position: center;
	/* 顯示照片所有內容 */
	background-size: contain;
	background-repeat: no-repeat;
	/* 水平方向居中 */
	margin: 0 auto;
}

成果顯示：

raw-image

※ 首頁按鈕：

index.html：

<body>
	<!-- 主結構 -->
	<div class="wrapper">
		<!-- Start main -->
				<section class="main">
			<!-- Start jumbotron -->
			<div class="jumbotron">
				<div class="container">
				<!-- 按鈕 -->
					<!-- 按鈕置中 -->
					<div class="btn-group-center">
						<a href="#!" class="btn btn-primary btn-lg">這是一個按鈕</a>
						<a href="#!" class="btn btn-sceondary btn-lg ">這是一個按鈕</a>
					</div>
			</div>
			<!-- End jumbotron -->
		</section>
		<!-- End main -->
	</div>
</body>

style.css：

/* btn按鈕 */
.btn {
	display: inline-block;
	/* 強制inline-block向上對齊 */
	vertical-align: top;
	font-size: 16px;
	line-height: 24px;
	padding: 4px 16px;
	border: 1px solid #fff;
	color: #fff;
	border-radius: 4px;
	/* 時間變化設定 */
	transition: all 0.3s;
}

/* 主要的按鈕 */
.btn.btn-primary {
	background-color: #d5a26f;
	border: 1px solid #d5a26f;
	color: #fff;
}
/* 微互動 */
.btn.btn-primary:hover {
	background-color: #b2875c;
	border: 1px solid #b2875c;
}

/* 次要的按鈕 */
.btn.btn-secondary {
	border: 1px solid #d5a26f;
	color: #d5a26f;
}
/* 微互動 */
.btn.btn-secondary:hover {
	background-color: #d5a26f;
	color: #fff;
}

/* 大小設定 */
.btn.btn-lg {
	padding: 8px 32px;
}

/*  按鈕置中*/
.btn-group-center {
	border: 1px solid #fff;
	/* 文字上置中對齊 */
	text-align: center;
}

/* 推出間距 */
.btn-group-center .btn {
	margin-left: 12px;
	margin-right: 12px;
}

成果顯示：

raw-image


※ 圖片和按鈕的間距：

style.css：

/* 圖片和按鈕的間距 */
.jumbotron .btn-group-center {
	margin: 8px;
}

成果顯示：

raw-image


※ 關於餐廳內容：

index.html：

<!-- Start about -->
			<!-- 做出上下padding -->
			<div class="hero hero-bg-white">
				<!-- 置中版 -->
				<div class="container">
					<div class="row">
											<div class="col-1-2">
							<div class="about-preview">
								<h3 class="title">每杯咖啡留著手的餘溫</h3>
								<p class="para">
									一個咖啡有溫度的故事，只要咖啡加熱、沸騰到攝氏100度，你就可以用手摸摸看，應該會十分的燙手，一個咖啡有溫度的故事，只要咖啡加熱、沸騰到攝氏100度，你就可以用手摸摸看，應該會十分的燙手。</p>
								<a href="#!" class="btn btn-primary">更多我們的故事</a>
							</div>
						</div>
						<div class="col-1-2">
						<!-- 4:3結構框 -->
							<div class="image-container">
								<div class="image" style="background-image: url('images/products/product005.jpg');"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- End about -->

style.css：

/* -------------------------- *\
	Layout
\* -------------------------- */
/* float排版 */
.col-1-2,
.col-1-3,
.col-1-4 {
	/* 向左浮動 */
	border: 1px solid red;
	float: left;
	/* 由col去推一個向左和向右的間距 */
	padding-left: 16px;
	padding-right: 16px;
}
/* 圖片框 */
.image-container {
	width: 100%;
	border: 1px solid #000;
}

/* 圖片比例上控制 */
.image-container:before {
	content: '';
	display: block;
	width: 100%;
	padding-top: 75%;
}

.image-container .image {
	/* 圖片定位 */
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	/* 背景圖設定 */
	background-repeat: no-repeat;
	/* 讓圖片自適應框框 */
	background-size: cover;
	/* 置中設定 */
	background-position: center;
}
/* hero */
.hero {
	padding-top: 200px;
	padding-bottom: 200px;
	border: 1px solid #000;
}

.hero.hero-bg-white {
	background-color: #fefefe;
}

.hero.hero-bg-grey {
	background-color: #efefef;
}/* about-preview */
.about-preview .title {
	font-size: 32px;
	color: #333;
	margin-bottom: 24px;
	margin-top: 80px;
}

.about-preview .para {
	font-size: 16px;
	line-height: 32px;
	/* 設定文字「左右對齊」 */
	text-align: justify;
	color: #333;
	margin-bottom: 24px;
}

成果顯示：

raw-image

※ 服務內容：

index.html：

<!-- Start services -->
			<!-- 上下區塊推擠 -->
			<div class="hero hero-bg-grey">
							<!-- 置中版 -->
				<div class="container">
					<!-- 區段介紹 -->
					<div class="section-intro">
						<!-- 標題 -->
						<h2 class="title">SERVICES</h2>
						<!-- 文字說明 -->
						<p class="para">
							我們提供的服務在這裡有初步的介紹，諸如此類的介紹等等<br>多的文字就可以換行繼續寫</p>
					</div>
					<!-- 三欄式版型 -->
					<div class="row">
						<div class="col-1-3">
							<div class="service-item">
								<div class="image-container">
									<div class="image" style="background-image: url('images/products/product001.jpg');"></div>
								</div>
								<div class="preview">
									<h4 class="title">香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡</h4>
									<h5 class="subtitle">現煮的香濃咖啡，優質的咖啡豆</h5>
									<p class="para">
										一段中文的敘述文字，說明東西的美味及外觀等等的話，一段中文的敘述文字，說明東西的美味及外觀等等的話。一段中文的敘述文字，說明東西的美味及外觀等等的話，一段中文的敘述文字，說明東西的美味及外觀等等的話。
									</p>
									<a href="#!" class="btn btn-secondary">Read more</a>
								</div>
							</div>
						</div>
						<div class="col-1-3">
							<div class="service-item">
								<div class="image-container">
									<div class="image" style="background-image: url('images/products/product002.jpg');"></div>
								</div>
								<div class="preview">
									<h4 class="title">香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡</h4>
									<h5 class="subtitle">現煮的香濃咖啡，優質的咖啡豆</h5>
									<p class="para">
										一段中文的敘述文字，說明東西的美味及外觀等等的話，一段中文的敘述文字，說明東西的美味及外觀等等的話。一段中文的敘述文字，說明東西的美味及外觀等等的話，一段中文的敘述文字，說明東西的美味及外觀等等的話。
									</p>
									<a href="#!" class="btn btn-secondary">Read more</a>
								</div>
							</div>
						</div>
						<div class="col-1-3">
							<div class="service-item">
								<div class="image-container">
									<div class="image" style="background-image: url('images/products/product003.jpg');"></div>
								</div>
								<div class="preview">
									<h4 class="title">香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡香濃的咖啡</h4>
									<h5 class="subtitle">現煮的香濃咖啡，優質的咖啡豆</h5>
									<p class="para">
										一段中文的敘述文字，說明東西的美味及外觀等等的話，一段中文的敘述文字，說明東西的美味及外觀等等的話。一段中文的敘述文字，說明東西的美味及外觀等等的話，一段中文的敘述文字，說明東西的美味及外觀等等的話。
									</p>
									<a href="#!" class="btn btn-secondary">Read more</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End services -->

style.css：

/* 區段介紹  */
.section-intro {
	/* 置中版 */
	text-align: center;
	margin-bottom: 40px;
}

.section-intro .title {
	font-size: 48px;
	color: #333;
	/* 將段落文字往下推 */
	margin-bottom: 24px;
}

.section-intro .para {
	font-size: 16px;
	line-height: 32px;
	color: #333;
}
/* service-item */
.service-item .preview {
	/* 往內推出間距 */
	padding-top: 16px;
}

.service-item .title {
	font-size: 24px;
	color: #333;
	margin-bottom: 8px;
	/* 處理文字省略 */
	white-space: nowrap;
	/* 不換行*/
	overflow: hidden;
	/* 隱藏*/
	text-overflow: ellipsis;
}

.service-item .subtitle {
	font-size: 24px;
	color: #d5a26f;
	margin-bottom: 16px;
}

.service-item .para {
	font-size: 16px;
	color: #333;
	line-height: 24px;
	/* 把按鈕往下推 */
	margin-bottom: 24px;
	/* 只需要三行文字 */
	height: 72px;
	/* 限制高度 */
	/* border: 1px solid #000; */
	overflow: hidden;
}

成果顯示：

raw-image

※ 預約內容：

index.html：

	<!-- Start reservation -->
			<!-- 上下區塊推擠 -->
			<div class="hero">
				<div class="container">
					<div class="section-intro">
						<!-- 標題 -->
						<h2 class="title">Reservation</h2>
						<!-- 文字說明 -->
						<p class="para">
							我們提供的服務在這裡有初步的介紹，諸如此類的介紹等等<br>多的文字就可以換行繼續寫</p>
					</div>
					<!-- 按鈕 -->
					<!-- 按鈕置中 -->
					<div class="btn-group-center">
						<a href="#!" class="btn btn-primary btn-lg">訂位請點我</a>
					</div>
				</div>
			</div>
			<!-- End reservation -->

style.css：

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

/* 文字反白 */
.reservation .section-intro .title,
.reservation .section-intro .para {
	color: #fff;
}

成果顯示：

raw-image

※ 菜單內容：

index.html：


			<!-- Start menu -->
			<div class="hero">
				<div class="container">
					<div class="section-intro">
						<!-- 標題 -->
						<h2 class="title">MENU</h2>
						<!-- 文字說明 -->
						<p class="para">
							我們提供的服務在這裡有初步的介紹，諸如此類的介紹等等<br>多的文字就可以換行繼續寫</p>
					</div>
					<!-- 商品列 -->
					<div class="menu-list">
						<div class="title-bar">
							<!-- 標題 -->
							<h3 class="title">Coffee & Beverage</h3>
							<!-- 按鈕 -->
							<a href="#!" class="btn btn-secondary">more</a>
						</div>
						<!-- 四格商品卡 -->
						<div class="row">
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product005.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product006.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product007.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product008.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
						</div>
					</div>
					<div class="menu-list">
						<div class="title-bar">
							<!-- 標題 -->
							<h3 class="title">Coffee & Beverage</h3>
							<!-- 按鈕 -->
							<a href="#!" class="btn btn-secondary">more</a>
						</div>
						<!-- 四格商品卡 -->
						<div class="row">
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product005.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product006.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product007.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
							<div class="col-1-4">
								<!-- 讓圖片有超連結 -->
								<a href="#!">
									<div class="list-item">
										<div class="image-container">
											<div class="image" style="background-image: url('images/products/product008.jpg');"></div>
										</div>
										<div class="preview">
											<h5 class="title">阿拉斯加咖啡</h5>
											<h6 class="subtitle">供應條件</h6>
										</div>
									</div>
								</a>

							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End menu -->

style.css：


/* 商品列 */
.menu-list {
	/* 保留所有的設定 */
	margin-bottom: 64px;
}

/* 選取某個父元素中最後一個子元素，移除最後一個元素的邊距。 */
.menu-list:last-child {
	margin-bottom: 0;
}

.menu-list .title-bar {
	/* 推出標題和文字間的距離 */
	margin-bottom: 24px;
}

/* 清除浮動 */
.menu-list .title-bar:after {
	content: "";
	display: block;
	clear: both;
}

.menu-list .title-bar .title {
	font-size: 24px;
	line-height: 40px;
	color: #d5a26f;
	float: left;
	/* 文字向右 */
	padding-left: 16px;
}

/* 使用偽元素 */
.menu-list .title-bar .title:before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 24px;
	background-color: #d5a26f;
	position: absolute;
	/* 垂直置中 */
	top: 50%;
	left: 0;
	/* 歸零 */
	transform: translate(0, -50%);
}

.menu-list .title-bar .btn {
	/* 按鈕向右 */
	float: right;
	/* 按鈕高度和標題一致 */
	padding-top: 8px;
	padding-bottom: 8px;
}
.menu-list .list-item .image-container:before {
padding-top: 100%;}
.menu-list .list-item .title {
	font-size: 18px;
	color: #333;
	line-height: 24px;
	margin-bottom: 8px;
	margin-top: 16px;
}

.menu-list .list-item .subtitle {
	font-size: 14px;
	color: #d5a26f;
}

成果顯示：

raw-image






留言
avatar-img
留言分享你的想法！
avatar-img
奧莉薇走在成為後端工程師之路上
23會員
167內容數
全端網頁開發專業知識分享
奧莉薇走在成為後端工程師之路上的其他內容
2025/09/12
單頁式網頁切版 ：畫面切版（一）
※ 切版分析： 各區塊細節解析： 1. .header 頁首區 視覺焦點：Logo + 背景圖，營造品牌形象。 文字內容：包含「Rmoo Cafe」與中文標語。 設計重點： 背景圖可能使用 background-image 搭配 cover或 contain。 Logo 可用<img
Thumbnail
2025/09/12
單頁式網頁切版 ：畫面切版（一）
※ 切版分析： 各區塊細節解析： 1. .header 頁首區 視覺焦點：Logo + 背景圖，營造品牌形象。 文字內容：包含「Rmoo Cafe」與中文標語。 設計重點： 背景圖可能使用 background-image 搭配 cover或 contain。 Logo 可用<img
Thumbnail
2025/09/12
單頁式網頁切版 ：畫面切版（三）
※ contact內容： index.html： <!-- Start contact --> <div class="hero hero-bg-grey"> <div class="container"> <!-- 區段介紹 --> <div class="se
Thumbnail
2025/09/12
單頁式網頁切版 ：畫面切版（三）
※ contact內容： index.html： <!-- Start contact --> <div class="hero hero-bg-grey"> <div class="container"> <!-- 區段介紹 --> <div class="se
Thumbnail
2025/08/27
單頁式網頁切版 ：CSS文件整理
※ 英文原則： ※ 編碼宣告： ※ 文件開頭： ※ 文件開頭範例： ※ 註解範例： ※ 註解原則： ※ 元件權重原則： ※ 元件權重範例： ※ Class管理： ※ 語意化： 範例一： 範例二： 範例三： 範例四： 範例五： 範例六： ※ 開發人員工具：可以參考命名
Thumbnail
2025/08/27
單頁式網頁切版 ：CSS文件整理
※ 英文原則： ※ 編碼宣告： ※ 文件開頭： ※ 文件開頭範例： ※ 註解範例： ※ 註解原則： ※ 元件權重原則： ※ 元件權重範例： ※ Class管理： ※ 語意化： 範例一： 範例二： 範例三： 範例四： 範例五： 範例六： ※ 開發人員工具：可以參考命名
Thumbnail
看更多
#咖啡 的其他內容
Thumbnail
咖啡。生活
目前共 4102 篇
avatar-avatar
托馬斯的社群咖啡館
2025 咖啡爽節工作人員（場佈、服務台、杯測賽與喝喝喝）
avatar-avatar
Sylvie的移動城堡
喝飲料的儀式感
avatar-avatar
極簡人的家
極簡人與咖啡的成長故事：苦澀中帶著濃甜的記憶
你可能也想看
Thumbnail
avatar-avatar
Emma 的意識界。
輕鬆賺零用金的祕密 | 蝦皮分潤計畫賺零用金實測成果開箱 ＋近期敗家好物開箱 😁
透過蝦皮分潤計畫，輕鬆賺取零用金！本文分享5-6月實測心得，包含數據流程、實際收入、平臺優點及注意事項，並推薦高分潤商品，教你如何運用空閒時間創造被動收入。
#蝦皮#行動電源#測試
Thumbnail
avatar-avatar
Emma 的意識界。
輕鬆賺零用金的祕密 | 蝦皮分潤計畫賺零用金實測成果開箱 ＋近期敗家好物開箱 😁
透過蝦皮分潤計畫，輕鬆賺取零用金！本文分享5-6月實測心得，包含數據流程、實際收入、平臺優點及注意事項，並推薦高分潤商品，教你如何運用空閒時間創造被動收入。
#蝦皮#行動電源#測試
Thumbnail
avatar-avatar
好好宅在家
【單身實驗室．蝦皮分潤計畫】藏身蝦皮的植系青屬，為我的北向陽台增添家人。
單身的人有些會養寵物，而我養植物。畢竟寵物離世會傷心，植物沒養好再接再厲就好了~（笑）
#開箱#蝦皮分潤計畫#單身實驗室
Thumbnail
avatar-avatar
好好宅在家
【單身實驗室．蝦皮分潤計畫】藏身蝦皮的植系青屬，為我的北向陽台增添家人。
單身的人有些會養寵物，而我養植物。畢竟寵物離世會傷心，植物沒養好再接再厲就好了~（笑）
#開箱#蝦皮分潤計畫#單身實驗室
Thumbnail
avatar-avatar
翰墨飄香的沙龍
補貨小日常｜居家生活用品實測分享，還順便開啟蝦皮分潤計畫小驚喜！
不知你有沒有過這種經驗？衛生紙只剩最後一包、洗衣精倒不出來，或電池突然沒電。這次一次補貨，從電池、衛生紙到洗衣精，還順便分享使用心得。更棒的是，搭配蝦皮分潤計畫，愛用品不僅自己用得安心，分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E，輕鬆上手，隨時隨地賺取分潤！
#衛生紙#洗衣精#居家生活
Thumbnail
avatar-avatar
翰墨飄香的沙龍
補貨小日常｜居家生活用品實測分享，還順便開啟蝦皮分潤計畫小驚喜！
不知你有沒有過這種經驗？衛生紙只剩最後一包、洗衣精倒不出來，或電池突然沒電。這次一次補貨，從電池、衛生紙到洗衣精，還順便分享使用心得。更棒的是，搭配蝦皮分潤計畫，愛用品不僅自己用得安心，分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E，輕鬆上手，隨時隨地賺取分潤！
#衛生紙#洗衣精#居家生活
Thumbnail
avatar-avatar
阿Mo的murmur小天地🪄
開箱＋分潤分享｜社畜的療癒小樹洞 🧑‍🎨 iPad 殼 × 蝦皮分潤計畫
身為一個典型的社畜，上班時間被會議、進度、KPI 塞得滿滿，下班後只想要找一個能夠安靜喘口氣的小角落。對我來說，畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉，還是慢慢描繪喜歡的插畫人物，那個專注在筆觸和色彩的過程，就像在幫心靈按摩一樣，讓緊繃的神經慢慢鬆開。
#小確幸#iPad#樹洞
Thumbnail
avatar-avatar
阿Mo的murmur小天地🪄
開箱＋分潤分享｜社畜的療癒小樹洞 🧑‍🎨 iPad 殼 × 蝦皮分潤計畫
身為一個典型的社畜，上班時間被會議、進度、KPI 塞得滿滿，下班後只想要找一個能夠安靜喘口氣的小角落。對我來說，畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉，還是慢慢描繪喜歡的插畫人物，那個專注在筆觸和色彩的過程，就像在幫心靈按摩一樣，讓緊繃的神經慢慢鬆開。
#小確幸#iPad#樹洞
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
《創作者事業研究室》沙龍
【復盤優化內容，用戶更好吸收】
【復盤優化內容，用戶更好吸收】
#啟發隨想#電子報#JamesClear
Thumbnail
avatar-avatar
《創作者事業研究室》沙龍
【復盤優化內容，用戶更好吸收】
【復盤優化內容，用戶更好吸收】
#啟發隨想#電子報#JamesClear
Thumbnail
avatar-avatar
Kirs 的日常分享
今日篇
#環島#徒步環島#旅行
Thumbnail
avatar-avatar
Kirs 的日常分享
今日篇
#環島#徒步環島#旅行
Thumbnail
avatar-avatar
路路通的世界(賣瓜仔)的沙龍
[2024/01/21] 何謂完整？
生活日誌！
Thumbnail
avatar-avatar
路路通的世界(賣瓜仔)的沙龍
[2024/01/21] 何謂完整？
生活日誌！
Thumbnail
avatar-avatar
蕭妘娟的沙龍
第一次發文~
哈囉大家好~~我第一次使用
Thumbnail
avatar-avatar
蕭妘娟的沙龍
第一次發文~
哈囉大家好~~我第一次使用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News