div标签的简单应用
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 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title></title> <style type= "text/css" > * {margin:0;padding:0;} /*去掉页面样式*/ body{color:white;} .content{ background-color:rgba(251, 255, 0, 0.993); left:0; width:100%; height:400px; margin-top:0px; overflow:hidden; /*隐藏滚动条*/ } .main{ text-align:center; /*文本居中*/ max-width:600px; height:400px; padding:100px 0px; /*上下80px,左右为0*/ /*background:yellow;*/ /*验证div的位置*/ margin:0 auto; /*设置上右下左,居中显示*/ } .main h1{ font-family: "楷体" ; /*设置字体*/ font-size:70px; /*设置字体大小*/ font-weight:2px; /*调整字体粗细*/ color: rgb(38, 0, 255); border-radius:30px; background-color: rgb(255, 172, 223); } form{ padding:20px 0; } form input{ border:1px solid white; display:block; margin:0px auto 10px auto; /*上 右 下 左*/ padding:10px; width:220px; border-radius:30px; /*H5设置圆角边框*/ font-size:18px; font-weight:300; text-align:center; } form input:hover{ background-color:pink; } form button{ background-color:rgb(255, 255, 255); border: 100px outset rgb(0, 0, 0); border-radius:10px; border:0; height:30px; width:50px; padding:5px 10px; } form button:hover{ background-color:rgb(118, 119, 119); } </style> </head> <body> <div class = "content" > <div class = "main" > <h1>信息学院</h1> <form> <input type= "text" name= "useid" placeholder= "请输入账号" /> <input type= "password" name= "pw" placeholder= "请输入密码" > <button type= "submit" >登 录</button> <button type= "submit" >注 册</button> </form> </div> </div> </body> </html> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix