请老师看一下,多行文本框位置有点不对,提交按钮怎么设置文字,还有老师检查一下还有没有其他问题,谢谢。

请老师看一下,多行文本框位置有点不对,提交按钮怎么设置文字,还有老师检查一下还有没有其他问题,谢谢。

/* banner */

.banner{


position: relative;

}

.banner .banner-image img{

width: 100%;

height: 600px;

}

.banner .mask{

width: 100%;

height: 600px;

background-color:rgb(0,0,0,0.5);

position: absolute;

top:0;

}

.banner form{

width: 504px;

position:absolute;

left: 50%;

margin-left: -252px;

top:0;

margin-top:100px;


}

.banner form input{

width: 504px;

height: 40px;

margin:15px;

}

.banner form textarea{

width: 504px;

height: 110px;

}

.banner form .submit{

width: 200px;

height: 40px;

position: absolute;

right:100px;

}



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>浮动与定位</title>

<link rel="stylesheet" href="css/css4-4.css">

</head>

<body>

<header class="header">

<div>

<h1>career builder</h1>

<ul>

<li> <a href=""> home </a></li>

<li> <a href=""> about</a></li>

<li> <a href=""> gallery</a></li>

<li> <a href=""> faculty</a></li>

<li> <a href=""> events</a></li>

<li> <a href=""> contact</a></li>

</ul>

</div>

</header>

<!-- banner -->

<div class="banner">

<div class="banner-image">

<img src="images/beijing/1.jpg" alt="">

</div>

<!-- 遮罩层 -->

<div class="mask">

</div>

<!-- 表单 -->

<div class="form">

<form action="">

<input type="text" name="" id="" placeholder="your name">

<input type="text" name="" id="" placeholder="your number">

<input type="text" name="" id="" placeholder="your email">

<textarea placeholder="write your comment here " name="" id="" cols="30" rows="10"></textarea>

<input class="submit" type="submit" name="" id="" placeholder="send message">

</form>

</div>

</div>

</body>

</html>


正在回答

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

2回答

同学你好,可以用value属性实现,如下

http://img1.sycdn.imooc.com//climg/60b614eb099fcac510880089.jpg

http://img1.sycdn.imooc.com//climg/60b614f3090e9ce503180061.jpg

祝学习愉快!

好帮手慕星星 2021-05-31 09:54:08

同学你好,问题如下:

1、input设置了margin值15px,textarea没有设置,所以看着不对齐。建议给textarea也添加上,另外将输入框背景色设置为透明,添加边框统一

http://img1.sycdn.imooc.com//climg/60b440e9091be63706060522.jpg

2、form盒子宽度不对,需要考虑到输入框边框和margin值,否则会小

http://img1.sycdn.imooc.com//climg/60b4409309705b9306690504.jpg

参考修改:

http://img1.sycdn.imooc.com//climg/60b44196093ecb6d04940306.jpg

3、按钮位置不居中,建议不设置定位,将按钮设置为块元素,用margin居中即可

http://img1.sycdn.imooc.com//climg/60b441b709d4f42504200226.jpg

自己再测试下,祝学习愉快!

  • 提问者 慕神3111110 #1

    老师,还有最后一个问题,提交按钮上怎么设置个性化的文字?


    2021-06-01 14:14:11
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师