公告版位

目前分類：CSS (7)

瀏覽方式： 標題列表 簡短摘要

div:selection{
color:black;
background-color:yellow;
}
div:first_letter{
font-size:36px
}
div:first-line{
font-size:24px;
color:green;
}
https://youtu.be/Vafp5xr_bxk?t=1h24m


div:first-child::first_letter{
font-size:36px
}
div:first-child::first-line{
font-size:24px;
color:green;
}
https://youtu.be/Vafp5xr_bxk?t=1h25m

Talking about pseudo class & pseudo elements :: detail
https://youtu.be/Vafp5xr_bxk?t=1h29m26s

Talking about text sizing, useing by rem & em,
tell you what's different between this two s
https://youtu.be/Vafp5xr_bxk?t=1h33m

  • rem https://youtu.be/Vafp5xr_bxk?t=1h36m
    1. - Based on the font size of the html elemnt(16px by default)
    2. 依照最前面的標籤html的字級設定，用rem轉換
  • em  https://youtu.be/Vafp5xr_bxk?t=1h39m20s
    1. - Based on the front size of the current elemnet
    2. 依照此標籤的父標籤的字級設定，用em轉換
  • ex 
    1. - Height of the font's lowercase x-height
  • ch
    1. - Width of the font's 0 (zero)character

Module Overview 
https://youtu.be/Vafp5xr_bxk?t=1h48m

範例一
https://youtu.be/Vafp5xr_bxk?t=1h57m30s
body{
width:500px;/*若未寫 則是取決與視窗大小*/
}
#header{
width:100%;/*此處的寬度取決於body*/
height:70px;
background-color:#000;
z-index:10;
position:fixed;/*keep top of the page*/
}
#header li{
display:inline;/*僅用來next to each other*/
}

CSS Box Model
https://youtu.be/Vafp5xr_bxk?t=2h4m14s

下面這個屬性可以讓我們快速了解在扣除margin&padding後，
仍然剩下多少空間。
https://youtu.be/Vafp5xr_bxk?t=2h11m45s
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

Elements interacting
The float property
*doesn't apply to absolutely positioned elements
position:absoulted; <<< it's meaning this.
https://youtu.be/Vafp5xr_bxk?t=2h14m38s

  • Horizontally anchors an element
    將元素水平呈現
  • Allows other elements to flow around
    允許其他元素跟隨左右(例如:文繞圖)
  • Allows block elements to be positioned on the same row
    允許其他元素定位在同一列

overflow:auto; /*可以自動包覆超出的元件*/
text-align:center;/*不下在header li 而下在header 意指以父元素控制置中*/
vertical-align:top;/*必須下在需齊頭的元素上 這邊下載box 即是#modules-block的li的概念*/
margin-top:10px;/*此範例中一樣下在父元素*/

Module Overview
https://youtu.be/Vafp5xr_bxk?t=2h26m

  • Querying for screens and devices
  • Mobile-only content
  • Reflowing your page

Example Queries
https://youtu.be/Vafp5xr_bxk?t=2h39m26s

CSS Importing
https://youtu.be/Vafp5xr_bxk?t=2h42m15s
 

For Responsiv Web Design
Deciding and styling content
https://youtu.be/Vafp5xr_bxk?t=2h48m55s

  • Decide on your breaking points
  • Optimize your text(size and margins)
  • Adjust touch targets
  • Use relative sizing

範例中有提到以下使用方式
#header li:not(:first-child){
display:none; /*除了第一個標籤，其餘的全隱藏*/
}

範例中，將內文分成兩欄式呈現
artical{
width:75vm;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}

Transformations: Translate/ Scale/rotate/Skew with CSS
https://youtu.be/Vafp5xr_bxk?t=3h18m50s

範例
#resize-me{
height:100px;
width:100px;
background-color:blue;
transform:translate(400px, 400px) scale(2, 2);
}

範例 淡出淡入
https://youtu.be/Vafp5xr_bxk?t=3h32m50s
nav a{
text-decoration:none;
font-weight:bold;

transition-property:background-color;
transition-duration:5000ms;
transition-delay:10ms;
transition-timing-function:ease-out;
}
nav a:hover{
text-decoration:underline;
background-color:yellow;

transition-property:background-color;
transition-duration:5000ms;
transition-delay:10ms;
transition-timing-function:ease-in;
}

 

 

 

文章標籤
CSS selection first-letter first-line

vmaya 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top
body {
        background-color: #74BAE7;
  margin-left: 0px;
   margin-top: 0px;
    margin-right: 0px;
  margin-bottom: 0px;
 overflow-x:hidden;
    overflow-y:hidden;
   
}

只需在css中輸入綠色文字即可！

vmaya 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top

看看以下的圖示：

201圖層被Flash擋在後面.jpg

看吧！我的文字圖層出現在左邊，原因是因為我把電腦的螢幕解析度越設越大，

大於原本我預設網頁的1024*768 

因此，當我把圖層的css定位屬性設為 左356px 上355px

這時，圖層將會由左邊算起356px的位置，放置我的文字圖層

解決方法：

那麼，解決辦法是什麼呢？

將css定位屬性設定為

1.類型：絕對的

2.左356px 設定為%(百分比)  視你所要放的位置為準，而我在此設定為54%

就會變成如下圖所示囉：

301圖層照我意思放.jpg

vmaya 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top

在我的個人網站中，一直有這樣的問題，我都沒有去做處理，
他在IE看，是正常的，但是在Firefox我的圖層卻不見了，
原因是如下圖：

201圖層被Flash擋在後面.jpg

如上圖：我的文字圖層被擋在flash之後，而且無論我已經將圖層的Z軸數字調到多大(99)(數字越大越上層)也無效

這是因為在我的SWF參數中，少了這麼一欄

<param name="wmode" value="transparent" />

意思是將SWF檔的參數屬性設為透明。

方法是在

1.點swf檔

2.屬性面板-參數

3.按下左上角"+"按鈕

4.在參數輸入"wmode" 而值輸入"transparent"

這樣就可以囉！

---------------以下為不成功者，另外的修正辦法，若成功就不用看囉！--------

假如還是無法成功，就必須直接更改程式碼，以防他更新不全

請直接在程式碼面板中，Ctrl+F，直接搜尋"param name"

這時，你應該會發現有好幾個以下的格式

<param name="參數" value="值" />

那麼呢！請在這些屬性的最上面，手動貼入以下程式碼

<param name="wmode" value="transparent" />

如下圖所示：

202圖層被Flash擋在後面.jpg

 

存檔，上傳至ftp就可以囉！

vmaya 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top

1.打開Dreamweaver，設置網站根目錄

2.新增一個html檔，存檔

3.新增一個css檔(圖一、圖二)

(圖一)

(圖二)

4.將新增的css檔案存檔(圖三)

(圖三)

5.選取要使用的頁首背景圖片，並選擇重複方式，我在這裡將會選擇水平重複(圖四)

(圖四)

6.此時查看css.css檔案，裡面會新增第6.7行兩行的語法(圖五)
  (其中margin-left、margin-top、margin-right、margin-bottom則是代表頁面四個邊界的距離)
  請自行輸入，並將margin-top設定為你頁尾與頂端的距離，在這裡我設定600px

 

(圖五)

7.再新增一個新的css規則，選擇進階，在圈選工具的地方寫#footer，名字可自取，但是要加#號
   定義在我們之前新增的css檔中

(圖六)

8.同第8個步驟，但是此時選擇的是頁尾的圖片與重複方式(圖七)

(圖七)

9.此時css.css檔中，會呈現如下，多了#footer的描述

   (圖八)

10.還有最重要的一點，回到你的網頁檔，分別在兩個新增的css規則上按右鍵>套用

11.那麼便大功告成拉。

vmaya 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top

  


 

(繼續閱讀...)

vmaya 發表在 痞客邦 留言(1) 人氣()

  • 個人分類：CSS
▲top

自訂捲軸顏色
(Dreamweaver以下簡稱DR)
效果：可加強網站視覺統一。
方法： 一、建立外部連結CSS檔案
1.在DR開啟新的HTML頁面並儲存
2.開啟CSS樣式面板
3.新增CSS樣式規則(圖一)

4.開啟存檔的css檔案輸入以下資料

body {
scrollbar-face-color: #FCFCFC; /*（軸面顏色）
scrollbar-shadow-color: #E1E1E1;　/*（軸面右角邊顏色
scrollbar-highlight-color: #FCFCFC;　/*（軸面左角邊顏色）
scrollbar-3dlight-color:#FFFFFF; /*（左立體邊顏色）
scrollbar-darkshadow-color: #E5E6EE;/*（右立體邊顏色）
scrollbar-track-color: #FFFFFF;　/*（軸軌顏色）
scrollbar-arrow-color: #044587　/*（箭頭顏色） }

二、在想要變換捲軸顏色的網頁中輸入連結
<CSS檔名.css" rel="CSS檔名" type="CSS檔名/css">

p.s 若兩個網頁要有兩種不同色的視窗捲軸，就設兩個不同色彩的CSS檔，
網頁外部連結至想要的色彩CSS檔。
另外，若您的網頁裡有「文字區域」，它的捲軸也會變成所設的顏色。

備註： 如果什麼設好了，捲軸卻沒變色，
請看一下在DR裡的原始碼，最上面有沒有
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">？
如果有的話，就把那串網址刪掉，變成
再附註： 可以把body換成html，就不用刪原始碼了

以上資訊參考自筆記本 



以下範例為版主自行模仿viva-graphic網站

body { scrollbar-face-color: #008080;
scrollbar-shadow-color: #008080;
scrollbar-highlight-color: #00BDBD;
scrollbar-3dlight-color:#006A6A;
scrollbar-darkshadow-color: #006A6A;
scrollbar-track-color: #cccccc;
scrollbar-arrow-color: #ffffff }

 

其他相關自訂捲軸Scroll bar的相關支援

I E 濾鏡之內置框架捲軸透視
http://www.hsiu28.net/style/article_ie.php?id=8

捲軸顏色產生器IE5.5+
http://www.khjh.kh.edu.tw/mewawa/dw4/scroll-color.htm

捲軸相關設定解釋與語法取用
http://www.cyber-junkie.com/tools/scrollbargen/index.php


(繼續閱讀...)

vmaya 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top