HTML 首页 欢迎页，将下面代码复制出来，贴到HTML中，直接运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VipSoft</title> <style> *{ padding: 0; margin: 0; font-family: "楷体"; } header{ background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://static.vecteezy.com/system/resources/previews/000/622/564/original/ai-concept-vector.jpg); height: 100vh; background-size: cover; background-position: center; } ul{ float: right; list-style-type: none; margin: 15px; } ul li{ display: inline-block; } ul li a{ text-decoration: none; color: #fff; padding: 5px 20px; border: 1px solid transparent; transition: .6s ease; border-radius: 20px; } ul li a:hover{ background-color: #fff; color: #000; } ul li.active a{ background-color: #fff; color: #000; } .title{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } .title h1{ color: #fff; font-size: 70px; font-family: Century Gothic; } </style> </head> <body> <header> <div class="main"> <ul> <li class="active"><a href="#">首页</a></li> <li><a href="http://www.vipsoft.com.cn/" target="_blank"><span style="color: crimson;">Vip</span>Soft</a></li> <li><a href="https://www.cnblogs.com/vipsoft/" target="_blank">博客</a></li> <li><a href="https://gitee.com/vipsoft" target="_blank">开源</a></li> </ul> </div> <div class="title"> <h1><span style="color: crimson;">VipSoft</span> AI</h1> </div> </header> </body> </html>
本文来自博客园，作者：VipSoft 转载请注明原文链
