xp.css实现windows xp主题操作系统ui效果代码
代码语言:html
所属分类:布局界面
代码描述:xp.css实现windows xp主题操作系统ui效果代码
代码标签: xp.css windows xp 主题 操作系统 ui 效果 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; } .windows_xp { width: 100vw; height: 100vh; background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ad191820d0.png"); background-size: cover; background-repeat: no-repeat; } .taskbar { position: fixed; bottom: 0; background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7); width: 100vw; height: 30px; } .taskbar__start { height: 100%; color: white; font-weight: bold; font-size: 1.1rem; font-style: italic; border: none; border-radius: 0px 10px 12px 0px; box-shadow: 0px 5px 10px #79ce71 inset; background: radial-gradient(circle, #5eac56 0%, #3c873c 100%) center/cover no-repeat; display: flex; align-items: center; } .taskbar__start--logo { width: auto; height: 80%; } .window__hello { z-index: 3; position: absolute; top: 50%; left: 50%; } .window__tab { position: absolute; left: 3rem; top: 3rem; } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/XP.css"> </head> <body > <article class="windows_xp"> <section> <div class="window window__hello" style="margin: 32px; width: 350px"> <div class="title-bar"> <div class="title-bar-text"> 提示 </div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div> <div class="window-body"> <div style="display: flex; align-items:center;"> <img style="width: 25px; height: 25px;" src="//i.imgur.com/rJnYQnG.png" alt=""> <p>确定重启?</p> </div> <section class="field-row" style="justify-content: flex-end"> <button>OK</button> </section> </div> </div> </section> <section> <div class="window window__tab" style="width: 400px"> <div class="title-bar"> <div class="title-bar-text">A Window With Tabs and Groups</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div> <div class="window-body"> <menu role="tablist"> <button aria-selected="true" aria-controls="music">Music</button> <button aria-controls="dogs">Dogs</b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0