HTML+css及常用网页设计技巧

1.点击某个按钮跳转到该页面

这个时候就不可以简单的在button，submit按钮中添加标签<a>属性了，具体使用如下：

如果我们要给button 按钮增加跳转事件我们可以在它的确onclick事件上点击跳转js来实现，下面我来给大家介绍一些常用的方法。
这样的效果可以：οnclick="window.location=’新页面’" 来实现。
在原来的窗体中直接跳转用

1. window.location.href="你所要跳转的页面";

复制代码

在新窗体中打开页面用：

1. window.open('你所要跳转的页面');
   
2. window.history.back(-1);返回上一页

复制代码

1. <input type="submit" name="Submit" value="同意" οnclick=window.open(http://www.111cn.net/)>

复制代码

如果要在点击按钮提交时验证输入款是否填入了内容，要怎么做呢？当用户名输入或者其它的为空的时候，点击按钮不提交，可以按下列的方法做。

1. <input type="submit" name="submit" οnclick="open()">
   
2. <script language=javascript>
   
3. fuction open(){
   
4. if(!document.form_name.username.value) {
   
5. alert("请输入用户名！"); document.form_name.username.focus(); return false;
   
6. }else document.form_name.action="aaa.htm";
   
7. }
   
8. </script>

复制代码

这样的话，当空值时，点击按钮还是不会跳转到另外的页面呢？这样就达到了效果了。

JS跳转页面参考代码

1. 第一种：
   
2. <script language="javascript" type="text/javascript">
   
3. window.location.href="login.jsp?backurl="+window.location.href;
   
4. </script>
   
5. 第二种：
   
6. <script language="javascript">
   
7. alert("返回");
   
8. window.history.back(-1);
   
9. </script>
   
10. 第三种：
    
11. <script language="javascript">
    
12. window.navigate("top.jsp");
    
13. </script>
    
14. 第四种：
    
15. <script language="JavaScript">
    
16. self.location=’top.htm’;
    
17. </script>
    
18. 第五种：
    
19. <script language="javascript">
    
20. alert("非法访问！");
    
21. top.location=’xx.jsp’;
    
22. </script>
    
23. ＝＝＝＝＝javascript中弹出选择框跳转到其他页面＝＝＝＝＝
    
24. <script language="javascript">
    
25. <!--
    
26. function logout()...{
    
27. if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{
    
28. window.location.href="logout.asp?act=logout"
    
29. }
    
30. }
    
31. -->
    
32. </script>
    
33. 
    
34. ＝＝＝＝＝javascript中弹出提示框跳转到其他页面＝＝＝＝＝
    
35. <script language="javascript">
    
36. <!--
    
37. function logout()...{
    
38. alert("你确定要注销身份吗？");
    
39. window.location.href="logout.asp?act=logout"
    
40. }
    
41. -->
    
42. </script>

复制代码

2.如何设置网页自动刷新

    <input type=button value=刷新 οnclick="history.go(0)">

    <input type=button value=刷新 οnclick="location.reload()">

    <input type=button value=刷新 οnclick="location=location">

    <input type=button value=刷新 οnclick="location.assign(location)">

    <input type=button value=刷新 οnclick="document.execCommand('Refresh')">

    <input type=button value=刷新 οnclick="window.navigate(location)">

    <input type=button value=刷新 οnclick="location.replace(location)">

    <input type=button value=刷新 οnclick="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、直接在文本域中写入οnkeypress="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、以上两种形式不能防止中文的输入，防止中文可以采用如下的形式

[html]  view plain copy print ?

1. function fun_submit(){  
2.         var strname = document.all.fundsname.value;  
3.         var strunit = document.all.fundsunit.value;  
4.         var strmoney = document.all.fundsmoney.value;  
5.         if(strname.length<=0||strunit.length<=0||strmoney.length<=0){  
6.             alert("信息输入不完整");  
7.              return;  
8.         }  
9.         var re = /^[0-9]+.?[0-9]*$/;   //判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/   
10.         if(!re.test(strmoney)){  
11.             alert("请输入数字");  
12.              return;  
13.         }else if(strmoney<=0){  
14.             alert("请输入大于0的数字");  
15.              return;  
16.         }  
17.         document.forms[0].action="servlet/AddFundsServlet";   
18.         document.forms[0].submit();  
19. }  

4.HTML Button.onclick 事件汇总

<input οnclick="document.all.WebBrowser.ExecWB(1,1)" type="button" value="打开" name="Button1">
<input οnclick="document.all.WebBrowser.ExecWB(4,1)" type="button" value="另存为" name="Button2">
<input οnclick="document.all.WebBrowser.ExecWB(10,1)" type="button" value="属性" name="Button3">
<input οnclick="document.all.WebBrowser.ExecWB(6,1)" type="button" value="打印" name="Button">
<input οnclick="document.all.WebBrowser.ExecWB(8,1)" type="button" value="页面设置" name="Button4">
<input οnclick="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 οnclick='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 οnclick="window.location.reload()" type="button" value="刷新">
<input οnclick="history.go(1)" type="button" value="前进">
<input οnclick="history.go(-1)" type="button" value="后退">
<input οnclick="history.forward()" type="button" value="前进">
<input οnclick="history.back()" type="button" value="后退">
<input type="button" value="弹出固定窗口" onClick="javascript:window.open('#','','scrollbars=yes,width=600,height=200')" > 
<input type="button" value="没有提示关闭" οnclick="window.opener=null;window.close();" />
<input type="button" value="点击进入另一页面" οnclick="window.location.href=''" />
<input type="button" value="返回上一页" οnclick="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来包围这个导航菜单。

<div class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</div>

CSS代码：

给外面的div添加「text-align:center」，然后将菜单容器设成「display:inline-block」行内块级元素，菜单浮左「float:left」

.navbar {
    text-align:center;
}
.navbar ul {
    display:inline-block;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

这里浏览器兼容只能是IE8或更高版本，所以如果要兼容IE7的话，请加入以下代码

.navbar ul {
    display:inline;
    zoom:1;
}

方法2：position:relative

这是使用「position:relative」定位方法来让元素水平居中，我不是很推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。

HTML代码：

<div class="navbar">
    <div>
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </div>
</div>

CSS代码：
将定位div设为浮动，再定位「left:50%」,然后导航定位至「left:-50%」，这方法很有意思吧。可能表达不是很清楚，自己看代码吧^^

.navbar {
    overflow:hidden;
}
.navbar > div {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

如果要兼容IE7，请添加以下样式：

.navbar {
    position:relative;
}

方法3：display:table

如果你喜欢简洁的代码，哪么这个方法就非常适合你了。

HTML代码：

<ul class="navbar">
    <li><a href="/">Home</a></li>
    …
</ul>

CSS代码：

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

浏览器兼容：这方法代码精简，但不支持IE7及以下版本……

方法4：display:inline-flex

有关flex layout的知识自己查下吧>_<

HTML代码：

<div class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</div>

CSS代码：

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

浏览器兼容：不支持IE7及以下版本的IE浏览器。

方法5：width:fit-content

HTML代码：

<div class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</div>

CSS代码：

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

浏览器兼容：这个兼容比较低，只支持Firefox或chrome、Opera 12这些较新的浏览器。