通過禪意花園的第26號作品 the beauty of css design 了解絕對定位的技巧。因為css禪意花園的html 檔案都是固定的。通過改變css 檔案的內容來給人們展示不同效果。
html 檔案如下
2. 要將html 檔案底部的div 絕對定位到最前面。讓黃色徽章,城市等背景居中。
3. 其實現**如下
.
4. 處理絕對定位時並不那麼方便。shea使用了一種非常有用的技巧來處理這個問題:首先將父元素絕對定位於頁面的最左邊。並將其寬度指定為100%,在水平方向佔滿整個瀏覽器視窗。然後將其子元素---這裡就span ---設定為居中。
5. note 內邊距值需要二倍於期望的偏移量。例如指定了370px 的padding-right,在中心座標系中將只會讓元素向左移動185px .由於元素居中放置,且新增內邊距值也同樣增加了元素的寬度,所以元素將同時向左右兩個方向移動相等的距離。
css 禪意花園 設計
顏色 作用顏色可以象徵一些普遍的事物從而引發人的一些情緒。事例1.紅色 暖色,容易聯想到火焰和辛辣的胡椒粉。代表力量 活力 愛 激情 進攻 危險 2.棕色 象徵土地,大自然 3.橙色 愉快 幸福 4.藍色 信任 保守 安全 清潔 悲傷 有序 5.綠色 大自然 健康 嫉妒 復甦 6.黃色 樂觀 希望 ...
讀書筆記 CSS禪意花園 文字排印
文字是內容的核心,所以對於文字的排印是至關重要的,這一篇主要介紹文字排印對於網頁中文字的處理技術。先講一下文字排印的一些基礎 在選擇字型時一定要在最後加上備用字型這一項,因為不同的系統有不同的支援 通用的是serif,cuisive用於手寫字型,fantasy用於裝飾字型 在色相和對比度的選擇上 在...
在《css禪意花園》中所學到的
浮動和定位的區別 對元素使用浮動,那麼這個元素依然存在於文件流中,周圍的元素也會感受到他的存在 定位的話,能夠實現精準定位於某乙個位置上,定位的元素將不佔據空間,就像消失了一樣 被定位過的容器 無論是絕對還是相對 的左上角將作為該容器中定位元素的起始點 小tips 對於浮動元素,而且還會有水平mar...