冷靜: Css

顯示具有 Css 標籤的文章。顯示所有文章

2013年12月24日星期二

子選擇器 ( 大於符號 )

常看到網路的分享文都有人在選擇器裡寫個『 >』，查了一下，此符號是指：選擇老爸的所有兒子，但不包含孫子 (也不包含老爸自已)


<html>
<head>
<style type="text/css">
.div1 > p {
 color: yellow;
}
.div2 p {
 color: blue;
}
p[title] {
 color: red;
}
</style>
</head>

<body>

<div class="div1">
    <p>test
    </p>
    <span>
         <p>test
         </p>
    </span>
</div>
<div class="div2">
    <p>test
    </p>
    <p>test3
    </p>
</div>

<p title="t1">有title屬性的段落標籤</p>
<p>無title屬性的段落標籤</p>
</body>
</html>

ref : Here

2013年12月10日星期二

table 文字放置上、中、下

google時，table內文字比較多都是寫由『valign』就可以控制text上、中、下
但自已試了半天都不行，
又google一下，發現用『vertical-align』就行了

ref : Here (Japan)

2013年12月8日星期日

ul li 置中


CSS:
    <style> 
    ul 
    {
        width:100%;
        background:red;
        height:20px;
        text-align:center;
    }
    li 
    {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
    }
    </style>

HTML:
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>

ref: Here

css 運算

(還沒試過)

//IE9以上才支援

width: calc(100% - 200px - 2em) //間距的距離，注意要空格

畫格子基本常識

畫div對初學的我來說還是有一定的難度阿。。。

2013年12月24日 星期二