一个div布局实现客厅效果代码-html代码-BFW代码库

代码语言：html

代码描述：一个div布局实现客厅效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
@import url("https://fonts.googleapis.com/css?family=Lilita+One");
:root {
  --wall: #ccc4b8;
  --couch: #D48640;
  --couch-border: #AD6D34;
  --couch-legs: #986035;
  --rug-base: #e8d8bc;
  --rug-light-grey: #a89e87;
  --rug-dark-grey: #5E5246;
  --rug-orange: #D97A24;
  --rug-border: #A39D93;
  --artwork-white: #F5EEE0;
  --artwork-canvas-frame: #B3ADA2;
  --artwork-frame: #453E37;
  --artwork-blue: #11A5DB;
  --artwork-yellow: #EAD53D;
  --pot: #47422E;
  --dirt: #6E5330;
  --leaf: #768C14;
  --leaf-dark: #5C6E0F;
  --artwork-1-gradient-1: rgba(72, 98, 245, 0.5);
  --artwork-1-gradient-2: rgba(235, 146, 95, 0.5);
  --artwork-2-dark-blue: #6A6170;
  --artwork-2-light-blue: #95CDE5;
  --artwork-3-light: #DDD9D6;
  --artwork-3-blue: #11A5D8;
  --artwork-3-yellow: #E3D258;
  --artwork-4-sky: #9EC7DD;
  --artwork-4-rock: #389DD7;
  --artwork-4-yellow: #DFEF90;
  --artwork-4-green: #6FCE9F;
  --artwork-4-pink: #B79398;
  --lamp-pole: #A39D9D;
  --lamp-light: #E2E0CF;
}

html {
  font-size: 10px;
}

body {
  align-items: center;
  background-color: var(--wall);
  display: flex;
  font-family: "Lilita One";
  justify-content: center;
  margin: 0;
}

.container {
  align-items: center;
  background-color: var(--wall);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  position: relative;
  width: 100vw;
}

a {
  color: var(--rug-orange);
  cursor: pointer;
  font-size: 1.3rem;
  text-decoration: none;
  transform: translateY(20rem);
}
a:hover {
  text-decoration: underline;
}

.living-room {
  background-image: linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), linear-gradient(90deg, var(--couch-border) 7%, var(--couch) 7% 93%, var(--couch-border) 93%), radial-gradient(circle at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(circle at 50% 100%, var(--couch-border) 50%, transparent 50%), linear-gradient(90deg, var(--couch-border) 7%, var(--couch) 7% 93%, var(--couch-border) 93%), radial-gradient(circle at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(circle at 50% 100%, var(--couch-border) 50%, transparent 50%), linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), radial-gradient(ellipse at 100% 90%, var(--leaf), 50%, transparent 50%), radial-gradient(ellipse at 100% 0%, var(--leaf), 50%, transparent 50%), radial-gradient(circle at 0% 50%, var(--leaf) 50%, transparent 50%), radial-gradient(ellipse at 0% 100%, transparent, 48%, var(--leaf) 48% 52%, transparent 52%), linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), radial-gradient(ellipse at 100% 90%, var(--leaf), 50%, transparent 50%), radial-gradient(ellipse at 100% 0%, var(--leaf), 50%, transparent 50%), radial-gradient(circle at 0% 50%, var(--leaf) 50%, transparent 50%), radial-gradient(ellipse at 0% 100%, transparent, 48%, var(--leaf) 48% 52%, transparent 52%), linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), radial-gradient(ellipse at 0% 90%, var(--leaf), 50%, transparent 50%), radial-gradient(ellipse at 0% 0%, var(--leaf), 50%, transparent 50%), radial-gradient(circle at 100% 50%, var(--leaf) 50%, transparent 50%), radial-gradient(ellipse at 100% 100%, transparent, 48%, var(--leaf) 48% 52%, transparent 52%), radial-gradient(ellipse at 50% 100%, var(--dirt) 50%, transparent 50%), radial-gradient(circle at 50% 0%, var(--pot) 50%, transparent 50%), linear-gradient(90deg, var(--pot), var(--pot)), radial-gradient(ellipse at 50% 100%, var(--pot) 50%, transparent 50%), radial-gradient(circle at 50% 0%, var(--lamp-pole) 50%, transparent 50%), radial-gradient(circle at 50% 0%, var(--lamp-light) 50%, transparent 50%), linear-gradient(90deg, var(--lamp-pole), var(--lamp-pole)), radial-gradient(ellipse at 50% 50%, var(--lamp-pole) 50%, transparent 50%), linear-gradient(0deg, var(--artwork-1-gradient-1), var(--artwork-1-gradient-2)), linear-gradient(90deg, var(--artwork-canvas-frame) 5%, transparent 5% 95%, var(--artwork-canvas-frame) 95%), linear-gradient(180deg, var(--artwork-canvas-frame) 5%, var(--artwork-white) 5% 95%, var(--artwork-canvas-frame) 95%), radial-gradient(circle at 50% 50%, var(--artwork-2-dark-blue) 50%, transparent 50%), radial-gradient(circle at 50% 50%, var(--artwork-white) 50%, transparent 50%), linear-gradient(0deg, var(--artwork-2-dark-blue) 37%, var(--artwork-2-light-blue) 37%), linear-gradient(90deg, var(--artwork-white), var(--artwork-white)), linear-gradient(90deg, var(--artwork-frame), var(--artwork-frame)), radial-gradient(circle at 50% 50%, var(--artwork-3-blue) 50%, transparent 50%), radial-gradient(circle at 50% 50%, var(--artwork-3-yellow) 50%, transparent 50%), linear-gradient(0deg, var(--artwork-3-blue) 35%, var(--artwork-3-light) 35%), linear-gradient(90deg, var(--artwork-white), var(--artwork-white)), linear-gradient(90deg, var(--artwork-frame), var(--artwork-frame)), linear-gradient(225deg, transparent 25%, var(--artwork-yellow) 25% 90%, transparent 90%), linear-gradient(135deg, transparent 25%, var(--artwork-yellow) 25% 90%, transparent 90%), linear-gradient(90deg, var(--artwork-white) 20%, var(--artwork-4-pink) 20% 50%, var(--artwork-4-green) 50%), linear-gradient(90deg, var(--artwork-4-rock) 65%, var(--artwork-white) 65% 85%, var(--artwork-4-rock) 85%), radial-gradient(circle at 50% 50%, var(--artwork-4-sky) 90%, transparent 90%), linear-gradient(90deg, var(--artwork-canvas-frame) 3%, transparent 3% 97%, var(--artwork-canvas-frame) 97%), linear-gradient(180deg, var(--artwork-canvas-frame) 3%, var(--artwork-white) 3% 97%, var(--artwork-canvas-frame) 97%), radial-gradient(ellipse at 100%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border), var(--couch-border)), radial-gradient(ellipse at 0%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border) 1.5%, var(--couch) 1.5% 98.5%, var(--couch-border) 98.5%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), radial-gradient(ellipse at 100% 35%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border), var(--couch-border)), radial-gradient(ellipse at 0% 35%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border) 2%, var(--couch) 2% 98%, var(--couch-border) 98%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch.........完整代码请登录后点击上方下载按钮下载查看