首页html个人主页赛博朋克

html个人主页赛博朋克

时间: 2023-11-24 12:53:13 浏览: 92

以下是一个赛博朋克风格的HTML个人主页示例： ```html <!DOCTYPE html> <html> <head> <title>赛博朋克个人主页</title> <style> body { background-color: #000; color: #fff; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; } h1 { font-size: 48px; margin-top: 100px; text-align: center; text-shadow: 0 0 10px #fff; } p { margin: 20px 0; text-align: center; } .container { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 50px; } .box { background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px #fff; margin: 20px; padding: 20px; text-align: center; width: 300px; } .box h2 { font-size: 24px; margin-top: 0; } .box p { font-size: 18px; margin: 10px 0; } .box a { background-color: #f00; border-radius: 5px; color: #fff; display: inline-block; margin-top: 10px; padding: 10px 20px; text-decoration: none; transition: background-color 0.3s ease; } .box a:hover { background-color: #00f; } </style> </head> <body> <h1>赛博朋克个人主页</h1> <p>欢迎来到我的个人主页，这里是一个赛博朋克风格的页面。</p> <div class="container"> <div class="box"> <h2>个人简介</h2> <p>我是一名赛博朋克爱好者，喜欢探索未来科技的可能性。</p> <a href="#">了解更多</a> </div> <div class="box"> <h2>最新作品</h2> <p>我最近完成了一个赛博朋克风格的网站设计，欢迎来观赏。</p> <a href="#">查看作品</a> </div> <div class="box"> <h2>联系方式</h2> <p>如果你对我的作品感兴趣，可以通过以下方式联系我。</p> <a href="#">发送邮件</a> </div> </div> </body> </html> ```

阅读全文