0
여기 웹 페이지에서 html/css/javascript에 대한 지식을 향상시키고 있으며 내 머리글에있는 단추는 작동하지 않는 것 같습니다 : hover doesn ' 전혀 트리거하지 않으며 그들이 당신이 어디로 향하는 지로 방향을 바꾸지 않습니다. Heres 코드는 길고 어렵지는 않지만, 나는 내가 할 수있는 것처럼 쉽게 만들었 으면 좋겠다는 주석 태그에 넣었습니다. 그들은 가운데 근처에 있습니다. 어떤 도움을 이해할 수있을 것이다 :내 HTML 단추가 작동하지 않습니다.
<html>
<head><style>
html, body {
height:100%;
}
body {
overflow-y:hidden;
overflow-x:hidden;
}
header{
width: 98.907%;
background: #000097;
position: fixed;
top: 0;
height: 62px !important;
opacity:.8;
border-style: Outset;
border-color: blue;
}
.content {
position:relative;
height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1, .sidebar2 {
background: #000047;
top: -80px;
bottom:-80px;
width: 10px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.search{
background-repeat: no-repeat;
background-color: #141414;
height: 28px;
width: 180px;
font-size: 18px;
color: #fbff00;
border: 2px solid #fbff00;
vertical-align:middle;
padding: 2px 4px 0px 4px;
margin: 0;
}
.sidebar1 {
left: -342px;
}
.sidebar2 {
right: -239px;
}
#scrollable2 {
background:green;
height: 99%;
min-width: 1273px;
margin-left: -332px;
margin-right: 100px;
/*position: absolute;*/
top: 60px;
overflow:auto;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
background:-moz-linear-gradient(center top, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
width: 1272px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b23e35;
}.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
background:-moz-linear-gradient(center top, #ce0100 5%, #fe1a00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
}.button:active {
position:relative;
top:1px;
}
.button1 {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
background:-moz-linear-gradient(center top, #77d42a 5%, #5cb811 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background-color:#77d42a;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #268a16;
display:inline-block;
white-space:nowrap;
color:#306108;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #aade7c;
}.button1:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
background:-moz-linear-gradient(center top, #5cb811 5%, #77d42a 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
background-color:#5cb811;
}.button1:active {
position:relative;
top:1px;
}
footer {
width: 100%;
background: #000047;
position: fixed;
bottom: 0;
height: 30px;
}
.p {
text-align: center;
color: #bcbcbc;
font-size: x-large;
white-space:nowrap;
}
</style>
<script>
</script>
<title>Davids LAN Website</title>
</head>
<body>
<header>
<table width="100%">
<tr>
<td> </td></tr>
<tr>
<!-----
The Problem is here or mabye in the styling but for some reason my skin viewer page and chat page don't work, the hover style and the link opening
<td><a href="plugins.html"><button class="button1">Plugins</button></a></td>
<td><a href="upload.php"><button class="button1">Upload</button></a></td>
<td><p class="p">Davids LAN Site</p></td>
<td><a href="skinviewer.html"><button class="button1">Skin Viewer</button></a></td>
<td><a href="chat.php"><button class="button1">Chat</button></a></td>
----->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</header>
<!-- Fixed size after header-->
<div class="content">
<div class="sidebar1">
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<!-- Scrollable div with main content -->
<div id="scrollable2">
<a href="http://dl.bukkit.org/downloads/craftbukkit/get/01479_1.3.2-R3.0/craftbukkit.jar" target="_blank">
<button class="button"><img src="https://twimg0-a.akamaihd.net/profile_images/1205959797/bukkit_normal.png"/> Download Craftbukkit</button></a>
<p class="p">How to set up Bukkit Server</p>
<center><video width="800" controls="controls">
<source src="movies/bukkit.mp4" type="video/mp4">
<source src="movies/bukkit.ogg" type="video/ogg">
Your browser does not support the video tag.
</video><video width="800" controls="controls">
<source src="movies/regular.mp4" type="video/mp4">
<source src="movies/regular.ogg" type="video/ogg">
Your browser does not support the video tag.
</video></center>
<a href="http://www.youtube.com/watch?v=VJD6E8J5Ioc&feature=plcp" target="_blank">
<button class="button">If you have Firefox please click here to view the youtube videos
</button>
</a>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
</div>
<!-- Always at the end of the page -->
<footer>
</footer>
</body>
</html>
이 필요한 부분에 예제 코드를 줄 이세요보십시오. – Sirko
jsfiddle.net에 코드를 추가 할 수 있습니까? 이렇게하면 모든 사람들이 가능한 솔루션을 쉽게 테스트 할 수 있습니다. 그리고 Sirko가 말한 것 또한 간단하게 유지하려고 노력하십시오. –
자습서를 확인하십시오. hover는 버튼에 대한 유효한 동작이 아닙니다. 'a' 만 – NappingRabbit