Question

我继续在HTML / CSS中练习并且我发现了一个问题...就像问题一样，在CSS中重新设置后我的发送按钮已经死了（不要在另一个页面中发送表单中的信息和鼠标没有任何动作）我还没有找到解决这个问题的方法...... 仅基于HTML代码的练习效果很好，经过我的重新设计使我遇到了这个问题...也许代码的质量不是很好，但在其他页面工作正常。

HTML文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registra esame</title>

<link rel="stylesheet" href="style_register_exam.css">
<link rel="stylesheet" href="animate.css">


</head>
<body>
<div class="centered">
<!-- 
    <h2>Puoi registrare gli esami che hai sostenuto</h2>
    <hr>
    <h3>Inserisci le informazioni dell'esame che hai superato:</h3>
 -->


 <div class= "info_user animated fadeInDown">
 <h2>Sistema di registrazione online degli esame</h2>
 </div>


    <div  class= "form_reg_esame animated fadeInUp">
    <form action="/Esercizio_14.3tomcat/restricted/RegisterExam"  method="POST">

        <div style="text-align:center;">
        <br>
        <table>
            <tr>
                <td>Nome del corso
                <td>
                <td><input type="text" name="courseName" value=""/></td>
            </tr>
            <tr>
                <td>Nome del docente
                <td>
                <td><input type="text" name="teacherName" value=""/></td>
            </tr>
            <tr>
                <td>Data dell'esame
                <td>
                <td><input type="date" name="examDate" value=""/></td>
            </tr>
        </table>


        <br><br>
            <INPUT type="submit" value="Registra"> <INPUT type="reset"
                value="Cancella">


        </div>
    </form>
    </div>
</div>

<div class="background animated fadeInRight">
        <img src="db.jpg">
    </div>
</body>
</html>

这是我的CSS文件：

@charset "ISO-8859-1";

body {
color: black;
font-weight: bold;
font-family: Arial, Helvetia, sans-serif;
overflow: hidden;
}


.background{
display: inline-flex;
}

.background img{
margin: 65px 1100px;
float: left;
}


input[type=submit], input[type=reset]{
background-color: #203231;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 8px 2px;
cursor: pointer;
font-weight: bold;
font-family: Arial, Helvetia, sans-serif; 
display: block;
width: 150px;
float: left;
position: relative;
top: -15px;
left: 150px;
}



input[type=text]:focus, input[type=text]:focus, input[type=date]:focus {
background-color: lightblue;
}

.centered {
width: 430px;
margin: 0 auto;
}

form {
background-color: rgba(211, 211, 211, 0.3);
border-radius: 50px 50px 50px 50px;
border: 5px solid lightgrey;
width: 600px;
height: 250px;
position: relative;
top: 90px;
left: -80px;

}


input[type=text], input[type=text], input[type=date]{
width: 230%;
padding: 5px 5px;
margin: 5px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
font-family: Arial, Helvetia, sans-serif; 

}


.info_user{
background-color: rgba(211, 211, 211, 0.3);
border-radius: 20px 20px 20px 20px;
position: relative;
left: 85%;
margin-left: -480px; 
border-style: solid;
border: 2px solid darkgrey;
width: 160%;
text-align: center;
font-color: black;
font-weight: bold;
font-family: Arial, Helvetia, sans-serif; 
}

Answer 1

解昨天我找到了我的问题的解决方案...在我的HTML文件中，我有很多div，表格和表格;我已经删除了表并重新组织了我所有div的结构，并且我已经调整了CSS文件中每个组件的位置，现在一切都运行良好，具有相同的布局。我认为问题是一个范围问题（可能是我用旧的HTML结构看不到它的行为）或用HTML / CSS覆盖对象/ comportament。我将我的代码更改为未来的咨询...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registra esame</title>

<link rel="stylesheet" href="style_register_exam.css">
<link rel="stylesheet" href="animate.css">


</head>
<body>
<div class="centered">

<div class= "info_user animated fadeInDown">
<h2>Sistema di registrazione online degli esame</h2>
</div>


<div  class= "form_reg_esame animated fadeInUp">
<form action="/Esercizio_14.3tomcat/restricted/RegisterExam"  method="POST">

    <div class="form_esame">
        <p>
            <BR> Nome del corso<input type="text" name="courseName" value=""/><BR>
            <BR> Nome del docente <input type="text" name="teacherName" value=""/><BR>
            <BR> Data dell'esame <input type="date" name="examDate" value=""/><BR> 
        </p>
    </div>


    <br><br>
        <INPUT type="submit" value="Registra"> 
        <INPUT type="reset"  value="Cancella">
 </form>             
    </div>

 </div>


 <div class="background animated fadeInRight">
    <img src="db.jpg">
 </div>
 </body>
 </html>

CSS文件：

 @charset "ISO-8859-1";

body {
color: black;
font-weight: bold;
font-family: Arial, Helvetia, sans-serif;
overflow: hidden;
}


.background{
display: inline-flex;
}

.background img{
margin: 0px 1100px;
float: left;
}


input[type=submit], input[type=reset]{
background-color: #203231;
border-radius: 4px;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 8px 2px;
cursor: pointer;
font-weight: bold;
font-family: Arial, Helvetia, sans-serif; 
display: block;
width: 150px;
float: left;
position: relative;
top: -60px;
left: 150px;
}



input[type=text]:focus, input[type=text]:focus, input[type=date]:focus {
background-color: lightblue;
}

.centered {
width: 430px;
margin: 0 auto;
}

form {
background-color: rgba(211, 211, 211, 0.3);
border-radius: 50px 50px 50px 50px;
border: 5px solid lightgrey;
width: 600px;
height: 250px;
position: relative;
top: 90px;
left: -80px;
}

p{
text-align: center;
position: relative;
top: -15px;
left: -30px;
}

input[type=text], input[type=text], input[type=date]{
width: 50%;
padding: 5px 5px;
margin: 5px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
font-family: Arial, Helvetia, sans-serif;
position: relative;
top: 0px;
left: 50px;
}


.info_user{
background-color: rgba(211, 211, 211, 0.3);
border-radius: 20px 20px 20px 20px;
position: relative;
left: 85%;
margin-left: -480px; 
border-style: solid;
border: 2px solid lightgrey;
width: 160%;
text-align: center;
font-color: black;
font-weight: bold;
font-family: Arial, Helvetia, sans-serif; 
}

css restilyng后发送按钮“死亡”

1 个答案: