網頁設計tips_網頁設計中怎麼實現某一層過5秒自動消失或點擊消失有效的給分

1、網頁設計中，怎麼實現某一層過5秒自動消失或點擊消失？有效的給分

||||

示例抄：襲

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <style type="text/css">
    .tip{
      width: 500px;
      height: 300px;
      background: #999;
    }
  </style>
</head>
<body>
  <div class="tip" id="A" onclick="disappear();"></div>
</body>
<script type="text/javascript">
  function disappear(e){
    e = e || window.event;
    var target = e.srcElement || e.target;
    target.style.display = 'none'
  }
  // 5秒後自動消失
  setTimeout(function(){
    document.getElementById('A').style.display = 'none'
  }, 5000);
</script>
</html>

代碼：

2、網頁製作，怎樣製作網站左下角彈出小廣告。

js特效
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>網頁右下角的信息框</title>
</head>
<style type="text/css">
#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}
#winpop .title { width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}
#winpop .con { width:100%; height:90px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}
#silu { font-size:12px; color:#666; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}
.close { position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer}
</style>
<script type="text/javascript">
function tips_pop(){
var MsgPop=document.getElementByIdx_x("winpop");
var popH=parseInt(MsgPop.style.height);//將對象的高度轉化為數字
if (popH==0){
MsgPop.style.display="block";//顯示隱藏的窗口
show=setInterval("changeH('up')",2);
}
else {
hide=setInterval("changeH('down')",2);
}
}
function changeH(str) {
var MsgPop=document.getElementByIdx_x("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){
if (popH<=100){
MsgPop.style.height=(popH+4).toString()+"px";
}
else{
clearInterval(show);
}
}
if(str=="down"){
if (popH>=4){
MsgPop.style.height=(popH-4).toString()+"px";
}
else{
clearInterval(hide);
MsgPop.style.display="none"; //隱藏DIV
}
}
}
window.onload=function(){//載入
document.getElementByIdx_x('winpop').style.height='0px';
setTimeout("tips_pop()",800);//3秒後調用_pop()這個函數
}
</script>
<body>
<div id="silu">
<button onclick="tips_pop()">3秒後會在右下角自動彈出窗口，如果沒有彈出請點擊這個按鈕</button>
</div>
<div id="winpop">
<div class="title">您有新的短消息！<span class="close" onclick="tips_pop()">X</span></div>
<div class="con">1條未讀信息(</div>
</div>
</body>
</html>

3、網頁製作中需要加超鏈接應該怎樣做

網頁製作中需要加超鏈接要使用<a>標簽。

在HTML中標簽<a></a> 或者大寫字母A 。其中的a（或者 A）是 anchor 的縮寫。anchor ['æŋkə] 基本解釋是.：錨, 鐵錨的。

這些標簽的作用是標明超連接的起始位置或目的位置。

<a> 標簽可定義錨。錨 (anchor) 有兩種用法：

通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）通過使用 name 或 id 屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。

在所有瀏覽器中，鏈接的默認外觀是：

未被訪問的鏈接帶有下劃線而且是藍色的已被訪問的鏈接帶有下劃線而且是紫色的活動鏈接帶有下劃線而且是紅色的

示例：

1. <a href="#">關鍵詞</a>

2. <a name="a00">關鍵詞</a>

(3)網頁設計tips擴展資料

html中a標簽的屬性介紹：

a標簽實例：

HTML 文檔內部的已命名的錨：

<a name="tips">Useful Tips Section</a>然後，我們創建指向相同文檔中「有用的提示」部分的鏈接：

<a href="#tips">Visit the Useful Tips Section</a>或者，創建從另一個頁面指向該文檔中「有用的提示」部分的鏈接：

<a href="url/#tips">Visit the Useful Tips Section</a>在上面的代碼中，我們將 # 符號和錨名稱添加到 URL 的末端，就可以直接鏈接到 tips 這個命名錨了。

4、網頁製作的一個問題:一個a標簽，如果帶有title屬性，那麼把滑鼠放到這個a標簽上面時，會彈出一個小窗口

看看這個，好東西共分享！

5、在網頁製作中層的隱藏和顯示怎麼弄啊

6、如何提升網頁設計的視覺層次感

1. 明確元素設計目標
網頁上的各項元素通常都有其存在的目的和意義，在構建視覺層次時我們就可以從這方面著手，根據網頁元素的不同角色確定優先順序，然後進行視覺層次的構建。
2. 考慮用戶瀏覽模式
當用戶初次訪問網站時，他們一般不會仔細瀏覽所有內容，而是會進行快速的掃視，確定其中是否有自己感興趣的內容。
3. 功能性優先
我們常常會有這樣一個誤區，認為視覺層次是服務於網站設計美感的。其實，視覺層次設計的功能性反而要更重要一些。設計師在構建視覺層次時首先需要確保每個元素發揮了自己的作用，比如提供給用戶清晰的導航菜單、可見的購買途徑等，然後再考慮元素組合的界面美觀與否。
4. 善用留白
留白或者說負空間，不僅僅是指界面元素之中空白的區域，它更是視覺層次構成的核心元素之一。在視覺層次設計中，留白一方面可以用來聯系或區分不同內容元素，創造別具一格的布局。另一方面它還可以幫助強調某個關鍵元素，讓它獲得用戶額外的關注。
5. 使用黃金分割
黃金准則主要是指1:1.618的頁面比例，它被公認為是最具美感的，在自然界、日常生活、舞檯布局等多個方面都有著不同的應用。

7、網頁設計中的引導頁究竟怎樣做

如何設計引導頁：

1.了解引導頁類型，清洗引導類型

前置型引導頁：啟動應用程序後，進入主功能前的一系列圖片或者動畫效果，停留數秒後消失。在用戶初次實用移動產品時，給予一些必要性的幫助，以便用戶快速了解產品類型，功能，具體操作

過程中引導：在用戶使用產品過程中給出一系列幫助內容，主要方式有空白頁的內容引導，loading等等狀態引導，拆分包袱的逐步引導，巧設默認值的功能引導，tips引導，浮點引導，遮罩聚焦式引導，觸發式引導，任務演練式引導等。

網頁設計中的引導頁究竟怎樣做?由於主要講前置型引導，這里插播兩個例子：

A.例如Facebook開啟定位的引導，但用戶需要發送當前位置的時候，應用會彈出圖中的引導形式，告訴用戶開啟定位的作用，用戶在這種使用場景下會很樂意開啟定位，從而提高了開啟定位的轉換率，又不會覺得這個引導影響了自己的體驗。

B.比如Google搜索中，在用戶進行拖動操作的時候，頂部的狀態欄變成了一句溫馨的提示，非但不打擾用戶，反而有一定幫助，用戶會覺得很貼心。

2.認識引導頁存在問題，避免走錯方向

隨著訪客的審美疲勞，頻繁出現的引導頁已經失去了對引導頁的新鮮感和喜愛感。要麼就是過多展示沒有實際功效的內容作為噱頭，而且這個噱頭並沒有吸引足夠的目光。在很多情況下卻起到了相反的效果。

畢竟首頁作為引流的窗口重要性顯而易見，引導頁前置需要訪客花時間等待主頁面的啟動，如果是一個體積過大時間過長的引導頁，或是引導頁上面的「skip」按鈕不夠明顯，很可能導致部分訪客流失，之前也講到，技術原因造成的訪問延時，引導頁能夠起到緩解用戶情緒的作用，如果是引導頁的不正確使用造成的訪客流失，那就是引導頁乾的壞事。

3.把控引導內容

心理學上發現的7±2效應，一個人的短時記憶至少能回憶出5個字，最多回憶9個，即7±2個。因此展示的文案要控制在9個字以內，超過後用戶容易遺忘、出現記憶偏差。如果表達起來困難，可以輔助一小段文字進行解釋或補充。因此在最終文案的確定上，要突出重點，多餘的文字盡可能地進行刪減。如果文案刪減後字數還是過多，因考慮對文字進行分層，通過空格或逗號或換行的方式進行視覺優化。

精準貼切的文案也十分重要，將專業的術語轉換成用戶聽得懂的語言。尤其對於通過照片來表現主題的引導頁設計，文案與照片的吻合度，直接影響到情感傳達的效果。

建議將引導頁採用純色簡單直接，盡量和主界面構架形式一直，讓用戶有快的感覺，有些工具型應用的引導頁單屏滾動多在0.5秒內，眼睛一睜一閉，引導頁就過去了。

如果應用功能主要是在橫屏的情況下完成，建議引導頁以橫屏方式呈現，以引導用戶提前切換手持設備姿勢，快速進入到你的應用界面中。

4.用戶引導規范，制定符合自己產品特性

每個移動應用都有一套自己的用戶引導規范，在制定用戶引導規范的時候。

用戶引導規范的指定可以按照不同的形式進行指定，一種是從用戶引導的樣式角度出發，把產品涉及到的各種用戶引導樣式一一羅列出來，並說明每種引導樣式的適用范圍、觸發機制以及消除機制等。這種形式的優點是各種引導樣式結構清晰，一目瞭然。另一種形式是從產品功能的角度出發，由於產品每個功能的重要程度和優先順序不同，對應的需要突出強調的程度也不一樣，所以將用戶引導樣式分為強中弱三大類，對於產品主要功能，優先順序很高的採用強引導樣式，對於次要功能，優先順序稍差的採用適中的引導樣式，對於輔助功能，優先順序最低的採用弱的引導樣式。同時強中弱三大類裡面又分別包括幾種引導樣式。這種形式的優點是從產品角度出發，根據功能的重要程度的優先順序選擇對應的引導樣式，方便快捷。

5.場景模擬，保證用戶引導的有效性，減少干擾，提升用戶體驗

用戶在使用產品的時候都是有一定的使用場景的，根據用戶的使用場景觸發響應的用戶引導，用戶引導在使用過程中彈出時是用戶意想不到的，很有可能打擾了用戶使用的流暢性，因為這是用戶沒有預期出現的東西，在一定程度上有驚慌失錯感，保證在用戶需要的時候彈出最符合用戶體驗，也是用戶最願意接受的時候。這樣的出現既不會特別突兀，不至於弄的用戶不知所措，又能在響應的場景下幫助到用戶。

6.避免引導頁鋪天蓋地的在任何類型的APP上引用

(信息類應用是一個內容為王的地方，尤其是被信息內容充滿的應用和注重效率的工具應用，比如說搜索應用，不斷追求信息以一種更快速更詳盡多方式呈現給用戶，所以才會有rss,基於AJAX技術的頁面布局。任何一些阻礙用戶高效獲取信息的細節都將導致用戶流失，而引導頁就是頭號殺手。

7.視覺聚焦

在單個引導頁中，信息不宜過多，只闡述一個目的，所有元素都圍繞這個目的進行展開。視覺聚焦包括兩部分，一是文案的處理，要注意層次，主標題與副標題要形成對比;二是引導頁中的界面、場景、文案具象化元素，要有一個視覺聚焦點，多個視覺元素的排布採用中心擴散的方式，聚焦點的視覺面積最大，同時與擴散的元素拉開對比。這樣用戶能清晰地看到核心文案信息與文案對應的視覺表現元素。同時結合視線流動的規律，從上到下，從左到右，從大到小。因此可以根據這個視線流的規律來進行引導頁的設計。

9.著建特色，從競品中凸顯差異化

之前對於表現方式的歸類已經講到了動畫及頁面切換方式，如果增加了頁面動效，利用動效，包括放大、縮小、平移、滾動、彈跳，表現形式更加多樣化，會讓引導頁更有趣，注意力更為集中。

8、tips是什麼意思

1、tips（小費），源自於18世紀的英國，是to insure prompt service（保證立刻服務）的首寫字母縮略詞。付小費的風氣在英美國家的服務行業中十分流行，因此小費是服務人員的正當合法收入。

2、在電腦方面TIPS有提示的意思：「貼士」是英語「Tips」的音譯詞，用作名詞，是指「供參考的資料」或者「提醒、提示別人的信息」。

3、TIPS是Thermally Inced Phase Separation的簡稱，中文意思是「熱致相分離」。它的工藝過程及原理是在聚合物的熔點以上，將聚合物溶於高沸點，低揮發性的溶劑（又稱稀釋劑）中，形成均相溶液。然後降溫冷卻。

(8)網頁設計tips擴展資料：

雙語例句：

It shows how to prepare a CV, and gives tips on applying for jobs.

它說明了如何准備簡歷，並就如何申請職位提了些建議。

I had pins and needles in the tips of my fingers.

我的指尖有針刺的感覺。

The Head Porter was keeping all the tips.

行李員領班扣留了所有人的小費。

In addition to my weekly wage, I got a lot of tips.

除了每周的薪水外，我還能得到不少小費。

9、網頁製作的提示框顏色更改問題

四種提示框代碼
<head>
<title>圖像效果演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
/*
舜子製作
Made by PuterJam
*/
//--初始化變數--
var rT=true;//允許圖像過渡
var bT=true;//允許圖像淡入淡出
var tw=150;//提示框寬度
var endaction=false;//結束動畫

var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // hide
{
if(ns4)
{
toolTipSTYLE.visibility = "hidden";
}
else
{
//--圖象過渡，淡出處理--
if (!endaction) {toolTipSTYLE.display = "none";}
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
if (rT){
if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
toolTipSTYLE.display = "none";}
}
if (bT){
if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
toolTipSTYLE.display = "none";}
}
if (!rT && !bT) toolTipSTYLE.display = "none";
//----------------------
}
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#eeeeee";
var content =
@#<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="@# + fg + @#" class="trans_msg"><td>@# +
@#<table border="0" cellspacing="0" cellpadding="3" bgcolor="@# + bg +
@#"><td width=@# + tw + @#><font face="Arial" color="@# + fg +
@#" size="-2">@# + msg +
@# \;</font></td></table></td></table>@#;

if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display=@#block@#
}
if(ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display=@#block@#
//--圖象過渡，淡入處理--
var cssopaction=document.all("msg1").filters[0].opacity
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=cssopaction;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
//----------------------
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}

</script>
<style type="text/css">

</style>
</head>
<script>
</script>
<body>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<p>
<script>initToolTips()</script>
</p>
<p><font face="Arial"><a href="#" onMouseOver="toolTip(@#歡迎訪問Blyesky的blog<br>希望你喜歡這里<br>^_^@#)" onMouseOut="toolTip()">效果1</a></font>
<font face="Arial"> <a href="#" onMouseOver="toolTip(@#你要嗎，好好用的哦真的@#, @##FFFF00@#, @#red@#)" onMouseOut="toolTip()">效果2</a></font>
<font face="Arial"> <a href="#" onMouseOver="toolTip(@#這是個好東東<br>你說呢<br>哈哈@#, @##FFFF00@#, @#orange@#)" onMouseOut="toolTip()">效果3</a></font>
<font face="Arial"> <a href="#" onMouseOver="toolTip(@#<marquee>跑啊!!跑</marquee>@#, @##FFFF00@#, @#orange@#)" onMouseOut="toolTip()">效果4</a></font>
</p>
</body>

導航:首頁 > 萬維百科 > 網頁設計tips

網頁設計tips

與網頁設計tips相關的知識