老师请教一下问题
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 Message</ button > </ div > </ div > < div class = "main" > < div class = "about" ></ div > < div class = "gallery" ></ div > </ div > < div class = "footer" ></ div > </ body > </ html > |
1
收起
正在回答
3回答
同学你好,可以参考下面的解释:
1、输入框这样写是可以的,没有问题。
2、文本框里的文字颜色需要输入才会和按钮中的字体颜色一致,如下:
输入框中的提示文字需要另外设置样式,参考:
3、同学说的是输入时候的这个效果吗?
这个阴影是输入框自带的,可以使用outline属性去掉,如下:
再次输入的时候就会是边框的颜色了:
如果鼠标不在输入框上,可以添加:focus代表的是聚焦时候的状态,如下:
4、是想让提示文字与输入框有些距离吗?可以使用text-indent文本缩进属性,例如:
如果想输入内容的时候也有间距,输入框上也需要添加:
5、 现在测试的效果:
图片超出了表单,是因为图片高度没有控制。不同的显示器分辨率不同,宽度不同,显示效果也会不同,所以建议控制banner的高度,以及遮罩层和表单都相对于banner盒子进行定位,这样页面在变化的时候就不会改变了。参考:
可以重新测试下,祝学习愉快!
慕勒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{ width : 100% ; height : 80px ; background : #07cbc9 ; } /*头部样式*/ .header{ position : fixed ; z-index : 99999 ; } .header .logo{ display : inline ;} .header .logo img{ height : 32px ; width : 170px ; display : inline- block ; float : left ; padding-top : 24px ; padding-left : 100px ; } .header .nav ul{ float : right ; } .header .nav ul li{ display : inline ; color : #ffffff ; padding-right : 1.8em ; line-height : 80px ; font-size : 13px ; font-weight : bold ; } /*Banner区样式*/ .banner img{ margin-top : 80px ; width : 100% ; height : auto ; } /*遮罩*/ .bannerLayer{ width : 100% ; height : 619.92px ; opacity: 0.5 ; background : #000 ; position : absolute ; top : 80px ; z-index : 2 ; } /*文本框样式*/ .textArea{ position : absolute ; width : 500px ; height : 300px ; top : 50% ; right : 50% ; margin-right : -250px ; margin-top : -150px ; z-index : 9 ; } .textArea input,.textArea textarea,.textArea button{ border : 1px solid #666 ; display : block ; margin-bottom : 20px ; background : transparent ; color : #ffffff ; } .textArea input{ width : 500px ; height : 40px ; } .textArea textarea{ width : 500px ; height : 130px ; } .textArea button{ width : 130px ; height : 40px ; position : absolute ; right : 50% ; margin-right : -65px ; } .textArea input:hover{ border : #07cbc9 1px solid ; } .textArea textarea:hover{ border : #07cbc9 1px solid ; } .textArea button:hover{ background : #07cbc9 ; } |
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧