麻烦老师看一下有什么需要修改的

来源:4-6 自由编程

Yuujio

2021-05-07 22:21:23

<!--banner-->
<div class="banner">
<banner>
<img class="img-banner" src="images/banner3.jpg">
<div class="cover"></div>
<div class="update">
<form class="banner-form">
<input class="banner-form-input bf" type="text" placeholder="your Name">
<input class="banner-form-input bf" type="text" placeholder="your Phone">
<input class="banner-form-input bf" type="email" placeholder="your E-mail">
<textarea class="banner-form-textarea bf" cols="30" rows="10" placeholder="your Comment"></textarea><br>
<button class="banner-form-button " type="submit">SEND MESSAGE</button>
</form>
</div>
</banner>
</div>

​*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
header .header{
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .header .logo{
width: 600px;
height: 48px;
float: left;
margin: 16px 0;
}
header .header nav{
width: 600px;
height: 80px;
float: right;
}
header .header nav ul{
float: left;
}
header .header nav ul li{
width: 100px;
height: 80px;
float: left;
margin-right: 20px;
line-height: 80px;
}
header .header nav ul li a{
font-size: 16px;
color: rgba(255,255,255,0.9);
}
.content .banner{
position: relative;
width: 1920px;
height: 600px;
}
.content .banner .img-banner{
width: 100%;
height: 600px;
}
.content .banner .cover{
width: 100%;
height: 600px;
position: absolute;
left: 0;
top: 0;
background:rgba(0, 0, 0, 0.5)
}
.content .banner .banner-form{
position: absolute;
top: 100px;
left: 50%;
background: none;
float: left;
margin-left: -257px;
text-align:center;
color: #808080;
}
.content .banner .banner-form .bf{
display: block;
margin-bottom: 10px;
background: none;
border: solid #808080;
}
.content .banner .banner-form .banner-form-input{
width: 504px;
height: 40px;
}
.content .banner .banner-form .banner-form-textarea{
width: 504px;
height: 110px;
}
.content .banner .banner-form .banner-form-button{
background: none;
width: 200px;
height: 40px;
color: #808080;
}


写回答

1回答

好帮手慕然然

2021-05-08

同学你好,代码实现效果基本可以,但是存在几点需要优化的地方:

1、给表单控件元素设置border边框时,没有设置宽度,建议参考如下修改

http://img.mukewang.com/climg/6095fb0709aa73e705800200.jpg

2、建议给button按钮设置border属性,覆盖默认边框样式,参考如下:

http://img.mukewang.com/climg/6095fb1509f38c6006660182.jpg

3、输入框输入文字时,建议设置成白色字体,如下

http://img.mukewang.com/climg/6095fb2009d068d807370352.jpg

参考代码:

http://img.mukewang.com/climg/6095fb2909b0c4ec06870216.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程