無標題文件
Nivo Slider Demo
This is an example of a HTML caption with a link.
無標題文件
無標題文件
目前位子《設計者的收藏館》
收藏館
按鈕導圓改色css
font-size:15px;
font-family:微軟正黑體;
font-weight:normal;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #ed93ed;
padding:2px 10px;
text-decoration:none;
background:-moz-linear-gradient( center top, #fadffa 35%, #f7caf7 70% );
background:-ms-linear-gradient( top, #fadffa 35%, #f7caf7 70% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fadffa', endColorstr='#f7caf7');
background:-webkit-gradient( linear, left top, left bottom, color-stop(35%, #fadffa), color-stop(70%, #f7caf7) );
background-color:#fadffa;
color:#9c0e9c;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;

製作icon.ico 或(含加入最愛時出現logo)

<head><link rel="shortcut icon" href="公司網址/images/favicon.ico" type="image/x-icon" />
<link rel="mark" href="公司網址/images/favicon.ico" type="image/x-icon" />
</head>

說明:製作icon.ico位置
http://tools.dynamicdrive.com/favicon/
http://www.favicon.cc/

CSS語法 導圓角
(簡易)導圓角 5px

-moz-border-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid #666;
------------------------------------------------------------
正常導圓角10px

-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
------------------------------------------------------------
導圓角100px

-webkit-border-radius: 100px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 100px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 100px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;

下拉式選單

(一)將以下語法貼於<head>與</head>之間

<style type="text/css">

#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:25px 0 200px 15px;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a{background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}

</style>

(二) 將以下語法貼於<body>與</body>之間

<ul id="pmenu">
<li><a href="#01">Top Level 1</a></li>
<li><a href="#01">Top Level 2</a></li>
<li><a href="#01">Top Level 3 &#187;</a>
<ul>
<li><a href="#01">Sub Level 1a</a></li>
<li><a href="#01">Sub Level 1b</a></li>

<li><a href="#01">Sub Level 1c &#187;</a>
<ul>
<li><a href="#01">Sub Level 2a</a></li>
<li><a href="#01">Sub Level 2b &#187;</a>
<ul>
<li><a href="#01">Sub Level 3a</a></li>
<li><a href="#01">Sub Level 3b &#187;</a>

<ul>
<li><a href="#01">Sub Level 4a</a></li>
<li><a href="#01">Sub Level 4b</a></li>
<li><a href="#01">Sub Level 4c &#187;</a>
<ul>
<li><a href="#01">Sub Level 5a</a></li>
<li><a href="#01">Sub Level 5b</a></li>

<li><a href="#01">Sub Level 5c</a></li>
<li><a href="#01">Sub Level 5d &#187;</a>
<ul>
<li><a href="#01">Sub Level 6a</a></li>
<li><a href="#01">Sub Level 6b</a></li>
<li><a href="#01">Sub Level 6c</a></li>

<li><a href="#01">Sub Level 6d</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 5e</a></li>
<li><a href="#01">Sub Level 5f</a></li>
</ul>
</li>

<li><a href="#01">Sub Level 4d</a></li>
<li><a href="#01">Sub Level 4e</a></li>
<li><a href="#01">Sub Level 4f</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 3c</a></li>
<li><a href="#01">Sub Level 3d</a></li>

</ul>
</li>
<li><a href="#01">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 1d</a></li>
<li><a href="#01">Sub Level 1e</a></li>

</ul>
</li>
<li><a href="#01">Top Level 4</a></li>
<li><a href="#01">Top Level 5</a></li>
<li><a href="#01">Top Level 6</a></li>
</ul>

(一) 的CSS設定是網頁上的表格選單上所要呼叫CSS的設定,像是下拉的動做或者是選單上的顏色,或滑鼠滑過會下拉的動作,或滑鼠滑過選單上的顏色變換。可以製作或變換看看,就可以改便它的顏色。

(二) 則是在網頁上設計一個表格,也就是選單,及要跑出的下拉式選單與更多層的選單內容。可以將二貼於記事本就可看出它有一層壹層的選單內容,就可 知道要修改的地方。 不過很可惜的它只支援IE 7,IE 6是沒有辦法產生動作的,可到Firefox瀏覽器就可以看到了。

這個css橫式下拉式選單,最主要是應用<ul>與<li>功能,將子目錄一層一層的呈現,所以只要在二的<ul>中就可看到它下拉的位置,及子選單的呈現。(一)裡的 #pmenu li:hover > a{background:#dfd7ca; color:#c00;}最主要是設定滑鼠滑過按鈕所變換的顏色,文字或是按鈕的背景顏色。#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}則是設定子選單下拉的動作及位置。(二)裡的 #01 則是每個按鈕連結的頁面。

常用的選單英文
index 首頁
down 最下方選單
top_pic 最上方圖片
contact 聯絡我們
menu_left 左選單
meun_center中選單
menu_right 右選單
menu 目錄選單

font color 顏色
hue 色調
sign 符號
case 格盒
edit 編輯
array 排列

style 風格
maintopic 主題
position 位置
mainbox 主盒
maintxt 主要文字
boxtop 盒頂
boxmenu 盒菜單
boxleft 左盒
news 最新
data 素材


聯結語法 a
a:link
a:visited
a:hover

表格 html
<table width="300" border="1">
<tr>
<td>這裡是第一個欄位</td>
<td>這裡是第二個欄位</td>
</tr>
</table>

表格css
設定表格css內 例如: form table
table
table tr
table tr th
table tr td
table tr td input
table tr th #form
文法內下
<table width="0" border="0" cellspacing="0" cellpadding="0"> </table>

search 搜尋

CSS Button Generator - imageless css buttons maker
按鈕變色網址 sciweavers

嵌入 <? include ("top_pic.php"); ?>

資料訊息
無標題文件