国外免费高清大图,摄影图片-惊人的免费图片https://pixabay.com

博客提供了Pixabay网站的链接,该网站可能在信息技术领域有一定用途,但内容仅给出链接,未详细说明其相关信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

好的,我可以为您生成一个基于该图片的Web登录界面。以下是HTML和CSS代码: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>Web登录界面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <img src="https://cdn.pixabay.com/photo/2023/03/15/03/46/jeep-7853620_960_720.jpg" class="avatar"> <h1>登录</h1> <form> <p>用户名</p> <input type="text" name="username" placeholder="请输入用户名"> <p>密码</p> <input type="password" name="password" placeholder="请输入密码"> <input type="submit" name="submit" value="登录"> <a href="#">忘记密码?</a> </form> </div> </body> </html> ``` CSS代码: ``` body { margin: 0; padding: 0; background: url(https://cdn.pixabay.com/photo/2023/03/15/03/46/jeep-7853620_960_720.jpg) no-repeat center center fixed; background-size: cover; font-family: sans-serif; } .login-box { width: 320px; height: 420px; background: rgba(0, 0, 0, 0.5); color: #fff; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; padding: 70px 30px; } .avatar { width: 100px; height: 100px; border-radius: 50%; position: absolute; top: -50px; left: calc(50% - 50px); } h1 { margin: 0; padding: 0 0 20px; text-align: center; font-size: 22px; } .login-box p { margin: 0; padding: 0; font-weight: bold; } .login-box input { width: 100%; margin-bottom: 20px; } .login-box input[type="text"], input[type="password"] { border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; } .login-box input[type="submit"] { border: none; outline: none; height: 40px; background: #1c8adb; color: #fff; font-size: 18px; border-radius: 20px; } .login-box input[type="submit"]:hover { cursor: pointer; background: #39dc79; color: #000; } .login-box a { text-decoration: none; font-size: 14px; color: #fff; } .login-box a:hover { color: #39dc79; } ``` 您可以将以上代码保存为HTML和CSS文件,然后在浏览器中打开HTML文件以查看效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值