December 30, 2014
December 26, 2014
兩張圖檔方式 w224 x h152 px
範例連結:
http://goo.gl/iw2C8F
註:開啟後,檢視原始碼。
範例連結:
http://goo.gl/iw2C8F
註:開啟後,檢視原始碼。
<style type="text/css">
#bButton a {
display: block;
overflow: hidden;
height: 0px;
width: 224px; /*圖檔寬度*/
background-image: url(img/a.png);
padding: 152px 0 0 0; /*圖檔高度 將圖檔移至顯示框外*/
}
#bButton a:hover {
background-image: url(img/b.png);
}
</style>
#bButton a {
display: block;
overflow: hidden;
height: 0px;
width: 224px; /*圖檔寬度*/
background-image: url(img/a.png);
padding: 152px 0 0 0; /*圖檔高度 將圖檔移至顯示框外*/
}
#bButton a:hover {
background-image: url(img/b.png);
}
</style>
December 11, 2014
在CSS中指定
在HTML中自動會呈現改變的顏色 (註:<p>無相關)
文章來源:
http://www.tagindex.com/stylesheet/form/background_color.html
<head>
<style type="text/css">
input.example, select {
width: 300px;
}
textarea {
width: 300px;
height: 7em;
}
input:focus, select:focus, textarea:focus {
background-color: #bde9ba;
}
</style>
</head>
<style type="text/css">
input.example, select {
width: 300px;
}
textarea {
width: 300px;
height: 7em;
}
input:focus, select:focus, textarea:focus {
background-color: #bde9ba;
}
</style>
</head>
在HTML中自動會呈現改變的顏色 (註:<p>無相關)
<form method="post" action="目標URL">
<p><input type="text" name="name" size="40" class="example"></p>
<p><select name="select">
<option value="選擇1">選擇1</option>
<option value="選擇2">選擇2</option>
<option value="選擇3">選擇3</option>
</select></p>
<p><textarea name="msg" cols="40" rows="7"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
<p><input type="text" name="name" size="40" class="example"></p>
<p><select name="select">
<option value="選擇1">選擇1</option>
<option value="選擇2">選擇2</option>
<option value="選擇3">選擇3</option>
</select></p>
<p><textarea name="msg" cols="40" rows="7"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
文章來源:
http://www.tagindex.com/stylesheet/form/background_color.html
December 3, 2014
固定在上方的寫法
備註:上方會有少了與#bHeader 相同空間。
<html>
<head>
<style type='text/css'>
#bTop{ position:fixed; top:0px;}
</style>
</head>
<body>
<div id="bTop">
這裡是 bTop !!!
</div>
</body>
</html>
<head>
<style type='text/css'>
#bTop{ position:fixed; top:0px;}
</style>
</head>
<body>
<div id="bTop">
這裡是 bTop !!!
</div>
</body>
</html>
備註:上方會有少了與#bHeader 相同空間。
June 19, 2014
這是筆記。通常我會併用兩個,才會精準。
出處:
梅問題教學
手機網頁教學-自動切換電腦或手機版(PHP、ASPX)
http://www.minwt.com/mobilewebdesign/2501.html
參考網頁:
http://blog.apao.idv.tw/html5/php/pc_mobile/
$mobile_browser = '0';
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobile_browser++;
}
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
$mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda','xda-','Googlebot-Mobile');
if(in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
$mobile_browser=0;
}
if($mobile_browser>0) {
header("Location: mobile/index.php"); //手機版
}else {
header("Location: PC/index.php"); //電腦版
}
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobile_browser++;
}
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
$mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda','xda-','Googlebot-Mobile');
if(in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
$mobile_browser=0;
}
if($mobile_browser>0) {
header("Location: mobile/index.php"); //手機版
}else {
header("Location: PC/index.php"); //電腦版
}
出處:
梅問題教學
手機網頁教學-自動切換電腦或手機版(PHP、ASPX)
http://www.minwt.com/mobilewebdesign/2501.html
參考網頁:
http://blog.apao.idv.tw/html5/php/pc_mobile/