Question

eclipse中jsp引用css实现button 的变化

这是eclipse代码。

实际效果。我想让button变成下面图片button的样子

css的位置在第一个图片里有。css代码是没问题的，我直接把实现最下面图片的css复制过来的。





Answer 1

css路径不对，导致无法更改样式。
　第一种情况：
　　一般在学习时，一个tomcat上都跑多个工程，用工程名来区分。
　　如下:
　　<script src="<%=request.getContextPath() %> /home/test.js"></script>

　　第二种情况：
　　访问JSP文件时，用相对路径引入JS，CSS文件是OK的。　　
　　真实项目中, 一个tomcat上要是也跑了多个工程, 并用IP来区分。
　　url 是这样的: http://localhost/home/index.jsp 注意这里,是直接访问JSP文件,不是servlet,不是struts .
　　test2.js 与index.jsp 放在同一文件夹下
　　下面用相对路径来引入 JS文件 :
　　<script src=test2.js></script>　　
　　index.jsp可以找到test2.js文件

Answer 2

给你的button 一个class  然后再css 中去描述这个class

jsp:

<button class="mybtn">这是一个button</button>

css:

.mybtn{
   display:inline-block;
   -webkit-box-sizing:content-box;
   -moz-box-sizing:content-box;
   box-sizing:content-box;padding:0 12px;
   height:26px;
   line-height:26px;
   border:1px solid #2d88bf;
   border-radius:5px;
   font-size:12px;
   letter-spacing:1px;
   text-align:center;
   vertical-align:middle;
   cursor:pointer;
   word-wrap:normal;
   white-space:nowrap;
   margin:4px 10px;
   *margin-top:-8px;
   border-color:#d0d0d0;
   text-shadow:0 1px rgba(255,255,255,0.8);
   background:-webkit-gradient(linear,0% 0%,0% 100%,from(#fefefe),to(#e7e7e7));
   background:-webkit-linear-gradient(#fefefe,#e7e7e7);
   background:-moz-linear-gradient(#fefefe,#e7e7e7);
   background:-ms-linear-gradient(#fefefe,#e7e7e7);
   background:linear-gradient(#fefefe,#e7e7e7);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#fcfcfc',GradientType=0 );
}

追问

不是，我的css已经写好了，不需要在写，就是引用的问题。

这是我css的代码，第三张图不是已经实现了么。现在我是要在Eclipse里实现而已。原来是直接用txt写的。

追答

在eclipse里面实现是什么意思...

追问

看看我第一个图片中Eclipse写的有什么问题吧~~

追答

给 input 给个class

Answer 3

CSS的引用时路径也要和例子里的层级一致.
就是说嵌套的div什么的层数也要和你按钮的样式所嵌套的层数一致。

Answer 4

写绝对路径
<%
String contextPath = request.getContextPath();
%>
<link href="<%=contextPath%>/styles/v1.0.css" rel="stylesheet"
type="text/css" />

Answer 5

<link rel="stylesheet" type="text/css" href="。。.css" />href里面是你css文件相对与jsp页面的路径，或者绝对路径

追问

不行啊，是这样写的

追答

那就是你路径写的有问题啊 还有你的button 加上class属性 值为homebutton 把你jsp 跟css文件的路径贴出来

Answer 6

你input标签的id值重复了。会不会是用的类选择器，input标签没有class属性。。。。。。。。。

追问

id重复那个没问题，我没有函数引用这两个button，关键是下边那个。label标签可以用class属性啊

追答

你不是改button的样式？怎么不引用？