XiaoLian

發表文章

目前顯示的是有「CSS」標籤的文章

【CSS】Google Map崁入響應式網頁(RWD)

- 10月 12, 2020

為了要適應不同頁面大小及瀏覽裝置設備，需利用CSS來控制。 iframe位置連結可透過Google Map產生，不在本篇討論之。本篇iframe位置連結因涉及隱私，故假資料填入。部分HTML（參考）︰ <div class=" iframe-rwd "> <iframe src="https://www.google.com/maps/embed?pb=xxxxxxxxx888888.777777" width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> </div> CSS（參考）︰ <style type="text/css"> /* google map for RWD */ .iframe-rwd { position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden; } .iframe-rwd iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> 大螢幕執行畫面︰小螢幕執行畫面︰

閱讀完整內容

【CSS】頁頭頁尾不隨頁面內容之捲動

- 5月 27, 2015

近來透過手機上網普及化，設計好的專屬手機網站，顯得重要許多，一方面受限於手機螢幕大小，版頭版尾擺設格外小心，分享實際應用情形。部分HTML（參考）︰  <div id=" fixed-header-slide "> <div id=" fixed-header-wrap "> < header data-role="header" style="background: #FFFFFF;border: none;" >  <div><img src="images/logo_banner.jpg" border="0" class="photo"> <a href="#mypanel" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a> </div> </header> </div> </div>   <div id=" fixed-footer-wrap "> <footer data-role="footer">  <div class=" footer_mobile " id="footer"> … 省略 … </div> </footer> </div>  CSS（參考）︰ <style ty...

閱讀完整內容

【CSS】美化畫面TOOL—Bootstrap前台開發工具包

- 6月 20, 2013

Bootstrap前台開發工具包，是一個簡單易上手的工具，對於程式設計師來說是一大福音，透過簡單的設定引用，能輕輕鬆鬆完成一個不錯的畫面，此工具功能強大，有CSS來美化畫面外，也整合了Jquery、JavaScript API 應用（若有需要此相關功能，需引用JS檔案，詳見官網），本篇單純簡單介紹如何使用CSS，更多CSS應用，詳見官網CSS介紹。使用Bootstrap前台開發工具包前，需要引用Bootstrap CSS檔案。 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> HTML 頁面(參考)︰ <body style="margin-left:30px">  <h1>標題 Hello, world!</h1>  <strong>粗體 rendered as bold text</strong> <br/><br/>  <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>...

閱讀完整內容

【CSS】固定左邊欄，右邊可捲動

- 4月 25, 2013

基於工作上關係，需將固定某些欄資訊，並可捲動觀看右邊欄位內的資料。此做法有很多種方式，看過大部分做法都使用Jquery元件，好處是簡單易上手。若不使用任何元件是否可以達到？答案是可以的。觀念作法：左邊一個Table，右邊一個Table，如要變動右邊，需要將Div包覆右邊Table（DIV用意產生捲軸之用途，可詳 My Blog:區塊內捲軸呈現），最後被一個大Table包覆。示意圖：部分HTML（參考）︰  <table width=" 400 " border='0' cellpadding='1' cellspacing='0' bordercolor='#000000' align='center' style='table-layout:fixed' > <tr> <td width=" 80 ">  <table width="80" border='1' cellpadding='1' cellspacing='0' bordercolor='#000000' class='style3'> <tr align='center' valign='middle' height='25'> <td width="80"><div align="center">姓名月份</div></td> </tr> … 省略 … </table>  </td> <td width=" 320 "> <!--Right Tab...

閱讀完整內容

【CSS】區塊內捲軸呈現

- 4月 10, 2013

部分HTML（參考）︰ <div class=" DIV22 " > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 省略之... </div> CSS（參考）︰ <style type="text/css"> .DIV22 { scrollbar-DarkShadow-Color:#9FB7D7; scrollbar-Track-Color:#F7F7F7; scrollbar-Face-Color:#C7CFFF; scrollbar-Shadow-Color:#FFFFFF; scrollbar-Highlight-Color:#FFFFFF; scrollbar-3dLight-Color:#C7CFF7; scrollbar-Arrow-Color:#4F5F87; //以上是捲軸美化相關設定 overflow-y: auto; //x捲軸的顯示【註1】 overflow-x: auto; //y捲軸的顯示【註1】 HEIGHT:580px; margin-top:15px; margin-left:0px; Color:#000000; } </style> 執行畫面︰【註1】︰捲軸顯示有四種狀態 visible(預設) ︰內容完全顯示不嵌入顯示區域。 auto ︰內容嵌入顯示區域，並視情況顯示水平與垂直捲軸。 scroll ︰內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動。 hidden ︰內容嵌入顯示區域，捲軸不會出現。

閱讀完整內容

【CSS】不同瀏覽器來吃不同CSS定義

- 4月 01, 2013

CSS最令人頭痛的就是瀏覽器校正問題，因為每個瀏覽器對CSS的解釋都不太一樣，尤其是IE瀏覽器最為嚴重，每一個版本支援度有些不同，至於Firfox及Chrome算是比較照規矩來，處理上比較簡單。拜Google所賜，擷取兩篇文並整理引用之。其目的最主要讓不同瀏覽器對CSS字符有不同區別並分別定義之。轉貼引用︰ ☆區別IE和Firefox 【辨識符號】：「 \9 」【範例練習】： #tip { background:blue; /*Firefox 背景變藍色*/ background:red \9 ; /*IE6、IE7、IE8背景變紅色*/ } 【說明】：因為IE瀏覽器看得懂「\9」，但是非IE的瀏覽器一律看不懂，因此就可以用這個語法來區分IE和Firefox(非IE瀏覽器，像是Opera、Google Chrome、Safari等)，因此以上CSS範例中，非IE瀏覽器是顯示藍色背景，IE系列瀏覽器是顯示紅色背景。 ========================================================================================== ☆區別IE6、IE7、IE8、Firefox 【辨識符號】：「 \9 」、「 * 」、「 _ 」【範例練習】： #tip { background:blue; /*Firefox 背景變藍色*/ background:red \9 ; /*IE8 背景變紅色*/ * background:black; /*IE7 背景變黑色*/ _ background:orange; /*IE6 背景變橘色*/ } 【說明】：因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。 ===========================================================================...

閱讀完整內容

【CSS】PNG在IE6變透明的方法

- 4月 01, 2013

雖然目前IE6人數使用上比例減少，為了顧及少數族群及追求完美，針對PNG在IE6上底色無法變透明之問題，網路上解決方式很多種，本篇只介紹其中一種（PNG為底圖）。語法︰ background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='xxxx.png', sizingMethod='crop'); ※sizingMethod參數 scale 值的意思是依你設div寬高大小，讓底圖延展隨寬高範圍延展。 image 值的意思是照圖片原本尺寸顯示，無論你div值設大設小，都依圖片大小顯示。 crop 是不管你圖大圖小，都僅在div框架範圍裡，有多少就露多少，不比例縮放。範例參考： #fixed-ad { /*標準版本*/ background-image:url(/img/back1.png); width:50px; height:50px; position:fixed; } *html #fixed-ad { /* for IE 6.0以前版本（*html->IE6） */ background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/back1.png', sizingMethod='crop'); width:50px; height:50px; position:fixed; }

閱讀完整內容

【CSS】判斷瀏覽器的不同加載不同CSS

- 3月 29, 2013

瀏覽器的相容性問題，經常困擾著網頁設計師，而不同的瀏覽器對於CSS支援也不同，可配合條件註解的方式，去判斷瀏覽器，以讀取適合的CSS檔案。語法︰      //瀏覽器不是 IE <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <!-- ...

閱讀完整內容

【CSS】圖片不隨著頁面捲動

- 2月 27, 2013

由於工作上的需要，而在網路上到處爬文，以往這樣的效果是使用Javascript呈現的，不但程式碼攏長而且有時還會卡卡的，或造成畫面閃爍。現在CSS愈來愈強大及瀏覽器版本支援性佳，只要幾行簡單的 CSS 語法便能製作出同樣的效果。而這個 CSS 語法的關鍵便是 position:fixed。部分HTML : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> '不能省略，效果會跑不出來 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>經費總表</title> .....省略之..... <style type="text/css"> /* 右邊圖片按鈕,不隨著捲軸而變動*/ #fixed-ad { /* 回上一頁 */ background-image:url(/img/back1.png); width:50px; height:50px; position:fixed; top:200px; right:0px; _position: absolute; /* position fixed for IE6 */ _top:expression(documentElement.scrollTop+200); _right:expression(documentElement.scrollRight+0); z-index:3; } #fixed-ad2 { /* 回主頁 */ background-image:url(/img/back_main.png); width:50px; height:50px; position:fixed; ...

閱讀完整內容

【CSS】DIV被Flash蓋住

- 4月 23, 2012

這是很早以前就遇過的問題，只不過每次遇到就會忘了是要改啥麼地方，只要加入wmode屬性為Transparent即可。若沒加的話， wmode屬性預設為Window 。先瞭解一下，wmode屬性值約有哪些？ Window：速度快、有效率、無法使用z-index，也沒有辦法混用於DHTML圖層當中。 Opaque：速度介於Window與Transparent之間，可以控制z-index，但是背景沒有辦法變透明的，也就是說，任何內容都會被放在swf下面。 Transparent：速度最慢，可以控制z-index且背景可以變透明。引述Adobe官網：範例參考： <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="580" height="450"> <param name="movie" value="swf/s22.swf" /> <param name="quality" value="high" /> <param name="wmode" value="Transparent" /> <----就是要加上這一段 <embed src="swf/s22.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="580" height="450"></embed...

閱讀完整內容

【CSS】光棒效果

- 4月 17, 2012

想要在Table中製造出光棒效果，就要在<TR>內 OnMouseOver 及 onMouseout 設定屬性即可。語法(參考) : <tr OnMouseOver ="this.style.background='FFE789'" onMouseout ="this.style.background='FFFFFF'"> 畫面 : PS : 若要字體有變化(加粗)，滑過去變粗，移開變回來，則需要加下面語法: OnMouseOver ="this.style.fontWeight='bolder'" onMouseout ="this.style.fontWeight=''"

閱讀完整內容

【CSS】標題過長出現點點點

- 6月 09, 2011

通常用於表格內的標題,為了美觀及整齊性又不想換到下一行時格式: <div style='width: 寬度 px;text-overflow: ellipsis;overflow: hidden;' ><nobr> 完整內容 </nobr></div> Ex: <div style='width:180px;text-overflow: ellipsis;overflow: hidden;' ><nobr>（Esprit）香港商思捷有限公司台灣分公司ESPRIT</nobr></div> （Esprit）香港商思捷有限公司台灣分公司... ( 端看字體大小而定 )

閱讀完整內容

【CSS】呈現表格斜線

- 9月 30, 2010

HTML 內定義 : 做為對角線的內容 <div class="out"> <b>科目</b> <em>姓名</em> </div> CSS 內定義 .out{ border-top:40px #D6D3D6 solid; /*上邊框寬度等於表格第一行行高*/ width:0px; /*讓容器寬度為0*/ height:0px; /*讓容器高度為0*/ border-left:80px #BDBABD solid; /*左邊框寬度等於表格第一行第一格寬度*/ position:relative; /*讓裡面的兩個子容器絕對定位*/ } b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;} em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;} 完整範例: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用CSS呈現表格斜線</title> <style type="text/css"> *{padding:0;margin:0;} table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;} th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;} .t1_header{background:#D6D3D6;font-weight:bold;} /*表格斜線*/ .out{ border-top:4...

閱讀完整內容