网页设计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相关的知识