如何讓<div>高度自動調整到背景圖片大小？ 另一種可能效率低下的解決方案是將圖像包含在<img/>元素集下visibility: hidden;，然後<div>使background-image。 這會將<div>設置為<img/>元素中圖像的大小，但將其顯示使用的是背景。...
CSS Flex圖片固定區塊高度寬度垂直左右置中
利用CSS Flex將圖片高寬度max100%對應外部區塊，上下垂直左右置中顯示於區塊中，這樣一來不管圖片大小多大，圖片都能正常比例完整顯示於區塊中。 注意:Flex只支援較新的瀏覽器。 HTML <div class="box"> <img class="imgcenter" src="http://p3.pstatp.com/origin/2ee200021b01de8df129"></img> </div> CSS...
CSS3 新單位寬度高度設定成vh vw – 80vh vs 80%
vh and vw vh:表示的是view height，也就是螢幕可視範圍高度的百分比 vw:表示的是view width，也就是螢幕可是範圍寬度的百分比 範例 比較80vh vs 80% css vh 設定視窗可見寬度高度%百分比，以下範例比較80vh與80%的不同之處。 See the Pen CSS 80vh vs 80% by saintjon (@saintjon) on...
CSS3 :target 選擇器做出onClick效果純CSS的lightbox
CSS3 :target 選擇器 定義和用法 URL 後面帶有錨名稱#(錨點)，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。 :target 選擇器可用於選取當前活動的目標元素。 :target CSS 代表一個唯一的元素（目標元件用）id匹配的URL的片段。 / *選擇一個ID與當前URL片段匹配的元素* / ：target { border ： 2px solid black ; } 例如，下面的URL有一個片段（用＃符號表示）指向一個名為section2：...
CSS文字垂直置中圖片文字對齊align-self: center
CSS圖片垂直至中與文字對齊指的是什麼意思??如下圖顯示，文字自動對齊圖片中間。 使用CSS排版類似以下圖片與文字版面時，通常會使用圖片向左浮動後，圖片就會因為脫離區塊，文字就會靠上圖片。這樣的情況文字是靠最上層區塊，邊緣開始排列下來，有時在設計上的需求並不理想。 此編排需求常應用在blog的側邊欄位上，因為內容標題的文字多少不一定，若在上方開始排列起文字，可能使得少的文字內容標題顯得空洞。最好的方式在設計的排版上讓文字與圖片垂直至中對齊，就可以解決以上問題，如下圖顯示。 如何能夠使文字與圖片垂直至中對齊 HTML...
CSS3 print 列印紙張大小分頁邊框大小方法
CSS3列印解決許多問題，如@media print可對列印頁面做不同的CSS顯示，設定邊框與頁輸出列印的紙張大小調用，都可以很客製化的去製作所需要的呈現的列印頁面，並且想讓某段落分到下一個頁面，也可用pag-break-after:always;強制分頁。 以下簡單的範例展示這些CSS3很棒的功能。 @page { margin: 1cm; /*print邊界*/ size:210mm 148mm; /*列印紙張大小*/ } .print{ page-break-after:always; /*print分頁面*/ }...
【純CSS 下拉式選單】：CSS多層級menu、CSS下拉式menu
Multi-Level Drop-Down Menu for CSS STYLE CSS CSS設定裡/---show---/註解中的內容為下拉選單主要呈現的效果。 (/---show---/之外的CSS樣式可自行更換。本人製作最簡單的格式給各位，為在教學使用上較易理解。) * { padding: 0; margin: 0; } #cssmenu { width: 720px; margin-right: auto; margin-left: auto; } /*-------view style----------*/...
【jQuery教學】jQuery切換不同CSS樣式style：切換class、切換樣式、轉換不同CSS
使用jQuery 控制CSS變換不同Class樣式，達到同一頁面切換成不同顯示效果。如以下使用圖文模式、圖片模式及文字模式，分別為三種class(.vw_01、.vw_02.、vw_03)做切換。 jQuery $(function(){ // 預設顯示第一個 Tab var _showTab = 0; $('ul.switch-button li').eq(_showTab).addClass('turnon'); $('ul.switch-button li').click(function() { var...
【CSS筆記】網頁設計寫CSS常碰到的問題
關閉Chrome 12px字體大小限制 網頁設計時檢查遊覽器相容，發現設定12px以下字體，在goole chrome遊覽器卻都無效，上網查了一下結果，原來chrome遊覽器的預設限制最小字體為12px。 查詢了一下解決方法，就如下面的簡單語法，將chrome字體大小的限制關閉。 *PC桌面版的Chrome27正式取消了-webkit-文字大小調整屬性的支持，實際上是修正了原有的錯誤。 -webkit-text-size-adjust:none; 令人頭痛的IE6 CSS解決方法 IE6...