1.我导入的是本地图片作为背景,但是我点一下空白处(1问题影响不到的地方)就会刷新页面..我导入的是本地图片作为背景,但是我点一下空白处(1问题影响不到的地方)就会刷新页面.
2.我在一个按钮中放入了链接,并且设置了按钮的显示位置,然后就有很大一部分位置你不论点哪里都是点的这个链接.
3.我制作第二个按钮时,复制了第一个按钮的代码,把一些显示内容改了下,然后就发现这个按钮大概显示于第一个按钮下方的400px(我设置的是padding-top:400px)
有没有大神解决下的,如有低级错误,轻喷. :)
下面附上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>个人主页</title>
</head>
<body>
<!--背景图片-->
<head>
<style>
body
{
background-image:url("1.jpg");
background-attachment:fixed;
background-size:cover;
}
</style>
</head>
<!-- bilibili 按钮设置-->
<style>
.bilibili {
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
text-align: center;
background-color: white;
padding: 20px 40px;
color: #00a1d6;
border:0px solid;
border-radius:100px;
}
.bilibili:hover{
background-color: #00a1d6;
color: white;
}
</style>
<!-- bilibili 按钮及显示位置-->
<a href="http://www.bilibili.com">
<div style="padding-left:300px;padding-top:400px">
<button class="bilibili">bilibili</button>
</div>
</a>
<!-- 空白 按钮设置-->
<style>
.nothing {
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
text-align: center;
background-color: white;
padding: 20px 40px;
color: #00a1d6;
border:0px solid;
border-radius:100px;
}
.nothing:hover{
background-color: #00a1d6;
color: white;
}
</style>
<!-- 空白 按钮及显示位置-->
<a href="">
<div style="padding-left:500px;padding-top:400px">
<button class="nothing">空白</button>
</div>
</a>
</body>
</html>
首先，建议<style>标签写在<head>标签内；再说问题，你用a标签包含了一个块元素，然后在块元素中写button，点击跳转事件就在整个div上都执行，感觉很别扭，底下点击刷新页面是<a href>的锅，去掉href就没了，另外如果按钮需要点击跳转，第一可以用a标签并改变a标签的样式去实现，第二可以在button上添加
onclick="window.location.href=''你的链接';"去实现
第一个问题，应该是你点击到了第二个加了padding的无地址的a链接引起的刷新错觉，可以去掉padding 或者给第二个按钮加链接尝试一下
第二个问题，a标签的话一般都是放在div,button中的，你把a标签放进button中就解决了
第三个问题，因为他们都是块元素，所以第二个按钮会以第一个按钮为起点，也就是在它的下方，如果想要将他们并列显示，可以去掉外层的div,将他们包含在一个div中 或者 使用浮动，定位