claire克萊兒的生活記事

一直練習，就會達成自己想要的目標 嗨，我是克萊兒claire。 兩年多前，參加了六角的切版直播班，順利地中斷五年的職涯又銜接回來。我選了一個最適合我發展職涯與家庭平衡的工作，在職場上一開始也是戰戰兢兢，過分焦慮，幸好遇到了很棒的前輩工程師帶領我觀念，給予我指導，雖然可以順利完成靜態的切板與網頁設計。但在程式方面，只能套用既有別人寫好的東西，修改固定的值，卻無法在更深入，也不會串接api，圖表也是只能修改靜態的值，到動態串接資料就會死光死透(◞‸◟)，需要其他人協助，雖然也可以就這樣過去，但我想給自己一次認真跟著學習的機會，以前也買過影音課，但效率不彰，熟的永遠是變數的宣告與賦值^^"...。 之前影音課的隨手筆記，寫了很多，但還是不懂如何熟練運用 今年JS直播班招生時，很動心但也怕自己無法完成，除了工作還有家庭小孩需要一起照料，所幸先生十分支持，願意多多協助家務，就閉眼刷了信用卡分三期($3130)，讓信用卡帳單順便一起提醒我，知識的寶貴ξ( ✿＞◡❛)，在「普通人的財富自由之道」裡面提到-畢竟，付了錢才肯投注心力是人之常情。 這次參加了Javascript直播班，獲益良多。雖然課前就已釋出影片讓我預習，但工作跟家庭的干擾滿多的，所以我並沒有照著順序預習，而是直接使用2022的課程教學開兩倍速做預習，聽不懂也沒關係，大概把關鍵字記起來，等到週五上正式課在認真聽，這樣通常可以有不錯的效果。課程一開始也有做專題與專題教練的服務，我也很想參加，但認真分析一下，覺得我應該是沒時間可以完成，會變成拖垮專題的豬隊友，所以沒有報名(〒︿〒)。如果是全職學習，我就會參與專題，感覺又能學到更多！ 來說說我這九週做了甚麼事呢？我有空的時間大約是每天晚上9-11點(有時候太累會直接睡著，週末才會補進度)，白天在公司的中午休息時間，假日由於家庭需求，我大概都只有晚上8點過後才能花時間看自己的作業。 我有做的事情是： 上每週五的線上直播課。 做每日任務作業。 做每週主線任務作業。 做小組討論作業。 原本一開始時間比較多，每週刷題任務(只做到第三週...)與codewar(前兩週有做...)都會做，但第四週後作業量暴增，權衡之下，我以自己最重要能做的主線任務跟每日作業為主。每週主線作業盡量跟上進度，不要落後一週以上，一旦落後要再追趕就會更辛苦。我作業的完成度，前面都是LV3，只有在最...

先把解法code貼上 有機會再來寫這個案例 .prodctNameBox  { font-size :  15px ; font-weight :  bolder ; width :  200px ; height :  80px ; background-color :  #FFF ; display :  table-cell ; vertical-align :  middle ; text-align :  center    }

最近用到的新方法，寫上來筆記一下^^" 可參考 http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/ 有空我再把步驟補完~

今早來，同事跟我回報系統有ie7的錯誤， 正常的狀態下，畫面是長這個樣子。 結果到ie7版本變成右邊有一個鼻屎區域=口=a(下圖黃色區塊) ie瀏覽器真的很令人崩潰阿!!每次都在處理不同ie的問題Orz 本來以為是icon的寬度設定，但我寫了寬度也沒用。 所以就開始試誤啦... 因為這個區域有使用TK元件，我就去測測看外國朋友寫的css啦~突然，有個屬性當我關閉的時候，鼻屎就不會出現了= =+。這個屬性是zoom:normal。 查詢了 css zoom屬性，國外的css-trick回應如下： The  zoom  property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn't recommended for production sites. 翻譯蒟蒻如下： CSS中的zoom屬性可以讓​​你擴展你的內容。這是非標準的，最初只實施在Internet Explorer中。雖然其他幾個瀏覽器現在支援zoom，但這對網站不是一個建議的做法。 所以很明顯，這屬性就是給ie的呀!再google一下 幾篇中文文章， Zoom應用 - 解決IE排版問題 CSS中不为人知Zoom属性的使用介绍(IE私有属性) 其中有一段寫到： 如果你用的是Fire Fox / Chrome，這兩款出現的畫面都是一樣的，可是在IE的環境下，沒有附加ZOOM:1的卻會出現崩壞的畫面。這是所謂「hasLayout」的屬性，如果一個物件有設置長闊的時候，那件物件就會擁有「hasLayout」的屬性。 然而我們偶爾會開一個div只是為了裝拑background，同時為了遷就內容的伸延性，該div也不會有長闊的設定。最為方便的解決方法就是在該div上增加zoom:1。 所以我使用 zoom:1的屬性給ie7使用，在ie7瀏覽就發現鼻屎不見了^0^~耶~~~~

這次的專案遇到一個情況， 測試人員輸入不斷行的英文字母，在ie7下會導致表格破圖跑版，如下圖。 後來搜尋解決方式，使用css強制斷行屬性。( 參考連結 ) 強制斷行 　　word-break: break-all; 　　word-wrap: break-word; 上方圖片的問題狀況就解決了!如下圖。

本次製作的專案，使用了國外元件，但是在ie7下的日曆元件無法點擊。 詢問工程師此區塊的語法結構，發現是使用"障眼法"。 在css中要加入 z-index 這屬性，將數字設大，才有作用。 z-index數字越小，圖層順序越後面。反之，數字越大，圖層順序越前面。 所以z-index:1;與z-index:99;  兩者比較下，是後者的排序在上方。 可是我初次寫，一直都沒反應，後來搜尋文章找到此屬性要搭配position( 參考連結 )。 後來在該css屬性加入position後，ie7的元件就可以被點擊了。 給各位參考。

本次做專案，拿了之前的樣式來修改。 左邊區塊因為布局寫法，不能跟著視窗延伸高度 後來用下面的障眼法@@a寫在body的class裡面 解決方式如下列網址： http://www.chinahtml.com/1006/css-127614779719010.html 有點算用障眼法把div背景寫在body裡面。 測試成功。

這個問題是因為這次專案使用DW預設的spry選單， 在Chrome/IE9/IE8都是OK~可是IE7跟Firefox卻有超出一些區塊， 用偵錯找到原因~主要是預設的padding上下的高度太高~ 每個瀏覽器解讀不一，導致FF超出一些區塊。 但是IE7的問題只有最後一個超出一些， 只好用IE hack寫一個IE7專用的padding吧!

在table的th、td設了寬度，但內容字數過多還是會跑版，從網路上看到的方法如下，順利解決，筆記一下。 解決方式 在table的style下:     table-layout:fixed;     word-break:break-all;     word-wrap:break-word; 在td style下: word-wrap:break-word; 另一解: display : inline-block

這個CSS問題起因於，客戶想要字體變大，但為了不要動到大量CSS版面設計，PM建議她可利用瀏覽器來放大，但是我們發現IE9可放大字型 在chrome卻不能!!!??這令我十分納悶~明明chrome是很強的瀏覽器阿!為啥會有錯呢??? 上網找了好多關鍵字都找不到我要的解答~就在剛才我終於看到原因了 http://xxxxxly.in/posts/text-size-adjust/ 後來問了原本寫這個CSS的工程師，她告訴我因為原本排版字有11pt會出錯，解決方法是設定 「-webkit-text-size-adjust: none;」可參考下列網址說明。 http://franks543.blogspot.tw/2011/03/webkit-text-size-adjust-none.html 但這個屬性「-webkit-text-size-adjust: none;」會導致chrome不能放大字體，所以若要可以放大字體就要設為「-webkit-text-size-adjust: 100%;」~但是11pt字型的問題我就要再看看會不會出錯了Orz~css真是博大精深。

剛在實做網頁，因要利用webconfig做不同專案的CSS切換，所以必須把網頁圖片寫在CSS裡面，當我整合到CSS裡面時，發現某些h1圖片在ie7/ie8不會顯示，而在ie9與chrome是順利出圖的???所以開始找問題，在CSS檔案裡面發現了癥結點如下： background:url(../images/CA/upLoad/AAA.png) no-repeat 10px top; background:url(../images/CA/upLoad/AAA.png)no-repeat 10px top; 兩者看起來沒有差異，但卻導致7/8不能顯示圖片，原因在於no-repeat與url網址中間要有空白分隔.......Orz 只能說~ie阿ie 我搞不懂你~

在上次做一個專案遇到了CSS Footer置底的問題，我使用position:fixed將Footer區塊置底，但中間區塊會被Footer擋到，所以mika告訴我這個方式。 後來我有try到剛好網站可使用~不過CSS布局我還是很弱Orz多看多學吧 http://www.cssstickyfooter.com/

常常在網路上有一些免費的資源可應用，但下載了卻不知道怎麼用~Orz 所以整理了一些常用的插件檔案格式做紀錄。 asl檔(樣式檔) 下載的檔案雙擊兩下。回到PS裡>視窗>樣式 。在樣式裡面可看到你剛下載的asl檔。這個大多用於網頁按鈕的設計。 abr檔(筆刷檔)。在PS>選擇筆刷工具>在尺寸大小的右方有小箭頭點一下>載入筆刷>選擇你剛下載的檔案即可。 8bf檔(濾鏡檔)

      中午的時候，公司的總監對我們說了一些話。是教導也是分享。他說：在20年前，他曾經在一個地方負責技術，那間公司是負責產生飲料的鐵罐，因為價格比鄰國低，所以生意很好。其中有一個是全球知名的飲料罐企業代理商，找上公司來，說希望可以跟他們合作，並要求希望可以六月出貨，當時公司的經理說：盡量趕給你。但不能保證六月出貨的時間，因為這樣的時間太趕了！簽完約後，到了六月，代理商的老闆很生氣貨品不能如期交貨。打電話來劈頭找公司負責人就開罵了，最後負責人說：我不接你的單子了！ 總監說：當初經理只是好意配合客戶趕，但是機器的生產速度就是這麼快，而客戶一直以為就是六月的交期。雙方產生認知上的錯誤，導致客戶不信任公司、同樣的也會使公司的聲譽受損。 所以當我們在接觸客戶端時，該需要多少工時就必須跟客戶明確告知。而不是先答應了，最後卻不能在那個時間交出成品。這考驗的專案經理的應對與變通能力。 這席話讓我又小小成長一些。

      自從結束了大學生涯後，對於工作一直是不確定感，不知道自己可以做什麼?設計有很多方向，平面設計、包裝設計、商業設計、遊戲設計、動畫設計，很多路，但卻不知道適合哪一條路?     後來遇到了聖博學長，教導我們如何製作網頁、PHP、MySQL，很多實用的技巧，也因緣際會地到了他所開立的公司去上班，但是後來由於公司的政策，並無法提供我安穩的生活，選擇了離開，來到蔡先生所在的城市-台北。開始新的工作。     在詮力科技裡，一開始是戰戰兢兢的。所以覺得很有壓力，後來，敞開心胸與同事相處，發現都是一群很好相處的人呢!有遠瞻的總監、隨和好相處的副總、活潑開朗的Lisa、還有其他歡樂的工程師:D在這裡，可以很自由發揮，薪資福利都比我以前的任何公司好很多，所以我很滿足。但，這也是一個危機，「生於憂患而死於安樂也」。回顧我這半年所學到的東西，CSS技巧更精進、Visual Studio的操作(簽入、簽出)、Telerik的應用。 必須讓自己不停地往前，才能立足於資訊洪流之中。 後半年的計畫： 1.jQuery應用 2.版型精進 3.icon設計 4.大圖設計 5.攝影 6.減重(私人) 加油讓自己成為一個更好的設計師:) 。