老师这个怎么解决?

老师这个怎么解决?

<!DOCTYPE html>


<html>


<head>


  <meta charset="UTF-8">


  <title>zuoye</title>


  <style type="text/css">

  *{margin: 0;padding: 0;}

.header{width: 100%;height: 80px;

background-color: #07cdc9

}

.logo{float: left;margin-left: 150px;width: 200px;}

.logo img{margin-top: 16px;}


.nav{float: right;margin-right: 100px;}

.nav li{display: inline-block;color: white;line-height: 80px;padding-left: 20px;font-style: weight;}

.banner img{width: 100%;height: 400px;margin-top: 0;}

.kuang{width: 513px;position: absolute;

left: 50%;top: 50%;

      

       }

.kuang input{width: 505px;height: 39px;}

.kuang .input2{height: :115px;}


  </style>



</head>

<body>

<div class="header">

<div class="logo">

<img src="logo.png">

    </div>

    <div class="nav">

    <ul>

    <li>HOME</li>

    <li>ABOUT</li>

    <li>GALLERY</li>

    <li>FACULTY</li>

    <li>ECENTS</li>

    <li>CONTACT</li>

    </ul>

    </div>

</div>

<div class="banner">

<img src="banner3.jpg">


</div>

<div class="kuang">

<input type="text" name="baba" class="input1" placeholder="you name">

<input type="text" name="baba" class="input1" placeholder="your phone">

<input type="text" name="baba" class="input1" placeholder="you dsdasd">

<input type="text" name="baba" class="input2" placeholder="asasfsagasgasg">

</body>

</html>


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

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

2回答
好帮手慕慕子 2019-07-07 18:51:38

同学你好,可以通过设置背景颜色为透明,也就是background:transparent;属性,实现效果哦。 另, 就可以同意给input输入框设置border值,然后通过margin值,设置表单元素的上下间距哦。 示例:

http://img1.sycdn.imooc.com//climg/5d21cea70001401003950202.jpg

同学可以自己下去测试一下哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

好帮手慕夭夭 2019-07-06 18:20:50

你好同学,表单位置不对是因为没有设置参照点。定位元素参照离它最近的已定位祖先元素,如果没有,默认会参照浏览器视口(由于浏览器用户代理的不同,有的是参照html)。像作业中表单应该在banner区域,参照banner区域定位。如下调整:

把表单放在banner区域里面

http://img1.sycdn.imooc.com//climg/5d2074fe00018cfe09640222.jpg

父元素设置相对定位成为参照点

http://img1.sycdn.imooc.com//climg/5d2075320001e07003150070.jpg

子元素位置调整, 因为设置left为50%之后,是左边缘位置居中,所以要往左移动自身的一半,让中心点居中,不用设置垂直居中了:

http://img1.sycdn.imooc.com//climg/5d2075d60001966a04540179.jpg

另外,建议banner图片高度再大一点更好,如下:

http://img1.sycdn.imooc.com//climg/5d2075fc00016b1e03500115.jpg

祝学习愉快,望采纳。

  • 提问者 慕莱坞9291030 #1
    表单的样式怎么写啊老师?透明度怎么改
    2019-07-07 14:52:08
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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