鼠标滑过表单各项时，表单项的边框颜色没有变化,顶端的几个超链接鼠标滑过显示背景色区域较小是怎么回事

鼠标滑过表单各项时，表单项的边框颜色没有变化,顶端的几个超链接鼠标滑过显示背景色区域较小是怎么回事

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>homework</title>

<style>

*{

margin: 0;

padding:0;

}


.clear{

clear: both;

}


.top .top_color{

width: 100%;

height: 60px;

float: left;

}


.top .top_logo{

position: absolute;

top: 0px;

width: 15%;

height: 60px;

left: 80px;

}


.top .nav{

position: absolute;

right: 0px;

top: 0px;

}


.top ul{

padding-right: 50px;

}


.top ul li{

font-size: 17px;

float: left;

list-style-type: none;

font-weight: bold;

width: 100px;

height: 60px;

line-height: 60px;

}


.top ul a{

color: white;

text-decoration: none;

}


.top .nav ul li a:hover{

width: 100px;

height: 60px;

background-color: black;

}


.banner img{

position: relative;

width: 100%;

height: 600px;

}


.banner .banner3{

width: 100%;

height: 600px;

background-color: black;

position: absolute;

top: 60px;

z-index: 50;

opacity: 0.1;

}


.banner .f form{

position: absolute;

top: 60px;

left: 50%;

margin-left: -180px;

border-color: white;

margin-top: 60px;

}


.banner .f form input{

position: relative;

border-width: 1px;

border-color: white;

background: none;

margin-bottom: 40px;

padding-bottom: 10px;

padding-right: 200px;

border-style: solid;

}


.banner .f form input:hover{

margin-bottom: 40px;

padding-bottom: 10px;

padding-right: 200px;

border-style: solid;

border-width: 1px;

border-color: #07cbc9;

}


.banner .f form .end{

padding-bottom: 150px;

}



.banner .f form button {

float: left;

width: 150px;

height: 30px;

border-color: white;

border-width: 0.5px;

color: gray;

background-color: transparent;

text-align: center;

margin-left: 105px;

}

</style>

</head>

<body>

<div class="top">

<img src="images/logo_bgc.png" class="top_color">

<img src="images/logo.png" class="top_logo">

<div class="nav">

<ul>

<li><a href="" target="_blank">HOME</a></li>

<li><a href="" target="_blank">ABOUT</a></li>

<li><a href="" target="_blank">GALLERY</a></li>

<li><a href="" target="_blank">FACULTY</a></li>

<li><a href="" target="_blank">EVENTS</a></li>

<li><a href="" target="_blank">CONTACT</a></li>

</ul>

</div>

</div>


<div class="clear"></div>


<div class="banner">


<img src="images/banner3.jpg" alt="">

<div class="banner3"></div>


<div class="f">

<form>

<input type="textbox" placeholder="your Name" ><br>

<input type="textbox" placeholder="your Phone" ><br>

<input type="textbox" placeholder="your Email" ><br>

<input type="textbox" placeholder="Whrite Your Comment Here" class="end"><br>

<button type="button">SEND MESSAGE</button>

</form>

</div>

</div>

</body>

</html>
慕斯1126619 2020-05-24
源自：项目：网页布局案例   2-9 作业题
14
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕小尤 2020-05-26 10:07:14

同学你好，测试好帮手慕古丽老师提供的代码是可以成功运行的，建议同学重新进行测试，或尝试使用下方代码进行测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>homework</title>
<!-- 按照作业需求引入css文件 -->
<link rel="stylesheet" href="css/index.css">
</head>
 
<body>
 
<div class="top">
 
<img src="/logo_bgc.png" class="top_color">
 
<img src="images/logo.png" class="top_logo">
 
<div class="nav">
 
<ul>
 
<li><a href="" target="_blank">HOME</a></li>
 
<li><a href="" target="_blank">ABOUT</a></li>
 
<li><a href="" target="_blank">GALLERY</a></li>
 
<li><a href="" target="_blank">FACULTY</a></li>
 
<li><a href="" target="_blank">EVENTS</a></li>
 
<li><a href="" target="_blank">CONTACT</a></li>
 
</ul>
 
</div>
 
</div>
<div class="clear"></div>
 
 <!-- banner部分 -->
  <div class="banner">
        <!-- 图片 -->
        <div class="pic">
          <img src="/images/banner3.jpg">
         </div>
        <!-- 遮罩层 -->
        <div class="topLayer">
 
        </div>   
        <!-- 最上层的内容 -->
        <div class="btn">
         <form action="#" method="post">
                    <input class="text" type="text" name="your name" placeholder="your Name" required="">
            <input class="text" type="text" name="your phone" placeholder="your Phone" required="">
            <input class="text" type="text" name="your email" placeholder="your Email" required="">
            <textarea class="text" rows="5" cols="50" name="your comment" placeholder="Write Your Comment Here"></textarea><br>
            <input type="submit" value="SEND MESSAGE">
         </form>
        </div>
  </div>
</body>
 
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
*{
  margin: 0;
  padding:0;
}
.clear{
  clear: both;
}
 
.top .top_color{
  width: 100%;
  height: 60px;
  float: left;
}
.top .top_logo{
  position: absolute;
  top: 0px;
  width: 15%;
  height: 60px;
  left: 80px;
}
 
.top .nav{
  position: absolute;
  right: 0px;
  top: 0px;
}
.top ul{
  padding-right: 50px;
}
 
 
.top ul li{
    font-size: 17px;
    float: left;
    list-style-type: none;
    font-weight: bold;
    line-height: 60px;
    margin-left: 20px;
 
}
.top ul a{
    color: white;
    text-decoration: none;
    display: block;
    padding: 0 10px;
 
}
 
.top .nav ul li a:hover{
    /*width: 100px;*/
    /*height: 60px;*/
    background-color: black;
 
}
 
 
 
.banner img{
 
  position: relative;
 
  width: 100%;
 
  height: 600px;
 
}
 
.banner .btn{
    z-index: 2;
    width: 500px;
    position: absolute;
    top: 350px;
    margin-top:-150px;
    right: 50%;
    margin-right: -250px;
    text-align: center;
}
.banner input[type="submit"]{
    color: #bdbdbd;
    /*color: #fff;*/
    padding: 10px;
    margin: 10px;
    background-color: transparent;
    border: 2px solid gray;
    /*border: 1px solid #07cbc9;*/
    outline: none;
    cursor: pointer;
 
}
.banner input[type="submit"]:hover{
    background-color: #07cbc9;
    color:#fff;
    border:1px solid #07cbc9;
}
.banner .text{
    color: #bdbdbd;
    width: 97%;
    padding: 10px;
    margin: 10px;
    background-color: transparent;
    border: 2px solid gray;
    /*border: 1px solid #07cbc9;*/
    outline: none;
}
.banner .text:hover{
    border: 2px solid #07cbc9;;
}

祝学习愉快！

0
收起回答
guly 2020-05-24 10:24:52

你好 头部连接处代码修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.top ul li{
 
    font-size: 17px;
 
    float: left;
 
    list-style-type: none;
 
    font-weight: bold;
    /*width: 100px;*/
 
    /*height: 60px;*/
 
    line-height: 60px;
    margin-left: 20px;
 
}
 
 
 
.top ul a{
 
    color: white;
    text-decoration: none;
    display: block;
    padding: 0 10px;
 
}
 
 
 
.top .nav ul li a:hover{
 
    /*width: 100px;*/
 
    /*height: 60px;*/
 
    background-color: black;
 
 
}

2、表单出建议参考如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <!-- banner部分 -->
  <div class="banner">
      <!-- 图片 -->
      <div class="pic">
    <img src="images/banner3.jpg">
</div>
  <!-- 遮罩层 -->
  <div class="topLayer">
 
  </div>   
  <!-- 最上层的内容 -->
<div class="btn">
   <form action="#" method="post">
              <input class="text" type="text" name="your name" placeholder="your Name" required="">
      <input class="text" type="text" name="your phone" placeholder="your Phone" required="">
      <input class="text" type="text" name="your email" placeholder="your Email" required="">
      <textarea class="text" rows="5" cols="50" name="your comment" placeholder="Write Your Comment Here"></textarea><br>
      <input type="submit" value="SEND MESSAGE">
   </form>
</div>
  </div>

css为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.banner .btn{
    z-index: 2;
    width: 500px;
    position: absolute;
    top: 350px;
    margin-top:-150px;
    right: 50%;
    margin-right: -250px;
    text-align: center;
}
.banner input[type="submit"]{
    color: #bdbdbd;
    /*color: #fff;*/
    padding: 10px;
    margin: 10px;
    background-color: transparent;
    border: 2px solid gray;
    /*border: 1px solid #07cbc9;*/
    outline: none;
    cursor: pointer;
 
}
.banner input[type="submit"]:hover{
    background-color: #07cbc9;
    color:#fff;
    border:1px solid #07cbc9;
}
.banner .text{
    color: #bdbdbd;
    width: 97%;
    padding: 10px;
    margin: 10px;
    background-color: transparent;
    border: 2px solid gray;
    /*border: 1px solid #07cbc9;*/
    outline: none;
}
.banner .text:hover{
    border: 2px solid #07cbc9;;
}

如果解决您的问题请采纳，祝学习愉快！

0
收起回答
  • 提问者 慕斯1126619 #1
    老师，按照您的代码运行了，鼠标滑过表单各项时，表单项的边框颜色还是没有变化
    2020-05-24 19:46:58
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

主要问题，当鼠标离开菜单区域时，如何去掉主菜单中的背景颜色
0 0 3
为什么鼠标移上去还没移走就触发了onmouseout事件颜色就变绿了，不是应该鼠标移出才变色的吗
17 0 7
鼠标滑过有的下拉框选项没有显示背景透明度
27 0 6
老师遇到个css的问题，麻烦解答下谢谢
0 0 3
表单边框变色的问题
14 0 4

登录后可查看更多问答，登录/注册

PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4928    个

想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。

了解课程

本课精华内容

问答 作业

max最大值,min最小值，请老师检查

18 1

不太理解，全局变量是什么意思？？

3 1

建表时默认值是中文时会报错

3 1

什么是API

8 1

单引号和双双引号

5 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码