div+css布局实现gameboy便携游戏机代码

代码语言:html

所属分类:布局界面

代码描述:div+css布局实现gameboy便携游戏机代码

代码标签: div css 布局 gameboy 便携 游戏机 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@700&display=swap');

:root{
  --size: 210px;
  --primary-color: #FFB400;
  --secondary-color: #FFBF00;
  --tertiary-color: #FF7900;
  --quaternary-color: #FFA100;
  --quinary-color:#FF9100;
  --sextarian-color:#843907;
}

html,body,.container{
  margin:0;
  padding:0;
  height:100vh;
}

body{
  background:#998E84;
}

.container{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:48px;
  align-items:center;
  justify-content:center;
  transform:scale(0.9);

}

.console-container{
  display:grid;
  height:422px;
  width:var(--size);
  border-radius:24px;
  box-shadow: 20px 20px 0px #0002;
}

.original{
  display:grid;
  margin:0;
  padding:0;
  height:48px;
  width:156px;
  background:#FFB400;
  align-items:center;
  justify-content:center;
  justify-self:center;
  font-family:Jost,sans-serif;
  font-weight:bold;
  font-size:20px;
  text-decoration:none;
  color: #4F3825;
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0