目前有考慮用像素圖，但是要如何印在木板上有點頭痛
不過這到是最後的事了
[img]http://www.servimg.com/image_preview.php?i=33&u=14913355]
有 121 筆資料符合您搜尋的條件
擡面圖片資料--像素圖 - 周四 3月 15, 2012 5:18 pm
:::IE支援PNG透明::: - 周一 1月 31, 2011 1:14 pm
- 代碼:
img, object, param, embed {
border:none;
vertical-align:bottom;
}
IE支援PNG透明
:::自行完成 網頁設計::: - 周五 1月 28, 2011 5:16 pm
假面騎士 戰鬥卡片
這是第一次做比較完整的
但是也吃了不少苦= ="不過因為都沒做過所以很多是一直做白工的部份
而且做到最後會一直想CSS做真的比較好嗎????
又或是自己"大頭症"犯了!!!明明都不會卻硬要用css程式語言下去做...
不過想想如果只是和之前一樣做法....那不就又有點像在做平面一樣嗎!?
= =不行!!會要這東西來做不就是為了以"實戰"邊打邊學
這網頁除了FLASH不是我用的其他都是自己用的
沒有很多花俏的功能或變化，但是時間都花在基本工上
這次花比較多時間的
1.選單的按鍵
2.浮動定位
3.捲軌的隱藏
3.PNG檔IE不相容
4.流覽器和CSS的相容度
[url][/url]
:::一段非常好的滑動門::: - 周五 1月 28, 2011 4:31 pm
- 代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>標準佈局應用：選項卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* 選項卡關鍵屬性 */
#tab { width:570px; height:260px; position:relative; } /*設置容器高寬等*/
html > body #tab { width:566px; }/*兼容IE6:IE6下寬度不夠*/
#tab div { position:absolute; top:26px; left:0; width:564px; height:234px; border:solid #eee; border-width:0 1px 1px; }/*設置被操作容器高寬等*/
#tab div { display:none; }/*設置被操作容器默認隱藏:不用ID是因為下面將利用class來控制被操作容器顯示,而class優先級低於id選擇器*/
#tab .block { display:block; }/*選中的被操作容器*/
#tab h3 { float:left; width:114px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:14px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url(attachments/month_0709/0200791202932.gif) no-repeat; }/*默認標題樣式*/
#tab .up { background:#fff url(attachments/month_0709/q200791202949.gif) no-repeat; }/*選中的標題樣式*/
/*修飾列表內容*/
#tab ul { margin:15px 0 0; list-style:none; padding:0; }
#tab li { float:left; width:50%; background:url(attachments/month_0709/n200791203046.gif) no-repeat 25px 10px; }
#tab li a { display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333; background:url(attachments/month_0709/g200791203132.gif) repeat-x left bottom; text-indent:10px; }
#tab li a:hover { text-decoration:underline; color:#f00; }
</style>
</head>
<body>
<div id="tab">
<h3 class="up" onclick="go_to(1);">選擇一</h3>
<div class="block">
<ul>
<li><a href="#">選擇一</a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
<li><a href="#">張鈺和於連的同源悲劇 </a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
</ul>
</div>
<h3 onclick="go_to(2);">選擇二</h3>
<div>
<ul>
<li><a href="#">選擇二</a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
<li><a href="#">張鈺和於連的同源悲劇 </a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
</ul>
</div>
<h3 onclick="go_to(3);">選擇三</h3>
<div>
<ul>
<li><a href="#">選擇三</a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
<li><a href="#">張鈺和於連的同源悲劇 </a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
</ul>
</div>
<h3 onclick="go_to(4);">選擇四</h3>
<div>
<ul>
<li><a href="#">選擇四</a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
<li><a href="#">張鈺和於連的同源悲劇 </a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
</ul>
</div>
<h3 onclick="go_to(5);">選擇五</h3>
<div>
<ul>
<li><a href="#">選擇五</a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
<li><a href="#">張鈺和於連的同源悲劇 </a></li>
<li><a href="#">從人大代表侯建軍終審 </a></li>
<li><a href="#">車輛交付問題 </a></li>
<li><a href="#">貽誤申請執行期限損失 </a></li>
<li><a href="#">民警特權扣車,油變成 </a></li>
<li><a href="#">地下室及公攤面積不收 </a></li>
<li><a href="#">當前醫療廣告存在的問 </a></li>
<li><a href="#">新醫改要注意的幾個問 </a></li>
</ul>
</div>
<script type="text/javascript">
<!--
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao){
for(var i=0;i<h.length;i++){
if(ao-1==i){
h[i].className+=" up";
d[i].className+=" block";
}
else {
h[i].className=" ";
d[i].className=" ";
}
}
}
//-->
</script>
</div>
</body>
</html>
:::一段非常好的滑動門::: - 周五 1月 28, 2011 4:28 pm
無間斷滾動的新聞文章列表，兼容IE、Firefox和Opera，符合W3C標準。可作Marqu
- 代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>無間斷滾動的新聞文章列表</title>
<link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" />
<!--[if IE]><style>
@import url("/tutorials/demo/css/ie.css");
</style><![endif]-->
<style type="text/css">
<!--
a{background:#FFF; color:#333;}
a:hover{background:#FFF;color: #C00;}
#demo ul{text-align: left; }
#demo li a{line-height:2em; padding-left:1.5em;background: #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom: 1px;}
#FGWrapper{width: 400px; margin:2em auto; background:#EEE;}
#demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;}
#desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;}
#copyright{float: right;}
-->
</style>
<noscript>
<style type="text/css">
#demo{overflow:auto; }
}
</style>
</noscript>
</head>
<body>
<div id="ForestganWrap">
<div id="forestganHeader">
<h1>CSS 佈局演示 CSS Layout</h1>
</div>
<div id="forestganMiddle"> <div id="FGWrapper">
<div id="demo">
<div id="demo1">
<ul>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=76" title="三列自適應寬度液態佈局│Three Column Liquid Layouts">三列自適應寬度液態佈局│Three Column Liquid Layouts </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=75" title="Internet Explorer 7 對CSS的兼容--Box Model Changes">Internet Explorer 7 對CSS的兼容--Box Model Changes </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=74" title="未知大小的圖片在一個已知大小容器中的水平和垂直居中（二）">未知大小的圖片在一個已知大小容器中的水平和垂直居中（二） </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=73" title="為不同的瀏覽器載入不同CSS的二種方法CSS Browser Selector">為不同的瀏覽器載入不同CSS的二種方法CSS Browser Selector </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=72" title="用ASP程序模擬實現first-child的功能">用ASP程序模擬實現first-child的功能 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71" title="本地檢驗網頁是否符合標準的幾種方法">本地檢驗網頁是否符合標準的幾種方法 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69" title="未知總寬度的列表菜單水平居中的解決方案">未知總寬度的列表菜單水平居中的解決方案 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68" title="為機器人程序準備的robots.txt文件">為機器人程序準備的robots.txt文件 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67" title="未知大小圖片在已知容器中的垂直和水平居中問題">未知大小圖片在已知容器中的垂直和水平居中問題 </a></li>
</ul>
</div>
<div id="demo2"> </div>
<script type="text/javascript">
//圖片無間斷滾動代碼，兼容IE、Firefox、Opera
//原腳本是IE only，來自網上，作者未知
//部分內容是由forestgan為了JS代碼標準化，兼容以gecko為內核的瀏覽器於2006-10-30重寫
//http://www.forest53.com
var speed=40;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('demo1');
var FGDemo2=document.getElementById('demo2');
FGDemo2.innerHTML=FGDemo1.innerHTML
function Marquee1(){
if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
FGDemo.scrollTop-=FGDemo1.offsetHeight
else{
FGDemo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>
</div> </div>
</div>
</body>
</html>
- 代碼:
<marquee direction=up>www.hanbox.com.tw</marquee>
如果想加入「鼠標移動到滾動文本上，滾動停止，移走則繼續滾動」怎麼實現？
onmouseover="this.stop()" onmouseout="this.start()"
如果要控制速度怎麼寫？
scrolldelay="900"
:::一段非常好的滑動門::: - 周五 1月 28, 2011 4:27 pm
一段非常好的滑動門[可感應觸發或點擊觸發]兼容IE7 IE6 FireFox Opera
- 代碼:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的滑動門</title>
<style type="text/css">
body{
color: #000;
font-family: "細明體", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
</head>
<body>
<div align="center" style="padding-left:25px;">
<!-- 選項卡0開始 -->
<div class="nTab">
<!-- 標題開始 -->
<div class="TabTitle">
<ul id="myTab0">
<li class="active" onmouseover="nTabs(this,0);">全部</li>
<li class="normal" onmouseover="nTabs(this,1);">日誌</li>
<li class="normal" onmouseover="nTabs(this,2);">咨詢</li>
<li class="normal" onmouseover="nTabs(this,3);">相冊</li>
<li class="normal" onmouseover="nTabs(this,4);">商城</li>
<li class="normal" onmouseover="nTabs(this,5);">社區</li>
</ul>
</div>
<!-- 內容開始 -->
<div class="TabContent">
<div id="myTab0_Content0"> 000 </div>
<div id="myTab0_Content1" class="none">111</div>
<div id="myTab0_Content2" class="none">222</div>
<div id="myTab0_Content3" class="none">333</div>
<div id="myTab0_Content4" class="none">444</div>
<div id="myTab0_Content5" class="none">555</div>
</div>
</div>
<!-- 選項卡0結束 -->
<!-- 選項卡1開始 -->
<div class="nTab" style=width:288px>
<!-- 標題開始 -->
<div class="TabTitle">
<ul id="myTab1">
<li class="active" onclick="nTabs(this,0);">aaa</li>
<li class="normal" onclick="nTabs(this,1);">bbb</li>
<li class="normal" onclick="nTabs(this,2);">ccc</li>
<li class="normal" onclick="nTabs(this,3);">單擊</li>
</ul>
</div>
<!-- 內容開始 -->
<div class="TabContent">
<div id="myTab1_Content0"> 000 </div>
<div id="myTab1_Content1" class="none"> 111 </div>
<div id="myTab1_Content2" class="none"> 222 </div>
<div id="myTab1_Content3" class="none"> 333 </div>
</div>
</div>
<!-- 選項卡1結束 -->
</div>
</body>
</html>
超簡單表格隔行換色與鼠標經過變色 - 周五 1月 28, 2011 4:12 pm
- 代碼:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<style type="text/css"><!--
#senfe {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
--></style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本來打算直接用背景色判斷，FF獲取到的背景是RGB值，不好判斷
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="senfe">
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script language="javascript"><!--
//senfe("表格名稱","奇數行背景","偶數行背景","鼠標經過背景","點擊後背景");
senfe("senfe","#fff","#ccc","#cfc","#f00");
--></script>
</body>
- 代碼:
<style type="text/css"><!--
#senfe {
width: 650px;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
}
#senfe td {
padding: 5px;border-right: #E3E3E3 1px solid;
border-bottom: #E3E3E3 1px solid;
}
#senfe2 {
width: 650px;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
}
#senfe2 td {
padding: 5px;border-right: #E3E3E3 1px solid;
border-bottom: #E3E3E3 1px solid;
}
--></style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本來打算直接用背景色判斷，FF獲取到的背景是RGB值，不好判斷
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
<P><TABLE id="senfe" cellSpacing=0 cellPadding=0 width="650px" border=0>
<TBODY>
<TR>
<TD colSpan=7><H3 id=about2>電子雜誌製作價格表</H3></TD></TR>
<TR>
<TD width="12%">版 本</TD>
<TD width="12%">簡易版</TD>
<TD width="13%">普及版</TD>
<TD width="13%">標準版</TD>
<TD width="14%">專業版</TD>
<TD width="15%">創意版</TD>
<TD width="15%">經典版</TD>
</TR>
<TR>
<TD>製作週期</TD>
<TD>5天以內</TD>
<TD>10天以內</TD>
<TD>10天-15天</TD>
<TD>30天-45天</TD>
<TD>與客戶另行協商</TD>
<TD>與客戶另行協商</TD>
</TR>
<TR>
<TD colspan="7"> <p style="color:red">如果客戶長期期刊製作合作，價格將更加優惠。</p></TD>
</TR>
</TBODY></TABLE>
<TABLE id="senfe2" cellSpacing=0 cellPadding=0 width="650px"
border=0>
<TBODY>
<TR>
<TD colSpan=3><H3 id=about2>電子雜誌製作單項價格表</H3></TD></TR>
<TR>
<TD width="12%">單項項目</TD>
<TD width="26%">單價</TD>
<TD width="46%">備註</TD>
</TR>
<TR>
<TD>專業配音</TD>
<TD>面議</TD>
<TD>專業錄音棚+專業錄音員，看配音內容多少而定</TD>
</TR>
<TR>
<TD>專業拍攝</TD>
<TD>面議</TD>
<TD>專業攝影看客戶需求而定</TD>
</TR>
</TBODY>
</TABLE>
</P>
</LI>
</UL>
</DIV></DIV></DIV>
<script language="javascript"><!--
//senfe("表格名稱","奇數行背景","偶數行背景","鼠標經過背景","點擊後背景");
senfe("senfe","#fff","#F5F5F5","#FFFFCC","#FFFF84");
//senfe("表格名稱","奇數行背景","偶數行背景","鼠標經過背景","點擊後背景");
senfe("senfe2","#fff","#F5F5F5","#FFFFCC","#FFFF84");
--></script>
純CSS文字超出省略號效果，支持IE/FF - 周五 1月 28, 2011 4:05 pm
CSS版
- 代碼:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#ididid{
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:normal;
*white-space:nowrap;
overflow:hidden;
border:1px solid #999;
}
#ididid span{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
#ididid span:after{content:"...";}
</style>
</head>
<body>
<div id="ididid">test test test test test test test test test test test test test test test test test test test test test test test <span></span></div>
</body>
</html>
js版
- 代碼:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#ididid{
width:150px;
line-height:20px;
overflow:hidden;
border:1px solid #999;
}
</style>
</head>
<body>
<script type="text/javascript">
function testAuto(thisId,needLeng){
var ididid = document.getElementById(thisId);
var nowLeng = ididid.innerHTML.length;
if(nowLeng > needLeng){
var nowWord = ididid.innerHTML.substr(0,needLeng)+'...';
ididid.innerHTML = nowWord;
}
}
</script>
<div id="ididid">12345678901234567890test test test test test test test test test test test test test test test test test test test test test test test</div>
<script type="text/javascript">
testAuto('ididid',15)
</script>
</body>
</html>
:::CSS全攻略::: - 周五 1月 28, 2011 3:45 pm
一、CSS的四種實現方式：
1.內嵌式：
- 代碼:
<style type="text/css">
<!--
CSS代碼段
-->
</style>
2.外鏈式：
- 代碼:
<link href="http://blogbeta.blueidea.com/*.css" rel="stylesheet" type="text/css">
3.導入式
- 代碼:
<style type="text/css">
<!--
@import url("*.css");
-->
</style>
4.屬性式：
- 代碼:
<div style="position:absolute; width:200px; height:115px; z-index:1; left: 209px; top: 154px;"></div>
二.CSS的定義：
選擇對像{屬性1:值1;屬性2:值2;屬性3:值3;屬性n:值n……}
如：
- 代碼:
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四種選擇對像
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊對像 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置標符，如：DIV、TD、H1。HTML selector的作用範圍是應用了該樣式的所有頁面中的所有該置標符。
例：
- 代碼:
<html>
<head>
<title>藝網CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
td
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td>藝網--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意：在
2.class selector
定義class selector需要往其名稱其加一個點「.」。如「.classname」。class selector的作用範圍是所有包含「class="classname"」的置標符。
例：
- 代碼:
<html>
<head>
<title>藝網CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.fontRed
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td class="fontRed">藝網--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意：在第二個
3.ID selector
定義ID selector需要往其名稱其加一個點「#」。如「#IDname」。ID selector的作用範圍是所有包含「ID="classname"」的置標符。
例：
- 代碼:
<html>
<head>
<title>藝網CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
#fontRed
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td ID="fontRed">藝網--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意：在第二個
4.特殊對像
特殊對像包括四種，是針對鏈接對像設置的:
a:hover 鼠標移上時的超鏈接
a:link 常規，非訪問超鏈接
a:visited 訪問過的超鏈接
a:active 鼠標點擊時的超鏈接
特殊對象的作用範圍是所有置標符（這句話有待商榷，因為下面很快就有一種方法可以把「所有」兩個字推翻）。
例：
- 代碼:
<html>
<head>
<title>藝網CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
a
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td><a href="http://www.ArtHtml.com">藝網--ArtHtml.com</a></td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意下面，很有用！！！
- 代碼:
a.classname:hover
a#IDname:hover
這兩種寫法，是分別配合.classname與#IDname使用的。它的作用範圍變成了所有包含「class="classname"」或「ID="IDname"」的置標符。這種寫法，可以幫助你在同一頁面中實現多種a:hover效果，可以看一下藝網(http://www.ArtHtml.com)http://www.ArtHtml.com)的主頁上導航欄文字與普通文章標題在鼠標時的區別。
四.應用：
1.置標符 自動應用
2.特製類 class="NAME"
3.ID ID="IDname"
4.特殊對像 自動應用
五.CSS屬性
CSS的屬性有很多，像上文中用到最多的color，表示文字的顏色。background-color表示背景色。這個是最主要的，但是因為沒有什麼難度，參考一下相關手冊就可以了。
:::中文字段的幾種特殊排列方式::: - 周五 1月 28, 2011 3:41 pm
- 代碼:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中文字段的幾種特殊排列方式</title>
</head>
<body>
<style>
a { color:#555; background-color:buttonface; font-size:14px; display:block; text-decoration:none; width:300px; border:1px solid buttonface; padding:2px 5px; }
a:hover { color:#000; background-color:#9AEAFA; font-size:14px; display:block; text-decoration:none; width:300px; border:1px solid navy; padding:2px 5px; }
</style>
<br><br>
<a href="">用來做菜單也不錯</a>
<a href="" disabled >disabled 的時候,點擊是沒有用的</a>
<a href="">Hutia</a>
<a href="">俺是 詰屈聱牙</a>
</body>
</html>
:::利用錨點控制翻頁::: - 周五 1月 28, 2011 3:33 pm
- 代碼:
<style>
dl {
position:absolute;
width:240px;
height:170px;
border:10px solid #eee;
}
dd {
margin:0;
width:240px;
height:170px;
overflow:hidden;
}
dt {
position:absolute;
right:1px;
}
ul {
margin:0;
padding:0;
width:260px;
height:170px;
list-style:none;
background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;
border:1px solid #ccc
}
#b {
background-position:75% center
}
#c {
background-position:75% 86%
}
li {
width:205px;
height:27px;
font:12px/27px "細明體",sans-serif;
white-space:nowrap;
overflow:hidden;
}
dt a {
display:block;
margin:1px;
width:30px;
height:56px;
text-align:center;
font:700 12px/55px "細明體",sans-serif;
color:#fff;
text-decoration:none;
background:#666;
}
dt a:hover {
background:orange
}
</style>
<head/>
<body>
<dl>
<dt><a href="#a" title="">新聞</a><a href="#b" title="">娛樂</a><a href="#c" title="">體育</a></dt>
<dd>
<ul id="a">
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
<li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li>
</ul>
<ul id="b">
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
<li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li>
</ul>
<ul id="c">
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
<li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li>
</ul>
</dd>
</dl>
</body>
</html>
:::利用錨點控制翻頁::: - 周五 1月 28, 2011 3:31 pm
- 代碼:
<style>
dl {
position:absolute;
width:240px;
height:170px;
border:10px solid #eee;
}
dd {
margin:0;
width:240px;
height:170px;
overflow:hidden;
}
img {
border:1px solid black
}
dt {
position:absolute;
right:3px;
top:50px;
}
a {
display:block;
margin:1px;
width:20px;
height:20px;
text-align:center;
font:700 12px/20px "宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;
border:1px solid #fff;
filter:alpha(opacity=40);
opacity:.4;
}
a:hover {
background:#000
}
</style>
</head>
<body>
<dl>
<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>
<dd>
<img src="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" />
<img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" />
<img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" />
</dd>
</dl>
</body>
:::純CSS Lightbox效果 (無需JS)::: - 周五 1月 28, 2011 3:19 pm
css
- 代碼:
<style>
body{font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif;}
a{color:#000; text-decoration:none;}
.img{border:0px;}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 25%;
width: 632px;
height: 445px;
border: 16px solid #FFF;
border-bottom:none;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
HTML部分：
- 代碼:
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
:::文字出現註解文字框::: - 周五 1月 28, 2011 3:15 pm
- 代碼:
<br /><br /><br /><br /><br />
<a class="tooltips" href="#tooltips">這就是Tooltips<span>如你所見，這些附加的說明文字在鼠標經過的時候顯示。</span></a>
<style type="text/css">
/*Tooltips*/
.tooltips{
position:relative; /*這個是關鍵*/
z-index:2;
}
.tooltips:hover{
z-index:3;
background:none; /*沒有這個在IE中不可用*/
}
.tooltips span{
display: none;
}
.tooltips:hover span{ /*span 標籤僅在 :hover 狀態時顯示*/
display:block;
position:absolute;
top:21px;
left:9px;
width:15em;
border:1px solid black;
background-color:#ccFFFF;
padding: 3px;
color:black;
}
</style>
版權信息顯示在頁面的底部 - 周五 1月 28, 2011 3:11 pm
- 代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>版權信息顯示在頁面的底部</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table style="position:absolute;bottom:0;border:solid 1px;width:100%"><tr><td>我真的在最底下？？</td></tr></table>
</body>
</html>
