Archive

文章標籤 ‘css’

CSS 特效 – 表格透明,內容不透明

2008年12月31日 尚無評論

CSS有個透明化的參數，調整後可以讓你所指定的物件可以淡化，但因為淡化了，所以該物件裡的文字或圖片也都淡掉了，上網找了一下，有人利用DIV 設定position:absolute; 就可以讓內容不隨著指定的物件淡化掉，不過因為這個參數是變成是以絕對路徑，所以你的內容會跑掉，因此，改調整為 position:relative;就行啦!!

style type=”text/css”>
/*—DW8 www.DW8.ORG—*/
<!–
body {
background-color: #0066FF;
}
#div1
{
position:relative;
/*—這裡定義層不隨表格透明而透明
這樣就可以使表格透明的時候表格裡的
內容和圖片不跟著透明了—*/
}
table
{
background-color:#FFFFFF;
filter:alpha(opacity=50,Style=0);
/*—定義透明度,和淡化的風格
opacity為透明度，值越大透明度越小
style是透明淡化的風格
0 普通透明
1 從左到右漸變淡化
2 圓形像兩邊淡化
3 星狀漸變淡化
默認不設置style參數為0
這個效果同樣可以用再圖片上
—*/
width:300;
height:300;
/*—這裡一定要定義寬度和高度—*/
}
–>
</style>
<body>
<table bgcolor=”#0000FF” style=”display:” id=”tab1″>
<tr>
<td>
<div id=”div1″>
<p>DIV層裡的內容</p>
<p><img src=”http://www.baidu.com/img/logo.gif” width=”174″ height=”59″ /></p>
</div>
</td>
</tr>
</table>
</body>

資料來源:http://www.xker.com/page/e2008/0923/61725.html

Categories: WebDesign Tags:

網頁圖片比例縮小(CSS,javascript)

2008年12月24日 2 則評論

目前在開發一些網路應用的程式，都要提供上傳圖片功能，
但教育使用者上傳前縮圖至理想的尺寸及限制容量大小實在是一件很不容易的事

所以與其要教育使用者，還是自己變通一下吧
限制容量就不在本文的範圍啦，直接跳重點如何在顯示時等比例縮小圖片

以HTML來說，如果限制的圖的長寬，當圖片大於此長寬而且又非和限制的等比例時就會造成圖片變形
此時，我們透過css或是javascript進行等比例縮小，以CSS的作法，如下設定

<style type=”text/css” >
.album-pic img {
vertical-align: middle;
max-width:100px;   /* FF IE7 */
max-height:100px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */
_height:expression(this.height > 100 ? 100 : auto); /* IE6 */
}
</style>

這個設定是支援CSS3的，目前慣用的瀏覽器都有支援，但IE6及IE7和Firefox的寫法不一樣，為求呈現效果一致所以都寫上去求平安囉!!
使用時只要加上這個css 就可以啦，使用方式如下:

<div class=”album-pic“>
  <img
src=”pic/demo.jpg” />
</div>

再來介紹用Javascript該如何調整，首頁先說明縮圖的function:

<script language=”javascript”>
var flag=false; 
function MyImage(Img){ 
   var image=new Image(); 
   image.src=Img.src; 
   width=236;//預先設置的所期望的寬的值
   height=170;//預先設置的所期望的高的值
   if(image.width>width||image.height>height){//現有圖片只有寬或高超了預設值就進行js控制
     w=image.width/width;
     h=image.height/height;
       if(w>h){//比值比較大==>寬比高大
           Img.width=width; //定下寬度為width的寬度
           Img.height=image.height/w; //以下為計算高度
       }else{//高比寬大
           Img.height=height; //定下寬度為height高度
           Img.width=image.width/h; //以下為計算高度
       }
   }
} 
</script>

使用時只要照下面用法即可


<img src='/demo.jpg'
onload='javascript:MyImage(this);' border='0'>

雖然都寫上，但建議使用時還是透過css會好一點，因為程式碼精簡外，效能也是css的比較好啦!!

參考資料:
http://www.phpip.com/design/2008/0905/css_10682.html
http://bbs.d8sun.com.cn/thread-1455-1-10.html

Categories: WebDesign Tags: , ,

HTML TEXT FIELD文字框中如何讓字靠右顯示及輸入

2008年5月5日 尚無評論
因為有需要讓輸入的文字靠右顯示及輸入，所以查了一下，整理如下:

<input type=text id=GPSL size=10 value=”-789.123″ name=”text2″  style=”direction:rtl”>

<input   type=text   value=”aaaa”   size=50     dir=”rtl”>

<input   type=text   value=”aaaa”   size=50   style=”writing-mode:tb-rl;text-align:right”>  

目前我用第一個就很正常啦，所以其它的就沒測試是否適用

Categories: WebDesign Tags: ,

CSS: FORM不換行 寫法

2008年3月6日 尚無評論

Html 寫到 FORM 會在呈現時造成空隔多空一行 等等的問題..
以往都是將 Form 塞到 Table 跟 tr 間 的這些方法來解決..
css 有簡易的解法~~~ 照下面的一設就搞定了~

form{margin:0px; display:inline}

margin: 上下左右間隔都設為 0px

display: inline 之後顯示的秀在同一行.

<h1> 想不換行也是同樣解法. </h1> , 只要<h1 style=”display: inline;”> 就可以了.

Categories: WebDesign Tags: ,
分頁: 上一頁 1 2