有些網站的後台，壓根看不出是用哪種程式語法所寫..
導致支援的種類語法又不盡相同....
有時候編寫完，第一次試驗OK，等要修改時，卻又被系統恢復成 "系統預設編碼"
導致有時候一些特效、排列整個大跑掉...
以下的語法是用於某耶網站後台...
但缺點就是每次改完 就得全部程式碼複製回後台 才會正常
<title>網頁中點擊跳出+css+div表格+圖片區域連結</title><head>
<meta http-equiv="Content-Type" content="text/html; Charset=big5"> <style type="text/css"><!--
.T_0{
font-family:"華康細圓體";font-size:24px;height:28px;
line-height:28px;font-weight:none;color:#630;
vertical-align:auto;text-align:center;padding:0 0 0 0;
border-collapse:collapse;width:100%; }
.T_1-i{
font-family:"華康細圓體";font-size:14px;height:16px;
line-height:16px;font-weight:none;color:#000;
vertical-align:auto;text-align:left;}
dd{ text-indent:-0em;margin-left:3em;
font-family:"華康細圓體";font-size:14px;height:18px;
line-height:18px;font-weight:none;color:#000;
vertical-align:auto;text-align:left;}
#news {
width:100%;
border:2px solid #eee;
}
#news li{
list-style-type:none;
float:left;
width:40%;
text-align:center;
background:#EEE;
margin-right:2px;
margin-bottom:2px;
line-height:30px;
font-size:16px;
border:2px solid;
}
#news li.bt{font-size:16px; font-weight:none; background:#EEE;}
-->
.div{
height:120px;
width:341px;
background-color:#FFF;
margin:3px;
float:left;
}
.div1{
height:2px;
width:684px;
background-color:#FFF;
line-height:5px;
margin:5px;
float:left;
}
.a_01 {
font-family: "新細明體";
font-size:13px;
height:60px;
line-height:40px;
font-weight: bolder;
color: #fff;
background-color:#f37;
text-decoration:none;
vertical-align:middle;
text-align:center;
}
.a_03 {
font-family: "新細明體";
font-size: 14px;
line-height: 20px;
font-weight:bolder;
color:#00F;
text-align:center;
text-decoration: none;
vertical-align:middle;
}
<!--
a { text-decoration:none } //宣告HTML連結消除底線
a:link {color:#00f} //宣告連結顏色
a:visited {color:#00f} //訪問過連結顏色
a:active {color:#00f} //執行中連結顏色
a:hover {color:#00f} //當滑鼠移到連結時連結顏色
-->
html,body{font-size:16px;margin:0px;height:100%;width:100%;}
.mesWindow{border:#666 2px solid;background:#fff;font-family:'華康勘亭流'; font-weight:none;}
.mesWindowTop{border-bottom:#eee 1px solid;broder:1px solid;margin-left:4px;padding:3px;font-weight:none;text-align:left;font-size:14px;}
.mesWindowContent{margin:4px;font-size:14px;border:2px solid;}
.mesWindow.close{height:15px;width:25px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
//設置select的可見狀態
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//跳出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:1px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,20);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='關閉視窗' class='close' value='關閉' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//讓背景漸漸變暗
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
//關閉視窗
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
//測試跳出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:10px 0 20px 0;text-align:center;'>假期<hr><br><a href='#'><table width='100%' border='1' cellpadding='1' cellspacing='1'><tbody><tr><td rowspan='4' width='40%'><img src='#' width='135' height='120'></td><td class='a_01'><font style='vertical-align:middle'>假期(台北、台中、高雄)<br />自由行3天</font></td></tr><tr> <td class='a_03'>優惠價：每人 元/起</td></tr></tbody></table></a><a href='#'><table width='100%' border='1' cellpadding='1' cellspacing='1'><tbody><tr><td rowspan='4' width='40%'><img src='#' width='135' height='120'></td><td class='a_01'><font style='vertical-align:middle'>假期(台北、台中、高雄)<br />自由行3天</font></td></tr><tr> <td class='a_03'>優惠價：每人 元/起</td></tr></tbody></table></a><br><br><br><br><br><hr><a href='https://www.pixnet.net/'>回首頁</a></div>";
showMessageBox('測試用',messContent,objPos,355);
}
</script>
</head>
<BODY>
<div style="text-align:center"><a href="#none" onclick="testMessageBox(event);">按我跳出視窗</a></div>
</div>
</body>
</html>
文章標籤
全站熱搜
留言列表
程式碼 (1)
