老师请教一下问题

老师请教一下问题

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
<!DOCTYPE html>
<html>
<head>
    <title>Career builder</title>
    <link rel="stylesheet" type="text/css" href="Website.css">
</head>
<body>
    <div class="header">
        <div class="logo"><img src="images/logo.png"></div>
        <div class="nav">
            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>GALLERY</li>
                <li>FACULTY</li>
                <li>EVENTS</li>
                <li>CONTACT</li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <img src="images/banner3.jpg">
        <div class=bannerLayer></div>
        <div class="textArea">
            <input type="text" name="username" placeholder="your Name">
            <input type="text" name="userphone" placeholder="your Phone">
            <input type="text" name="useremail" placeholder="your Email">
            <textarea name="comment" placeholder="Write Your Comment Here"></textarea>
            <button>Send&nbsp;Message</button>
        </div>
    </div>
    <div class="main">
        <div class="about"></div>
        <div class="gallery"></div>
    </div>
    <div class="footer"></div>
</body>
</html>


正在回答

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

3回答

同学你好,可以参考下面的解释:

1、输入框这样写是可以的,没有问题。

2、文本框里的文字颜色需要输入才会和按钮中的字体颜色一致,如下:

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

输入框中的提示文字需要另外设置样式,参考:

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

3、同学说的是输入时候的这个效果吗?

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

这个阴影是输入框自带的,可以使用outline属性去掉,如下:

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

再次输入的时候就会是边框的颜色了:

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

如果鼠标不在输入框上,可以添加:focus代表的是聚焦时候的状态,如下:

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

4、是想让提示文字与输入框有些距离吗?可以使用text-indent文本缩进属性,例如:

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

如果想输入内容的时候也有间距,输入框上也需要添加:

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

5、 现在测试的效果:

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

图片超出了表单,是因为图片高度没有控制。不同的显示器分辨率不同,宽度不同,显示效果也会不同,所以建议控制banner的高度,以及遮罩层和表单都相对于banner盒子进行定位,这样页面在变化的时候就不会改变了。参考:

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

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

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

可以重新测试下,祝学习愉快!

提问者 慕勒9893359 2019-04-24 06:40:27
  1. 请问输入框大体是这么写正确吗?

  2. 请问为什么文本框和按钮里的文字颜色不一样?

  3. .如何设置文本框在输入状态时,边框颜色同hover一样也可以是#07cbc9, 我试过active但无效.

  4. 如何让文本框里的文字和边框有一定距离?是用padding-left吗?

  • 提问者 慕勒9893359 #1
    一个新的问题, 我在另一台电脑打开html,网页变形了,请问该怎么办呢? 课程里教的都是px为单位
    2019-04-24 10:04:36
提问者 慕勒9893359 2019-04-24 06:35:39
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
*{
    margin:0;padding:0;
}
/*头部底部结构*/
.header,.footer{
    width100%;
    height80px;
    background#07cbc9;
}
/*头部样式*/
.header{
    positionfixed;
    z-index99999;
}
.header .logo{displayinline;}
.header .logo img{
    height:32px;
    width170px;
    display: inline-block;
    floatleft;
    padding-top24px;
    padding-left100px;
}
.header .nav ul{
    floatright;
}
.header .nav ul li{
    displayinline;
    color#ffffff;
    padding-right1.8em;
    line-height80px;
    font-size13px;
    font-weightbold;
}
/*Banner区样式*/
.banner img{
    margin-top:80px;
    width100%;
    heightauto;
}
/*遮罩*/
.bannerLayer{
    width100%;
    height619.92px;
    opacity: 0.5;
    background#000;
    positionabsolute;
    top:80px;
    z-index2;
}
/*文本框样式*/
.textArea{
    positionabsolute;
    width500px;
    height300px;
    top:50%;
    right50%;
    margin-right:-250px;
    margin-top:-150px;
    z-index:9;
}
.textArea input,.textArea textarea,.textArea button{
    border:1px solid #666;
    display:block;
    margin-bottom20px;
    backgroundtransparent;
    color#ffffff;
}
.textArea input{
    width500px;
    height40px;
}
.textArea textarea{
    width500px;
    height130px;
}
.textArea button{
    width130px;
    height40px;
    positionabsolute;
    right50%;
    margin-right:-65px;
}
.textArea input:hover{
    border:#07cbc9 1px solid;
}
.textArea textarea:hover{
    border:#07cbc9 1px solid;
}
.textArea button:hover{
    background:#07cbc9;
}


问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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