我在JSP页面上设置了两个按钮:
<input type="submit" value="登 录" style="width:100px;" class="button_blue"/>
<input type="button" value="注 册" style="width:100px;" class="button_green" onclick="javascript:location.href='register.jsp'"/>
采用了外联式的css,css文件中的配置如下:
.button_blue
{
display:inline-block;
float:left;
height:41px;border-radius:4px;
background:#2795dc;border:none;cursor:pointer;
border-bottom:3px solid #0078b3;*border-bottom:none;
color:#fff;
font-size:16px;padding:0 10px;*width:140px;
text-align:center;outline:none;font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif;
}
input.button_blue:hover
{
background:#0081c1;
border-bottom:3px solid #006698;*border-bottom:none;
color:#fff;
text-decoration:none;
}
.button_green
{
display:inline-block;
float:left;
height:41px;border-radius:4px;
background:#aef055;border:none;cursor:pointer;
border-bottom:3px solid #46a60d;*border-bottom:none;
color:#fff;
font-size:16px;padding:0 10px;*width:140px;
text-align:center;outline:none;font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif;
}
input.button_green:hover
{
background:#46a60d;
border-bottom:3px solid #40741d;*border-bottom:none;
color:#fff;
text-decoration:none;
}
但是运行效果却是这样
登录按钮有效果,但注册按钮没有应用到css中的样式,但当我将注册按钮的样式直接定义在head部分的标签中时,效果是可以显示的,请问为什么会出现这种情况?</p>
根据你的描述分析 应该是这个页面引用了 多个css文件 而其他css文件也有 .button_green 顶掉了你写的这段代码。
当你把这个样式 放到页面的 head 部分中后 这段css 优先级变高 所以又好用了。
你可以用 谷歌浏览器调试一下 看看是那个css文件顶掉的你的样式 再尝试用 关键字 !important 强制把某些css 样式优先级调成最高
我想问一下,将submit换成button之后,效果会怎么样呢?
用f12调试工具一看就看出问题了
因为你的css样式没有被加载出来,你可以去firefox的firebug看一下,肯定报错了