当前位置:首页 » 网页前端 » web按钮设计
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web按钮设计

发布时间: 2022-07-31 05:36:33

1. web前端入门,导航栏右侧放什么按钮合适

要看是企业站还是电商网站每个网站不同,设计规划也不同,这是属于UI设计师的工作
按钮的话放什么按钮都可以主要还是看要什么效果
按钮直接用<buttom></buttom>就可以做
链接用<a></a>

2. 如何设置web窗体中的默认按钮

web窗体中button默认生成的html控件为input type="submit" /,即提交表单按钮,不论button是否编写事件,客户端均会与服务器产生交互,所以会有页面重载的情况。不想设置为提交按钮,只需把button属性UseSubmitBehavior修改为False即可,这样最终生成的html控件会变成input type="button" / 如果不行,设置button的onClientClick属性为"javascript:return;"则按钮不再响应任何事件

3. 怎么设计WEB登录页面,让页面不平庸

1,先分析网站的行业的性质。
2,根据行业设定主色调。
3,多采用些透明度。大气美观。

4. javaweb怎么为按钮设置按键

你的按钮绑定了ok() 方法
那么在<javaScript>里 建立 function ok(){
<% 你的按钮代码 %>
}

试试

5. 网页的那个按钮怎么做

那个Button是控件,
你可以添加HTMLbutton控件,<input type="button" id="btn" value="button"/>

或者服务器控件
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

或者你可以通过一些网页编辑软件DW,或者微软的visual studio在设计模式下直接拖到你想要的位置

下面是一些参考

asp.net之所以现在开发方便和快捷,关键是它有一组强大的控件库,包括web服务器控件,web用户控件,web自定义控件,html服务器控件和html控件等。这里我主要说说html控件、html服务器控件和web服务器控件的区别。

1、html控件:就是我们通常的说的html语言标记,这些语言标记在已往的静态页面和其他网页里存在,不能在服务器端控制的,只能在客户端通过javascript和vbscript等程序语言来控制。<input type="button" id="btn" value="button"/>

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件.它们的注意区别是运行方式不同,html控件运行在客户端,而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASP.NET 网页执行时,会检查标注有无runat 属性,如果标注没有设定,那么Html标注就会被视为符串,并被送到字符串流等待送到客户端,客户端的浏览器会对其进行解释;如果Html标注有设定runat="server" 属性,Page 对象会将该控件放入控制器,服务器端的代码就能对其进行控制,等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注,然后当成字符串流发送到客户端进行解释<input id="Button" type="button" value="button" runat="server" />

3、web服务器控件:也称asp.net服务器控件,是Web Form编程的基本元素,也是asp.net所特有的。它会按照client的情况产生一个或者多个html控件,而不是直接描述html元素。如: <asp:Button ID="Button2" runat="server" Text="Button"/>那么它和html服务器控件有什么区别呢?参照其他网页的资料看法如下:
1)、Asp.net服务器控件提供更加统一的编程接口,如每个Asp.net服务器控件都有Text属性。
2)、隐藏客户端的不同,这样程序员可以把更多的精力放在业务上,而不用去考虑客户端的浏览器是ie还是firefox,或者是移动设备。
3)、Asp.net服务器控件可以保存状态到ViewState里,这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。
4)、事件处理模型不同,Html标注和Html服务器控件的事件处理都是在客户端的页面上,而Asp.net服务器控件则是在服务器上,举例来说:
<input id="Button4" type="button" value="button" runat="server"/>是Html服务器控件,此时我们点击此按钮,页面不会回传到服务器端,原因是我们没有为其定义鼠标点击事件。
<input id="Button4" type="button" value="button" runat="server" onserverclick="test" />我们为Html服务器控件添加了一个onserverclick事件,点击此按钮页面会发回服务器端,并执行test(object sender, EventArgs e)方法。
<asp:Button ID="Button2" runat="server" Text="Button" />是Asp.net服务器控件,并且我们没有为其定义click,但是我们点击时,页面也会发回到服务器端。
由此可见:Html标注和Html服务器控件的事件是由页面来触发的,而Asp.net服务器控件则是由页面把Form发回到服务器端,由服务器来处理。

4、下面我就结合我自己的测试来说明问题:
这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数,注意是用于是否发送到服务器端的,这里就不展示脚本代码了。
<input runat="server" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

展现出来的html代码如下:
<input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" / >
<input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />
可以看出以下几点:
1、当控件属性中有runat="server"时,生成的html控件时name和id发生的变化(.net Framework)。
2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。
3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)如:
<input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>直接放到form标记中生成的html代码
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
i f (!theForm.onsubmit (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" />
<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

这里有可以看出几点:
1、当html服务器控件在服务器端添加了服务器事件后生成的代码变为:onclick="_doPostBack()",实际上是调用脚本把整个窗体提交到服务器(如果没有添件服务器事件而只是添加了runat="server"是不会发送到服务器端的)这里注意如果要在html服务器控件中添加一个客户端事件如上面的 <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />变成 <input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" />那样生成的html代码变成 <input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this);_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this),_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。在我的一个项目中需要对于控件进行区分总结,我在网上找了找加上自己的实际测试总结如下:

asp.net之所以现在开发方便和快捷,关键是它有一组强大的控件库,包括web服务器控件,web用户控件,web自定义控件,html服务器控件和html控件等。这里我主要说说html控件、html服务器控件和web服务器控件的区别。

1、html控件:就是我们通常的说的html语言标记,这些语言标记在已往的静态页面和其他网页里存在,不能在服务器端控制的,只能在客户端通过javascript和vbscript等程序语言来控制。<input type="button" id="btn" value="button"/>

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件.它们的注意区别是运行方式不同,html控件运行在客户端,而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASP.NET 网页执行时,会检查标注有无runat 属性,如果标注没有设定,那么Html标注就会被视为字符串,并被送到字符串流等待送到客户端,客户端的浏览器会对其进行解释;如果Html标注有设定runat="server" 属性,Page 对象会将该控件放入控制器,服务器端的代码就能对其进行控制,等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注,然后当成字符串流发送到客户端进行解释<input id="Button" type="button" value="button" runat="server" />
3、web服务器控件:也称asp.net服务器控件,是Web Form编程的基本元素,也是asp.net所特有的。它会按照client的情况产生一个或者多个html控件,而不是直接描述html元素。如: <asp:Button ID="Button2" runat="server" Text="Button"/>那么它和html服务器控件有什么区别呢?参照其他网页的资料看法如下:
1)、 Asp.net服务器控件提供更加统一的编程接口,如每个Asp.net服务器控件都有Text属性。
2)、 隐藏客户端的不同,这样程序员可以把更多的精力放在业务上,而不用去考虑客户端的浏览器是ie还是firefox,或者是移动设备。
3)、 Asp.net服务器控件可以保存状态到ViewState里,这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。
4)、 事件处理模型不同,Html标注和Html服务器控件的事件处理都是在客户端的页面上,而Asp.net服务器控件则是在服务器上,举例来说:
<input id="Button4" type="button" value="button" runat="server"/>是Html服务器控件,此时我们点击此按钮,页面不会回传到服务器端,原因是我们没有为其定义鼠标点击事件。
<input id="Button4" type="button" value="button" runat="server" onserverclick="test" />我们为Html服务器控件添加了一个onserverclick事件,点击此按钮页面会发回服务器端,并执行test(object sender, EventArgs e)方法。
<asp:Button ID="Button2" runat="server" Text="Button" />是Asp.net服务器控件,并且我们没有为其定义click,但是我们点击时,页面也会发回到服务器端。
由此可见:Html标注和Html服务器控件的事件是由页面来触发的,而Asp.net服务器控件则是由页面把Form发回到服务器端,由服务器来处理。

4、下面我就结合我自己的测试来说明问题:
这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数,注意是用于是否发送到服务器端的,这里就不展示脚本代码了。
<input runat="server" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

展现出来的html代码如下:
<input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" / >
<input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />

可以看出以下几点:
1、当控件属性中有runat="server"时,生成的html控件时name和id发生的变化(.net Framework)。
2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。
3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)
如: <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>直接放到form标记中生成的html代码
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" />
<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

这里有可以看出几点:
1、当html服务器控件在服务器端添加了服务器事件后生成的代码变为:onclick="_doPostBack()",实际上是调用脚本把整个窗体提交到服务器(如果没有添件服务器事件而只是添加了runat="server"是不会发送到服务器端的)这里注意如果要在html服务器控件中添加一个客户端事件如上面的 <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />
变成 <input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" />
那样生成的html代码变成 <input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this);_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this),_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。

2、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit".然而服务器事件的onclick我想是通过发送到服务器端执行的。

3、LinkButton不定义onclick事件,它会自动的生成下面代码发送到服务器端。 href="javascript:__doPostBack('LinkButton1',' ')"

4、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit".然而服务器事件的onclick我想是通过发送到服务器端执行的。

6. 网页制作怎么做按钮,最好带步骤。谢谢

你到“WEB标准之路”之路上去看看吧,有详细的教程,教你用"css雪碧”技术,用美丽的背景图片美化按钮的。还有按钮的样式下载,非常漂亮,直接可以用的。那是个非常实用的网站,不管是对初学者,还是熟手,都很有帮助的。但是前提是你要有一定的HTML基础才看的懂的。

7. 什么是web网站设计

首先web是网站的一个程序,是一个文件夹,每个网站必不可少的一个文件,这个文件里面存储的东西主要就是网站的代码,因为你没有在长春世纪学过,所以理解可能费点劲,不过我还是挺愿意为你解答的,以后有什么网络问题就找我

8. web中如何改变button的形状

2种办法:
1. 使用Map
可以通过HTML的MAP标签,把图片上的任意形状规定为按钮。
2. 对按钮使用样式
<input type="button" value="aaa" alt="" style="background-image:url('aaa.jpg')" />

9. web 如何制作按钮开关

可以使用T'触发器(有的地方也叫CP计数器)来做,这是最常见的方式,具体电路可以使用CD4013或CD4027,都可以做出来。上学的时候数字电路书上就有。 没有课本了的话,找一个4013的文档,里边有。这有多种办法,要看你机器总开关是用的什么开关,如果是用的主令按钮,则可直接加一个微型继电器由主令按钮直接启动,而将电脑的启动按钮引线分别接微型继电器的一对常开触头即可。因为实际按钮是硬接线,按下去就接通,释放就断开,这个很稳定,但是屏与PLC之间建立的连接是靠通讯协议进行的,是软的,通讯机制就限定了不建议使用点动按钮,如果按照“寒音”的方式去做,如果操作过快,有可能会造成按下去为1,松开不为0的情况,如何使操作设备启停,这样会很危险,建议:.用两个按钮,一个置位,另一个复位;2.或者用开关,点一下为1,再点一下为0。单击“绘图”工具栏中的“自选图形”按钮,在弹出的选项列表中的“基本图形”或“箭头总汇”下单击一种合适的图形,并在灯片中的适当位置中拖画中一个图形,再右击画出的这个图形,在弹出的快单中选择“添加文字”,并输入“PLAY”,并设置好图形填充色和线条色及文字颜色,将其作为播放按钮;同法再制作一个“STOP”(暂停)按钮。第三步:利用触发器制作播放效果按钮鼠标右键单击幻灯片中插入的音视频(频)文件图标(插入的音视频文件的图标为一播放画面图,插入的音频文件为一小喇叭图标),在弹出的快捷菜单中点击选择“自定义动画”命令或左键单击选定幻灯片中插入的音视。

10. 对于UI界面中的按钮样式该如何去设计天津UI设计培训

按钮设计是UI设计工作中必不可少的环节,在设计按钮时要遵循以下原则:
1.匹配的品牌
你的按钮配合网页的语境方式,这很重要。这可能意味着符合一个网站的整体风格,从某种形式的品牌指导方针或标志图形的方式等也许有一些突出的形状,你可以你挑选需要的纹理或设计风格。也许一个标志有一个圆形的方面,你可以拿起你这个按钮或其他潜在的形状进行比较选择。如果一个接口主要采用平面色彩。如果你能利用这个机会,通过接口,使用适当的形状,实验效果,着色或其他形式的点缀来延伸品牌
2.匹配关系
用photoshop打开psd格式的UI元素,你很容易实现梯度,阴影,斜面等效果。但是它是否是正确的选择,这不仅要符合网站品牌,而且也是整个界面中的一个按钮,它可能是一个一个需要移动的应用程序。所以你需要在网站上做点不同的东西和你的按钮或行动进行呼应。
3.有足够的对比度
有很多界面设计的灵感来自苹果IOS,特别是现在有很多的用户界面元素的PSD存在,我们可以在用户界面上使用一些小按钮等元素,发挥他们潜在的重要力量。你可以尝试使用不同的颜色,字体大小,空格等以确保你的按钮从中脱颖而出,展现粗界面的视觉重量。
4.考虑圆角或美观的按钮
根据以上描述,如果有UI元素在你设计的区域,考虑使用圆角按钮或者其他形状的稍微变化。这可以产生对比以确保呼应你下面的重要行动,同时也突出这些按钮的价值。
5.强调辅助用户界面元素
如果你想成为一个IOS灵感风格的设计师或者采用网上寻找的psd格式的UI元素,那么你的UI元素将主要以圆角矩形形状为主。
例如,你的选择菜单,分段控制,自定义菜单可能都是相同的圆角形状,但是用更少的阴影,边界,锥,梯度或其他影响可以帮助减少他们的丰富性,这样反过来促进了按钮样式。
6.颜色匹配形成边界
我们可以看到按钮对网站界面可形成某种形式的边界。一般来说,如果你的按钮是较暗的背景,它使用一个黑暗的通用按钮颜色。如果你坚持使用前和使用它在一个黑暗的背景下,你发现再前者背景下它可以使按钮边有点脏,后者背景下可以让你的按钮很流行。我认为这是在处理Web设计边界的一般设计原则。
7.小心模糊的影子
如果一个元素使用比其背景再黑暗的阴影应该更加巧妙。类似的颜色匹配的边界,我非常认为这是一个适用于所有用户界面元素设计的一般原则。
8.小细节可以给你的启示
当用户点击时,一些小细节比如一个箭头可以给一些动作一个小的提示。
例如,一个箭头在按钮上的文本指向右可能给用户某种运动或离开页面的提示。向下箭头可能表明一些内容将逐步披露,或者某种菜单将放开更多的内容。
9.考虑一级,二级和三级样式
如果你正在设计一个接口,它有很多动作和功能上都显示它需要建立一些视觉语言。
考虑保留最强大和最大胆的色彩作为您的主要按钮的颜色。然后使用强度或饱和度逐渐降低的色彩,阴影,考虑减少尺寸,空格,以及点缀的文本尺寸和水平的进一步降低来区分众多按钮的视觉重量。
10.让你的按钮总是处于反馈状态
在设计工作结束后,你需要确保你的按钮设计能迅速在上下文中提供给用户所需的足够的反馈。在现实世界中用户通过按钮的各种状态使用它们,这是用户使用按钮工作的心理模型。阴影,边界和梯度等可以给用户一些简单的反馈。