CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ,雖然jQuery跟CSS選取器(selector)有很多相似之處,但還是有些差異,在CSS中要在重複元素中獲取一個元素是用偽類  :nth-child(2)

比如說我要指定定 Apple 的樣式為紅色:

我們可以這麼做,都可以達到相同效果:

同場加映

除了 :nth-child()還有其他用在取得元素的偽類,都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料:

CSS RWD 速查

Meta Viewport

 

CSS @media 參考裝置尺寸:

 

[懶人CSS陰影]還在用PS上陰影嗎?用CSS為你的圖片或色塊加一點變化!

在設計網頁時為了不要讓圖片或色塊死板板的,有的人會傻傻的先用Photoshop上陰影再以圖片的格式上傳,今天我們直接為圖片和色塊加上CSS吧。

CSS實在有許多好用之處,今天要來跟大家介紹小編做網站時常常使用的CSS box-shadow!

顏色從淺到深的陰影色塊

特殊陰影處理

HTML

CSS

 

 

 

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/

[CSS] 子容器無法撐開父容器 child overflows parent when parent width is 100 percent, parent div can not follow child width

css child overflows parent when parent width is 100 percent, parent div can not follow child width
CSS 當父容器寬為100% (無特殊設定即為100%),子容器寬度超出父容器,父容器無法被子容器撐大,而出現漏白現如下圖

解決方法在父容器中加上

範例檔案下載
download

Media Queries設定

@media screen and (max-width: 480px) {
       (智慧型手機專用樣式)
}

@media screen and (min-width: 481px) and (max-width: 768px) {
       (平板電腦專用樣式)
}

@media screen and (min-width: 769px) {
        (電腦專用樣式)
}

區段的順序雖然可以變換,但如果考量CSS的執行效率,則建議從小畫面往大畫面撰寫樣式,這種作法不只寫起來更有效率,也可以提升可讀性。

CSS ul li float center

CSS

ul{ 

text-align: center;
}
li{
margin: 0 10px;
display: inline;
}
HTML
<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
</ul>

CSS override 樣式無法覆蓋樣式的解決方案

CSS樣式無法覆蓋樣式的解決方案

<style>
.aaa h3{
color:#FF0000;
font-size:50px;
}
.bbb h3{
color:#0AFF00

}
</style>
<div class=”aaa”>
    <div class=”bbb”>
        <h3>test</h3>
    </div>
</div>

改用id
<style>
.aaa .bbb h3{
color:#FF0000;
font-size:50px;
}
#ccc h3{
color:#0AFF00
}
</style>
<div class=”aaa”>
    <div class=”bbb” id=”ccc”>
        <h3>test</h3>
    </div>
</div>

延伸閱讀
http://stackoverflow.com/questions/9956467/overriding-styles-without-important

CSS transition scale image 圖片縮放

今天很其怪用transition scale來改變容器大小沒問題
但對圖片就沒有效,上網找了了解決方法


img{
    /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); /* This is the scale for the normal size of the image.*/
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}


img:hover{
     /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}


延伸閱讀:https://drujoopress.wordpress.com/2014/01/31/zoom-effect-using-css3-transition-scale/