自從css可以設定外框圓角border-radius之後,網頁上物件又可以有更多的變化,這一篇要介紹在多層物件的最外層設定圓角後,怎麼讓內層的物件都隨著有圓角。
閱讀全文 css讓內層圖片符合外框圓角 | Forcing child to obey parent's border-radius in CSS
標籤彙整: html5
css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)
CSS需要寫四個邊向數位的屬性常用的有三個,padding (內距)、margin (外距)、border (邊框),寫四邊向數值的時候可以用不同的方式來寫,可以更快更好~
屬性加方向:
最簡單的寫法就是在這三個屬性的後面加上方向就可以,這是用在單純想指定某一邊向數值的時候。
padding-top: 5px; (上內距)
padding-bottom: 5px; (下內距)
padding-left: 5px; (左內距)
padding-right: 5px; (右內距)
margin-top: 5px; (上外距)
margin-bottom: 5px; (下外距)
margin-left: 5px; (左外距)
margin-right: 5px; (右外距)
border-top: 5px; (上邊框)
border-bottom: 5px; (下邊框)
border-left: 5px; (左邊框)
border-right: 5px; (右邊框)
閱讀全文 css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)
去除網頁預設邊框
瀏覽器預設網頁會保留邊框,大概是4px左右,但在設計滿版網頁的時候卻常常會造成視覺不連續,其實只要在css設定一下就可以了~
閱讀全文 去除網頁預設邊框
RWD網頁切版(一){HTML5網頁框架}
CSS 選擇器、選取器(CSS Selector)
css的選取器越來越複雜,這篇來介紹一下各種選取器
- Class selectors(類別選擇器)
- ID selectors(ID選取器)
- Tag selectors(標籤選取器)
- Universal selector(通用選取器)
- Attribute selectors(屬性選取器)
- Descendant combinator(後代選取器)
- Child combinator(子選取器)
- Adjacent sibling combinator(同層相鄰選取器)
- General sibling combinator(同層全部選取器)
- Pseudo-classes(偽類別選取器)
- Pseudo-elements(偽元素選取器)
- Groups of selectors(群組選取器)
1~5是單一選取器,6~12是組合選取器。
閱讀全文 CSS 選擇器、選取器(CSS Selector)
css display:table left、right div不再長短腳 (pure CSS make float div same height)
在做float div的時候常常因為左右邊的內容不一樣多造成div不能一樣高,這篇提供一個解決方案,只要利用display屬性就可以達成左右一樣就的效果。
<preview>
閱讀全文 css display:table left、right div不再長短腳 (pure CSS make float div same height)
jQuery go to top 按鈕 (go to top button)
<html>
<div id=”top”>TOP</div>
<css>
#top{
position: fixed;
right: 50px;
bottom: 20px;
}
<script>
$(‘#top’).click(function () {
$(‘html,body’).animate({
‘scrollTop’ : ‘0px’
}, 1000);
});
CSS ol/ul li 建立章節目錄 (css ol/ul li decoration)
css li也可以製作有階層的章節目錄
閱讀全文 CSS ol/ul li 建立章節目錄 (css ol/ul li decoration)
CSS ol/ul li 遞減 (css ol/ul li reversed)
最近在做網頁時突然需要遞減排序編號的功能,在html5的架構下<ol>可以直接加reversed屬性,但如果是用<ul>標籤的話,以下也提供一個解決方案。
css方法
ul { list-style-type: none; counter-reset: item 142; /*counter-reset: item(自定變數) 142(項目總數);*/ } ul > li { counter-increment: item -1; } ul > li:before { content: counter(item); }
html5方法
<ol reversed> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol>
CSS 正方形 寬 等於 高 height equals width
CSS製作正方形只要使用:before選取器就可以了
html
<div class="box"> <div class="content">內容文字Content Text</div> </div>