HTML+css及常用网页设计技巧
1.点击某个按钮跳转到该页面
这个时候就不可以简单的在button，submit按钮中添加标签<a>属性了，具体使用如下：
如果我们要给button 按钮增加跳转事件我们可以在它的确onclick事件上点击跳转js来实现，下面我来给大家介绍一些常用的方法。
这样的效果可以：onclick="window.location=’新页面’" 来实现。
在原来的窗体中直接跳转用
如果要在点击按钮提交时验证输入款是否填入了内容，要怎么做呢？当用户名输入或者其它的为空的时候，点击按钮不提交，可以按下列的方法做。
JS跳转页面参考代码
2.如何设置网页自动刷新<input type=button value=刷新 onclick="history.go(0)">
<input type=button value=刷新 onclick="location.reload()">
<input type=button value=刷新 onclick="location=location">
<input type=button value=刷新 onclick="location.assign(location)">
<input type=button value=刷新 onclick="document.execCommand('Refresh')">
<input type=button value=刷新 onclick="window.navigate(location)">
<input type=button value=刷新 onclick="location.replace(location)">
<input type=button value=刷新 onclick="window.open('自身的文件','_self')">
<input type=button value=刷新 onClick=document.all.WebBrowser.ExecWB(22,1)>
1)
<meta http-equiv="refresh"content="10;url=跳转的页面">
10表示间隔10秒刷新一次
2)
<script language=’’javascript’’>
window.location.reload(true);
</script>
如果是你要刷新某一个iframe就把window给换成frame的名字或ID号
3)
<script language=’’javascript’’>
window.navigate("本页面url");
</script>
4>
function abc()
{
window.location.href="/blog/window.location.href";
setTimeout("abc()",10000);
}
刷新本页：
Response.Write("<script language=javascript>window.location.href=window.location.href;</script>")
刷新父页：
Response.Write("<script language=javascript>opener.location.href=opener.location.href;</script>")
转到指定页:
Response.Write("<script language=javascript>window.location.href=’yourpage.aspx’;</script>")
刷新页面实现方式总结(HTML,ASP,JS)
’by aloxy
定时刷新：
1，<script>setTimeout("location.href=’url’",2000)</script>
说明：url是要刷新的页面URL地址
2000是等待时间=2秒，
2，<meta name="Refresh" content="n;url">
说明：
n is the number of seconds to wait before loading the specified URL.
url is an absolute URL to be loaded.
n,是等待的时间，以秒为单位
url是要刷新的页面URL地址
3，<%response.redirect url%>
说明：一般用一个url参数或者表单传值判断是否发生某个操作，然后利用response.redirect 刷新。
4，刷新框架页
〈script language=javascript>top.leftFrm.location.reload();parent.frmTop.location.reload();</script〉
弹出窗体后再刷新的问题
Response.Write("<script>window.showModalDialog(’../OA/SPCL.aspx’,window,’dialogHeight: 300px; dialogWidth: 427px; dialogTop: 200px; dialogLeft: 133px’)</script>");//open
Response.Write("<script>document.location=document.location;</script>");
在子窗体页面代码head中加入<base target="_self"/>
刷新的内容加在 if (!IsPostBack) 中
在框架页中右面刷新左面
//刷新框架页左半部分
Response.Write("<script language=javascript>");
Response.Write("parent.left.location.href=’PayDetailManage_Left.aspx’");
Response.Write("</script>");
页面定时刷新功能实现
有三种方法：
1，在html中设置：
<title>xxxxx</title>之后加入下面这一行即可！
定时刷新：<META HTTP-EQUIV="Refresh" content="10">
10代表刷新间隔,单位为秒
2.jsp
<% response.setHeader("refresh","1"); %>
每一秒刷新一次
3.使用javascript:
<script language="javascript">
setTimeout("self.location.reload();",1000);
<script>
一秒一次
页面自动跳转：
1，在html中设置：
<title>xxxxx</title>之后加入下面这一行即可！
定时跳转并刷新：<meta http-equiv="refresh" content="20;url=http://自己的URL">,
其中20指隔20秒后跳转到http://自己的URL 页面。
点击按钮提交表单后刷新上级窗口
A窗口打开B窗口
然后在B里面提交数据至C窗口
最后要刷新A窗口
并且关闭B窗口
几个javascript函数
//第一个自动关闭窗口
<script language="javascript">
<!--
function clock(){i=i-1
document.title="本窗口将在"+i+"秒后自动关闭!";
if(i>0)setTimeout("clock();",1000);
else self.close();}
var i=2
clock();
//-->
</script>
//第二个刷新父页面的函数
<script language="javascript">
opener.location.reload();
</script>
//第三个打开窗口
<script language="javascript">
function show(mylink,mytitle,width,height)
{mailwin=window.open(mylink,mytitle,’top=350,left=460,width=’+width+’,height=’+height+’,scrollbars=no’)}
</script>
3.如何强制要求文本框中输入的内容只能是数字
1、直接在文本域中写入onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"
2、另外写函数
<script>
var str="0123456789";
function press()
{
var str1=document.all.fundsname.value;
for(int i=0; i<str1.length; i++){
if (str.indexOf(str1)==-1){
alert("只能输入数字！");
document.all.b1.value="";
return false; } }
}
</script>
3、以上两种形式不能防止中文的输入，防止中文可以采用如下的形式
4.HTML Button.onclick 事件汇总
<input onclick="document.all.WebBrowser.ExecWB(1,1)" type="button" value="打开" name="Button1">
<input onclick="document.all.WebBrowser.ExecWB(4,1)" type="button" value="另存为" name="Button2">
<input onclick="document.all.WebBrowser.ExecWB(10,1)" type="button" value="属性" name="Button3">
<input onclick="document.all.WebBrowser.ExecWB(6,1)" type="button" value="打印" name="Button">
<input onclick="document.all.WebBrowser.ExecWB(8,1)" type="button" value="页面设置" name="Button4">
<input onclick="window.location.reload()" type="button" value="刷新" name="refresh">
<input onClick="window.external.ImportExportFavorites(true,'');" type="button" value="导入收藏夹" name="Button5">
<input onClick="window.external.ImportExportFavorites(false,'');" type="button" value="导出收藏夹" name="Button32">
<input onClick="window.external.AddFavorite(location.href, document.title)" type="button" value="加入收藏夹" name="Button22">
<input onClick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type="button" value="整理收藏夹" name="Submit2">
<input onclick='window.location="view-source:" + window.location.href' type="button" value="查看源文件" name="Button7">
<input onClick="window.external.ShowBrowserUI('LanguageDialog', null)" type="button" value="语言设置" name="Button6">
<input onClick="document.execCommand('Cut')" type="button" value="剪切">
<input onClick="document.execCommand('Copy')" type="button" value="拷贝">
<input onClick="document.execCommand('Paste')" type="button" value="粘贴">
<input onClick="document.execCommand('Undo')" type="button" value="撤消">
<input onClick="document.execCommand('Delete')" type="button" value="删除">
<input onClick="document.execCommand('Bold')" type="button" value="黑体">
<input onClick="document.execCommand('Italic')" type="button" value="斜体">
<input onClick="document.execCommand('Underline')" type="button" value="下划线">
<input onClick="document.execCommand('stop')" type="button" value="停止">
<input onClick="document.execCommand('SaveAs')" type="button" value="保存">
<input onClick="document.execCommand('Saveas',false,'c:\\Autorun.inf')" type="button" value="另存为">
<input onClick="document.execCommand('FontName',false,fn)" type="button" value="字体">
<input onClick="document.execCommand('FontSize',false,fs)" type="button" value="字体大小">
<input onClick="document.execCommand('refresh',false,0)" type="button" value="刷新">
<input onclick="window.location.reload()" type="button" value="刷新">
<input onclick="history.go(1)" type="button" value="前进">
<input onclick="history.go(-1)" type="button" value="后退">
<input onclick="history.forward()" type="button" value="前进">
<input onclick="history.back()" type="button" value="后退">
<input type="button" value="弹出固定窗口" onClick="javascript:window.open('#','','scrollbars=yes,width=600,height=200')" >
<input type="button" value="没有提示关闭" onclick="window.opener=null;window.close();" />
<input type="button" value="点击进入另一页面" onclick="window.location.href=''" />
<input type="button" value="返回上一页" onclick="javascript:history.go(-1);" />
5使用css的时候，如何将导航栏设为居中
一开始使用的时候，导航栏都是默认靠右，代码如下：
<!DOCTYPE html>
<html>
<head>
<style >
.clear{clear:both;}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
</style>
</head>
<body align="center">
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
效果如下图：
非常难看，所以需要设置为居中，分别在style标签和ur标签里面加入代码：
<!DOCTYPE html>
<html>
<head>
<style >
.clear{clear:both;}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
</style>
</head>
<body align="center">
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
最终效果如下图：
下面具体介绍几种使标题栏居中的方法：
CSS导航菜单水平居中的多种方法：
- 方法1：display:inline-block
- 方法2：position:relative
- 方法3：display:table
- 方法4：display:inline-flex
- 方法5：width:fit-content / width:intrinsic
方法1：display:inline-block
这个方法比较简单，是将容器转成「display:inline-block」行内块级元素，然后就可以直接用「text-align:center」使其达到水平居中效果。
HTML代码：
这里我们需要一个div来包围这个导航菜单。
CSS代码：
给外面的div添加「text-align:center」，然后将菜单容器设成「display:inline-block」行内块级元素，菜单浮左「float:left」
这里浏览器兼容只能是IE8或更高版本，所以如果要兼容IE7的话，请加入以下代码
方法2：position:relative
这是使用「position:relative」定位方法来让元素水平居中，我不是很推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。
HTML代码：
CSS代码：
将定位div设为浮动，再定位「left:50%」,然后导航定位至「left:-50%」，这方法很有意思吧。可能表达不是很清楚，自己看代码吧^^
如果要兼容IE7，请添加以下样式：
方法3：display:table
如果你喜欢简洁的代码，哪么这个方法就非常适合你了。
HTML代码：
CSS代码：
浏览器兼容：这方法代码精简，但不支持IE7及以下版本……
方法4：display:inline-flex
有关flex layout的知识自己查下吧>_<
HTML代码：
CSS代码：
浏览器兼容：不支持IE7及以下版本的IE浏览器。
方法5：width:fit-content
HTML代码：
CSS代码：
浏览器兼容：这个兼容比较低，只支持Firefox或chrome、Opera 12这些较新的浏览器。