隨身筆記本｜痞客邦

Jan 13 Sat 2007 23:39
製作排列整齊的圖檔展示，且用照片框

★<head>與</head>之間★

<style type="text/css">

</style>

★<body>之間★

<div class="pic">
<p><img src="01.jpg" border="0" alt="" /></p>
<p><img src="02.jpg" border="0" alt="" /></p>
<p><img src="03.jpg" border="0" alt="" /></p>
<p><img src="04.jpg" border="0" alt="" /></p>
<p><img src="05.jpg" border="0" alt="" /></p>
<p><img src="06.jpg" border="0" alt="" /></p>
<p><img src="07.jpg" border="0" alt="" /></p>
<p><img src="08.jpg" border="0" alt="" /></p>
</div>

第3行 : 圖片區塊寬度,自行調整可改變圖片排列的行數

第4.5行 :
        float: left; 圖片橫向排列
        padding: 4px; 圖片邊框空白大小
        border: 1px solid #ddd; 圖片框線大小與色彩
        margin: 5px; 圖片之間的距離

摘自於：http://www.hsiu28.net/style/article_detail.php?id=21

(繼續閱讀...)

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

個人分類：CSS

▲top

Jan 13 Sat 2007 23:35
利用隱藏層製作說明效果

這是滑鼠跑到flash teaching那個按鈕時，會出現下面的"flash技巧運用教學文件"的說明

★放在head與</head>之間★

<style type="text/css">

</style>

★放在body之間★

<a class="info" href="#">One<span>Explain</span></a>
<a class="info" href="#">Two<span>Explain</span></a>
<a class="info" href="#">Three<span>Explain</span></a>
<a class="info" href="#">Four<span>Explain</span></a>

第4-10行 : 設定連結文字樣式
第13-14行 : 滑鼠移至連結
第17行 : 隱藏說明
第20-29行 : 說明區塊樣式,自行調整

摘自於：http://www.hsiu28.net/style/article_detail.php?id=23

(繼續閱讀...)

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

個人分類：CSS

▲top

Jan 13 Sat 2007 23:21
把HTML語法中的列表符號換上小圖示!!

當文章中我們使用了 HTML 語法中的"列表(Lists)"時，呆板的符號總是缺乏一些可變性，如果說我們把項目符號換上一個自己畫的小圖示，那整個項目清單看來將會更活潑些!!
　
這裡我們是要以 CSS 來自訂項目的小圖示，所以在 HTML 中的"列表(Lists)" 語法，我們只以<li>標籤為開始，以</li>標籤為結束來說明，如下:

<li>正常列表符號</li>
<li>正常列表符號</li>
<li>正常列表符號</li>

得到的結果是這樣的:

正常列表符號
正常列表符號
正常列表符號

接下來我們就是要將那列表前的黑點點換成小圖示，CSS語法如下:

LI {list-style: url(小圖示的圖檔路徑);}
例如: LI {list-style: url(list_icon.gif);}

可以看到這裡使用的CSS標籤直接為 LI，也就是全站的任何文章中，只要有使用<li>的地方，將全部換成此自訂樣式!!
將此 CSS 語法寫入您的樣式表中，得到的結果會是如下的樣子....

列表符號換上小圖示
列表符號換上小圖示
列表符號換上小圖示

　
試試看! 讓項目清單符號也能夠有自己風格的小圖示吧!

摘自於：http://roy.nicetypo.com/contentbypermalink/152e50b669f746a948256e61004ad246

(繼續閱讀...)

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

個人分類：CSS

▲top

Jan 13 Sat 2007 23:17
拍立得樣式的精緻照片框!!

語法如下:

<div style="width:232px;padding:10px 10px 20px 10px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;float:right;"><img src="圖片路徑" style="border:1px solid #999999" /><p style="margin:4px 0; font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">照片描述<br><b>照片日期<br>photo by ???</b></p></div>

分別修改紅字部份的width:為圖片的寬度並+20，加入圖片路徑及照片描述/日期/名稱後即可!

　
密密麻麻的是吧! 我們拆開來看囉!
拿掉CSS的樣式描述後，是這樣的....
<div style=""><img src="" style=""><p style=""></p></div>
藍色部份為圖片的語法加樣式...
紅色的部份為文字描述的區塊語法...
而最外層的 DIV 區塊就是描述大體樣式的關鍵囉!
　
最外層的 DIV 區塊的 CSS 描述分解(也就是""內的語法):
width:212px; <------DIV 區塊的寬度!
padding:10px 10px 20px 10px; <-----DIV 區塊的內距!
border-width:1px 2px 2px 1px; <-----DIV 區塊的邊框粗細!
border-style:solid; <-----DIV 區塊的邊框風格樣式!
border-color:black; <-----DIV 區塊的邊框顏色!
background:white; <-----DIV 區塊的背景顏色!
float:right; <-----DIV 區塊的位置!
　
藍色部份的 img 圖片語法中，
Style="" 的 CSS 描述分解(也就是""內的語法):
border:1px solid #999999; <-----邊框的粗細風格樣式顏色!
　
紅色的部份的 p 文字描述區塊中，
Style="" 的 CSS 描述分解(也就是""內的語法):
margin:4px 0; <-----p 文字區塊的外距!
font:7pt/180% verdana; <-----p 文字區塊內的文字字級/行距字型!
letter-spacing:1px; <-----p 文字區塊內的單字間距!
color:#999999; <-----p 文字區塊內的文字顏色!
text-align:right; <-----p 文字區塊內的文字位置!

摘自於：http://roy.nicetypo.com/contentbypermalink/8c74133eb6343faa48256ea100516ecc

(繼續閱讀...)

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

個人分類：CSS

▲top

Dec 10 Sun 2006 12:53
★控制超連結的顏色與底線★

目前最常使用的 CSS 語法，就是控制超連結的顏色與底線，
　你可以依樣畫葫蘆，將下列虛線中的語法貼在 html 語法中
　<head> ..... </head> 之間：
　[語法]
　---------------------------------------------------------------------------
　<style type="text/css">
　
　</style>
　--------------------------------------------------------------------------

　[說明]

　1. 你可以自己更改色碼 (#xxxxxx)，換上你喜歡的顏色，
　　若需要加底線，就將 none 改成 underline 即可，試試看。

　2. 為了避免有些瀏覽器將 <style> ..... </style> 標記間的敘述
　　當成普通字，而顯現在網頁上，因此建議將敘述文字放在
　　html 註釋語句  中。

(繼續閱讀...)

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

個人分類：CSS

▲top

Dec 08 Fri 2006 00:11
★php寫一個萬年曆 ★

<?
//萬年曆程式
//date計算
$ctime = "+0"; //時差換算
if(!isset($newyear)) {
$year = date("Y",time() + $ctime * 3600);
} else {
$year = $newyear;
}

if(!isset($newmon)) {
$mon = date("n",time() + $ctime * 3600);
} else {
$mon = $newmon;
}
if(!isset($newday)) {
$day = date("j",time() + $ctime * 3600);
} else {
$day = $newday;
}
$timetemp = mktime(12,0,0,$mon,1,$year);

$year1 = date("Y",$timetemp); //該月之月初(年)
$mon1 = date("n",$timetemp); //該月之月初(月)
$day1 = date("j",$timetemp); //該月之月初(日)
$day2 = date("t",$timetemp); //該月天數
$day3 = date("w",$timetemp); //月初為星期幾
if($day3 == 0) { $day3 = 7; }

//年計算
echo "<center>";
echo "移至";
echo "\n<select name=\"newyear\" on<x>change=\"MM_jumpMenu('self',this,0)\">\n";
for($i=($year-5);$i<=($year+5);$i++) {
if($i == $year) {
echo "<option value='index.php?newyear=$i&newmon=$mon&newday=$newday' selected>$i</option>\n";
} else {
echo "<option value='index.php?newyear=$i&newmon=$mon&newday=$newday'>$i</option>\n";
}
}
echo "</select> 年 ";
//月計算
echo "\n<select name=\"newmon\" on<x>change=\"MM_jumpMenu('self',this,0)\">\n";
for($i=1;$i<=12;$i++) {
if($i == $mon) {
echo "<option value='index.php?newmon=$i&newyear=$year&newday=$newday' selected>$i</option>\n";
} else {
echo "<option value='index.php?newmon=$i&newyear=$year&newday=$newday'>$i</option>\n";
}
}
echo "</select> 月 <br>";

for($i=1;$i<$day3;$i++) {
$days[$i] = "";
}
for($j=1;$j<=$day2;$j++) {
$days[] = $j;
}
//列出日曆
echo "
<font size='3'><b>$year 年 $mon 月</b></font>
<table border='0' cellspacing='0' cellpadding='3%' bgcolor='#DFDFDF'>
<tr align='center' bgcolor='silver' valign='bottom'>
<td><font size='2'><b>一</b></font></td>
<td><font size='2'><b>二</b></font></td>
<td><font size='2'><b>三</b></font></td>
<td><font size='2'><b>四</b></font></td>
<td><font size='2'><b>五</b></font></td>
<td><font size='2'><b>六</b></font></td>
<td><font size='2'><b>日</b></font></td>
</tr>
<tr align='center'>";

//列出每日
//first row of days
for($i=1;$i<=7;$i++){
if($days[$i] == $day) //如為當日顯示紅色
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2' color='red'>{$days[$i]}</font></a></td>";
else
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2'>{$days[$i]}</font></a></td>";
}
echo "</tr><tr align='center'>";
for($i=8;$i<=14;$i++){
if($days[$i] == $day)
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2' color='red'>{$days[$i]}</font></a></td>";
else
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2'>{$days[$i]}</font></a></td>";
}
echo "</tr><tr align='center'>";
for($i=15;$i<=21;$i++){
if($days[$i] == $day)
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2' color='red'>{$days[$i]}</font></a></td>";
else
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2'>{$days[$i]}</font></a></td>";
}
echo "</tr><tr align='center'>";
for($i=22;$i<=28;$i++){
if($days[$i] == $day)
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2' color='red'>{$days[$i]}</font></a></td>";
else
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2'>{$days[$i]}</font></a></td>";
} <br />
echo "</tr><tr align='center'>";
for($i=29;$i<=35;$i++){
if($days[$i] == $day)
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2' color='red'>{$days[$i]}</font></a></td>";
else
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2'>{$days[$i]}</font></a></td>";
}
echo "</tr><tr align='center'>";
for($i=36;$i<=37;$i++){
if($days[$i] == $day)
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2' color='red'>{$days[$i]}</font></a></td>";
else
echo "<td><a href='index.php?newyear=$year&newmon=$mon&newday=$days[$i]'><font face='sans-serif' size='2'>{$days[$i]}</font></a></td>";
}
echo "</tr><tr align='center'></table></center>";
//顯示現今日期
$nowyear = date("Y",time() + $ctime * 3600);
$nowmon = date("n",time() + $ctime * 3600);
$nowday = date("j",time() + $ctime * 3600);
echo "<br><center><font size=2><b>今天日期 $nowyear 年 $nowmon 月 $nowday 日</font><br></center>";

//萬年曆結束
?>
----------------------------------------------------------------------------------------------------------------------
還有一段java script 要加在<head> </head>之間

<script language="javascript">

</script>

不然選單式連結無法動作
還有檔名要存為index.php

(繼續閱讀...)

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

個人分類：PHP

▲top

Dec 07 Thu 2006 20:59
★選取 mysql 最後一筆記錄的資料★

★選取 mysql 最後一筆記錄的資料★

$q_result = mysql_query("select * from table where id > 1");

(繼續閱讀...)

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

個人分類：PHP

▲top

Dec 07 Thu 2006 00:42
★文字方塊的背景色及按鈕的連結★

表單輸入格的背景色 ?
<input type="text" name="idno" style="background-color:#FFFF00" >

用button做超連結將網頁開啟
方法一：

<input type="button" value="連結" on click="window.location='http://www.hinet.net '" >

方法二：
<form .... > 裡頭加上 target = "xxxx" 就可了

(繼續閱讀...)

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

▲top

Dec 07 Thu 2006 00:15
★如何將網頁背景固定★

方法一：
<body bgcolor="#FFFFFF" background="../xxx/xxx/xxx.jpg"bgproperties="fixed">

這樣就可以了!!

方法二：
用css

body { background-image: url("image.gif");
background-attachment: fixed;
}

(繼續閱讀...)

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

▲top

Dec 07 Thu 2006 00:08
★將表單裡的文字方塊變成有陰影的效果★

css可能可以達到部分的效果昨天測試的語法如下
<style>
.tbutton
{
text-align: center;
border-left: solid 2px #FFFFFF;
border-top: solid 2px #FFFFFF;
border-right: solid 3px #A3A092;
border-bottom: solid 3px #A3A092;
cursor: hand;
background-color: #EEF3FB;
width : 70px;
}
</style>

<input type="text" width="104" class="tbutton">

★將表單裡的文字方塊變成有陰影的效果★

(繼續閱讀...)

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

▲top

隨身筆記本

放些從網路上抓來的範例。供我以後參考！

製作排列整齊的圖檔展示，且用照片框

利用隱藏層製作說明效果

把HTML語法中的列表符號換上小圖示!!

拍立得樣式的精緻照片框!!

★控制超連結的顏色與底線★

★php寫一個萬年曆 ★

★選取 mysql 最後一筆記錄的資料★

★文字方塊的背景色及按鈕的連結★

★如何將網頁背景固定★

★將表單裡的文字方塊變成有陰影的效果★

月曆

近期文章

最新迴響

新聞交換(RSS)

文章彙整

文章分類

PHP (1)

CSS (1)

我的連結

參觀人氣

QR Code

«	四月 2025					»
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

«	四月 2025					»
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

«	四月 2025					»
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30