2. 程式人生 > >CSS設計美麗之絕對定位（absolute）的使用（小作品）

CSS設計美麗之絕對定位（absolute）的使用（小作品）

阿新 • • 發佈：2019-01-29

關於HTML與CSS的小作品之一：

前端已經學習過絕對定位的概念了：

絕對定位：脫離文件流，以 離自己最近定位的祖先元素（position） 為參照物，如果沒有定位的祖先元素，則追溯到以body為參照物，通過四個偏移屬性進行偏移，不會影響文件中的元素，其margin不會與其它margin重疊。

以下是自己學習絕對定位後的做的一個小作品：

最後的作品效果為：


根據圖片可以寫出大概的HTML程式碼框架：

<!DOCTYPE html>
<html lang="zh-en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>CSS Zen Garden: CSS設計之美</title>
	<link rel="stylesheet" media="screen" href="029/029.css">

	<meta name="author" content="Changjiu Huang">
	<meta name="description" content="展示CSS設計的美麗。">
	<meta name="robots" content="all">

	<!--[if lt IE 9]>
	<script src="script/html5shiv.js"></script>
	<![endif]-->
  </head>

<body>
<div class="page-wrapper">

	<section class="intro" id="zen-intro">
		<header role="banner">
			<h1>CSS Zen Garden</h1>
			<h2><abbr title="Cascading Style Sheets">CSS</abbr>設計之美</h2>
		</header>

		<div class="summary" id="zen-summary" role="article">
			<p></p>
			<p></p>
		</div>

		<div class="preamble" id="zen-preamble" role="article">
			<h3>開悟之路</h3>
			<p> </p>
			<p></p>
			<p></p>
		</div>
	</section>

	<div class="main supporting" id="zen-supporting" role="main">
		<div class="explanation" id="zen-explanation" role="article">
			<h3>這是關於什麼？</h3>
			<p></p>
			<p></p>
		</div>

		<div class="participation" id="zen-participation" role="article">
			<h3>參與</h3>
			<p> </p>
			<p></p>
			<p></p>
		</div>

		<div class="benefits" id="zen-benefits" role="article">
			<h3>益處</h3>
			<p></p>
		</div>

		<div class="requirements" id="zen-requirements" role="article">
			<h3>必要條件</h3>
			<p></p>
			<p> </p>
			<p></p>
			<p></p>
			<p></p>
		</div>

		<footer>
			<a href="javascript:void(0);" title="檢查網站的HTML是否合乎標準" class="zen-validate-html">HTML</a>
			<a href="javascript:void(0);" title="檢查網站的CSS是否合乎標準" class="zen-validate-css">CSS</a>
			<a href="javascript:void(0);" title="檢視本網站的創用CC版權宣告：姓名標示-非商業性-相同方式分享" class="zen-license">CC</a>
			<a href="javascript:void(0);" title="閱讀關於本網站的親和力說明" class="zen-accessibility">A11y</a>
			<a href="javascript:void(0);" title="在GitHub建立本網站的分支" class="zen-github">GH</a>
		</footer>

	</div>


	<aside class="sidebar" role="complementary">
		<div class="wrapper">

			<div class="design-selection" id="design-selection">
				<h3 class="select">選擇一項設計：</h3>
				<nav role="navigation">
					<ul>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
				    </ul>
				</nav>
			</div>

			<div class="design-archives" id="design-archives">
				<h3 class="archives">資料彙整：</h3>
				<nav role="navigation">
					<ul>
						<li class="next">
							<a href="javascript:void(0);">
								下一個設計 <span class="indicator">›</span>
							</a>
						</li>
						<li class="viewall">
							<a href="javascript:void(0);" title="瀏覽所有設計。">
								瀏覽所有設計							</a>
						</li>
					</ul>
				</nav>
			</div>

			<div class="zen-resources" id="zen-resources">
				<h3 class="resources">資源：</h3>
				<ul>
				  <li></li>	
				</ul>
			</div>
		</div>
	</aside>


</div>
</body>
</html>


使用CSS樣式表示設定樣式：

/**
* fileName: style.css
*
* fileRemark：層疊樣式表
*
* author: changjiu Huang
*
* email: [email protected]
*
* create log 2017年5月14日12:00:00
*
* update log 2017年5月14日12:30:00
*
**/

/* basic css*/
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
  background: #fff url("main_bg.gif") repeat-x top left;
}

p {
  margin: 0;
  text-align: left;
}

a:link {
  font-weight: bold;
  color: #616157;
}

a:visited {
  font-weight: bold;
  color: #616157;
}

a:hover, a:active {
  color: 814610;
}

/* 具體設計 */
.page-wrapper {
  width: 770px;
  padding: 0;
  margin: 0;
}

.intro {
  width: 770px;
  padding: 0;
  margin: 0;
  margin-top: 28px;
  background: url("quicksum_bg.gif") no-repeat;
}

header {
  width: 770px;
  height: 72px;
  padding: 0;
  margin: 0;
  margin-bottom: 22px;
}

header h1 {
  float: left;
  width: 403px;
  height: 72px;
  margin-top: 0;
  background: transparent url("intro_bg.jpg") no-repeat left top; 
}

header h2 {
  float: left;
  width: 367px;
  height: 72px;
  margin: 0;
  background: transparent url("intro_bg2.jpg") no-repeat left top;
}

/* 隱藏 標題 */
header h1, header h2 {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}


/* summary css */
.summary {
  float: left;
  clear: both;
  width: 180px;
  padding: 10px;
  margin-top: -1.8em;
  border-top: 1px dashed #999;
  font-family:georgia, serif;
  font-size: 11px;
  line-height: 30px;
  color: #626257;
}

/* 首字母下沉 */
.summary p:first-child:first-letter,
.preamble p:nth-child(2):first-letter {
  padding-right: 5px;
  font-size: 3em;
  color: #811610;
}


/* preamble css */
.preamble {
  clear: both;
  width: 180px;
  padding: 10px;
  line-height: 30px;
  font-family:georgia, serif;
  font-size: 11px;
  color:#616157;
  z-index: 4;
}

.preamble h3 {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #811610;
  border-bottom: 1px solid #811610;
  font-size: 15px;
  line-height: 16px;
}


/* supporting css */
.supporting {
  position: absolute;
  top: 100px;
  width: 344px;
  height: auto;
  padding: 0 10px;
  margin-left: 200px;
  border: 1px solid #999;
  background: #f7f7f2;
  font-family:georgia, serif;
  font-size: 13px;
  box-shadow: 5px 0 5px #ccc;  
}

.explanation h3, .participation h3, 
.benefits h3, .requirements h3 {
  width: 300px;
  height: 15px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #999;
}

.explanation h3 {
  background: transparent url("sup_h3_a.gif") no-repeat;
}

.participation h3 {
  background: transparent url("sup_h3_b.gif") no-repeat;
}

.benefits h3 {
  background: transparent url("sup_h3_c.gif") no-repeat;
}

.requirements h3 {
  background: transparent url("sup_h3_d.gif") no-repeat;
}

.supporting h3 {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

footer {
  padding-bottom: 10px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
  font-family:verdana, arial, sans serif;
  font-size: 10px;
  text-align: center;
}

footer a:link, footer a:visited { 
	margin: 5px;
	font-weight: normal; 
}


/* sidebar css */
.sidebar {
  position: absolute;
  left: 575px;
  top: 100px;
  width: 200px;
  height: 100%;
  font-size: 12px;
}

.sidebar h3 {
  width: 180px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

.sidebar h3.select {
  margin-bottom: 10px;
  background: transparent url("linklist_a.gif") no-repeat left bottom;
}

.sidebar h3.archives {
  padding-top: 5px;
  border-top: 1px dashed #999;
  margin: 25px 10px 10px 0;
  background: transparent url("linklist_b.gif") no-repeat left bottom;
}

.sidebar h3.resources {
  padding-top: 5px;
  border-top: 1px dashed #999;
  margin: 25px 10px 10px 0;
  background: transparent url("linklist_c.gif") no-repeat left bottom;
}

.sidebar ul {
  padding: 0;
  margin: 0;
  color: #555;
}

.sidebar ul li {
  padding-top: 5px;
  margin-bottom: 5px;
  list-style: none;
  background: transparent;
}

.sidebar li a:link { 
	color: #555;
}

.sidebar li a:visited {
	color: #555;
}

.sidebar li a:hover, .sidebar li a:active {
	color:#811610;
}	

a.designer-name:link, a.designer-name:visited,
a.designer-name:hover, a.designer-name:active {
  font-weight: normal;
}


其中，supperting部分和sides部分使用了絕對定位。且它們均是以<body>為參考點，因為它們的父級沒有使用定位屬性。

相關推薦

CSS設計美麗之絕對定位（absolute）的使用（小作品）

關於HTML與CSS的小作品之一： 前端已經學習過絕對定位的概念了： 絕對定位：脫離文件流，以 離自己最近定位的祖先元素（position） 為參照物，如果沒有定位的祖先元素，則追溯到以body為參照物，通過四個偏移屬性進行偏移，不會影響文件中的元素，其margin不會與

CSS設計美麗之橫排頁面（小作品）

本次作品與前幾次的作品的不同之處在於：這次頁面是橫排顯示的，即用滑鼠左右滾動來檢視網頁。 作品效果： 可以看出，這個文件的width是遠遠大於height，因為使用橫排的顯示方式來佈局頁面，使用滑鼠左右滾動來顯示。 HTML程式碼： <!DOCTYPE h

CSS設計美麗之百合花（小作品）

這次的小作品選用了百合花圖片作為文件top的背景圖。 作品效果： 程式碼框架結構： <!DOCTYPE html> <html lang="zh-en"> <head> <meta http-equiv="

CSS設計的美麗之居中、:before()、:after()的使用（小作品）

關於HTML與CSS的小作品之二： 作品效果如下所示： 準備工作： 1、開發軟體Notepad++ 2、Photoshop（切圖） 3、瀏覽器 首先，拿到此圖後，觀察發現，這個作品的主要內容是在螢幕中居中顯示的，先用畫圖軟體畫一下如何進行佈局，在心中有一個大概

CSS之絕對定位

用戶 note alt src 基礎 讓我 blue 分享 出現 w3school定義： 絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麽它的位置相對於最初的包含塊。 對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們復習一下學

【轉載】CSS之絕對定位及相對定位

通過 原本 second span sof 動手 lan 根據 為什麽 我們先來看看CSS3 Api中對position屬性的相關定義： static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。 relative：對象遵

設計模式之服務定位器模式（Service Locator Pattern）

服務定位器模式（Service Locator Pattern）用在我們想使用 JNDI 查詢定位各種服務的時候。考慮到為某個服務查詢 JNDI 的代價很高，服務定位器模式充分利用了快取技術。在首次請求某個服務時，服務定位器在 JNDI 中查詢服務，並快取該服務物件。當再次請求相同的服務時，

HTML之絕對定位Absolute

HTML之絕對定位 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

CSS篇之1. CSS 盒子模型，絕對定位和相對定位

1. CSS 盒子模型，絕對定位和相對定位 解答： (1)css盒子模型： CSS中，盒子模型也叫框模型，它規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。在HTML文件中，每個元素都有盒子模型。 內邊距、邊框和外邊距可以應用於一個

C#設計模式之五創建者模式（Builder）【創建型】

包含 direct linq 自然 解釋 並且 宋體 主板 但是 一、引言 今天我們要講講Builder模式，也就是建造者模式，當然也有叫生成器模式的。在現實生活中，我們經常會遇到一些構成比較復雜的物品，比如：電腦，它就是一個復雜的物品，它主要是由CPU、主板、硬盤、顯卡

絕對定位position: absolute;

right log type itl 20px red left pre oct <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

C#設計模式之十七中介者模式（Mediator Pattern）【行為型】

[] 過多 深入 理解 申請 代碼實現 控制 name 缺點 原文:C#設計模式之十七中介者模式（Mediator Pattern）【行為型】一、引言 今天我們開始講“行為型”設計模式的第五個模式，該模式是【中介者模式】，英文名稱是：Mediator Pattern。還

C#設計模式之十六觀察者模式（Observer Pattern）【行為型】

ngx 現實生活 松耦合 mon html 機制 account current 很好 原文:C#設計模式之十六觀察者模式（Observer Pattern）【行為型】一、引言 今天是2017年11月份的最後一天，也就是2017年11月30日，利用今天再寫一個模式，爭取

C#設計模式之十一享元模式（Flyweight Pattern）【結構型】

eal 客戶 來看 滿足 對象狀態 英文 輔助 3.3 fig 原文:C#設計模式之十一享元模式（Flyweight Pattern）【結構型】一、引言 今天我們要講【結構型】設計模式的第六個模式，該模式是【享元模式】，英文名稱是：Flyweight Pattern。還

C#設計模式之二十三解釋器模式（Interpreter Pattern）【行為型】

要求 ict string 技術 get protect dict site 關鍵字 原文:C#設計模式之二十三解釋器模式（Interpreter Pattern）【行為型】一、引言 今天我們開始講“行為型”設計模式的第十一個模式，也是面向對象設計模式的最後一個模式，先

C#設計模式之二十一訪問者模式（Visitor Pattern）【行為型】

href 集中 動態 元素 lis 聲明 風格 on() 封裝 原文:C#設計模式之二十一訪問者模式（Visitor Pattern）【行為型】一、引言 今天我們開始講“行為型”設計模式的第九個模式，該模式是【訪問者模式】，英文名稱是：Visitor Pattern。如

C#設計模式之二十二備忘錄模式（Memento Pattern）【行為型】

his 備忘錄 很好 car 人的 成功率 構圖 設計模式的 就會 原文:C#設計模式之二十二備忘錄模式（Memento Pattern）【行為型】一、引言 今天我們開始講“行為型”設計模式的第十個模式，該模式是【備忘錄模式】，英文名稱是：Memento Pattern

Java設計模式之五大創建型模式（附實例和詳解）

caf aac concrete 為什麽 ota pil sem 而不是 rtm 一、概況 總體來說設計模式分為三大類： （1）創建型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。 （2）結構型模式，共七種：適配器模式、裝飾器模式、代理模式

javaScript設計模式之面向對象編程（object-oriented programming，OOP）(一)

email 全局變量 color javascrip 原型 obj 只有一個 沒有 ted 面試的時候，總會被問到，你對javascript面向對象的理解？ 面向對象編程（object-oriented programming，OOP）是一種程序設計範型。它講對象

javaScript設計模式之面向對象編程（object-oriented programming，OOP）(二）

ogr 調用 抽象 組合 copy object 每次 prototype 種類型 接上一篇 面向對象編程的理解？ 答：面向對象編程，就是將你的需求抽象成一個對象，然後針對這個對象分析其特征（屬性）與動作（方法）。這個對象我們稱之為類。面向對象編程思想其中一個特點就是封