Ez egy jegyzet a html, css, javascript témában

Layout létrehozása

<div id="canvas"></div>

#canvas {
 width:400px;
 height: 400px;
 background-color: ivory;
}

Középre igazítás, árnyékolás

#canvas {
  width: 300px;
  height: 300px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 10px gray;
}

Új elem hozzáadása, formázása

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>JS Bin</title>
</head>
<body>
<div id=”canvas”>
<div id=”first-row”></div>
</div>
</body>
</html>

CSS

#canvas {
width: 300px;
height: 300px;
background-color: ivory;
margin: 0 auto;
box-shadow: 15px 15px 10px gray;
}
#first-row {
height: 75%;
width: 100%;
background-color: yellow;
}

Piros div

#canvas {
width: 300px;
height: 300px;
background-color: ivory;
margin: 0 auto;
box-shadow: 15px 15px 10px gray;
}
#first-row {
height: 75%;
width: 100%;
background-color: yellow;
}

Piros div

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>JS Bin</title>
</head>
<body>
<div id=”canvas”>
<div id=”first-row”>
<div id=”big-rectangle” class=”red”></div>
</div>
</div>
</body>
</html>

#canvas {
width: 300px;
height: 300px;
background-color: ivory;
margin: 0 auto;
box-shadow: 15px 15px 10px gray;
}
#first-row {
height: 75%;
width: 100%;
background-color: yellow;
}
#big-rectangle {
height: 100%;
width: 75%;
}
.red {
background-color: red;
}

Floatolás

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>JS Bin</title>
</head>
<body>
<div id=”canvas”>
<div id=”first-row”>
<div id=”big-rectangle” class=”red right”></div>
</div>
</div>
</body>
</html>

#canvas {
width: 300px;
height: 300px;
background-color: ivory;
margin: 0 auto;
box-shadow: 15px 15px 10px gray;
}
#first-row {
height: 75%;
width: 100%;
background-color: yellow;
}
#big-rectangle {
height: 100%;
width: 75%;
}
.red {
background-color: red;
}
.right {
float:right;
}

…….

 

A végeredmény:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>JS Bin</title>
</head>
<body>
<div id=”canvas”>
<div id=”first-row”>
<div id=”big-rectangle” class=”red right”></div>
<div id=”first-divider” class=”black right”></div>
<div id=”first-column” class=”right “>
<div id=”first-medium-rectangle”></div>
<div id=”second-divider” class=”black”></div>
<div id=”second-medium-rectangle”></div>
</div>
</div>
<div id=”second-row” class=”black”></div>
<div id=”third-row” class=””>
<div id=”last-column” class=”right”>
<div id=”last-first-media-rectangle”></div>
<div id=”last-divider” class=”black”></div>
<div id=”last-second-media-rectangle” class=”yel”></div>
</div>
<div id=”after-last-divider” class=”black right”></div>
<div id=”last-rectangle” class=”right”></div>
<div id=”after-after-last-divider” class=”black right”></div>
<div id=”after-last-rectangle” class=”right blue”></div>
</div>
</div>
</body>
</html>

#canvas {
width: 300px;
height: 300px;
background-color: ivory;
margin: 0 auto;
box-shadow: 15px 15px 10px gray;
}
#first-row {
height: 75%;
width: 100%;

}
#big-rectangle {
height: 100%;
width: 75%;
}
.red {
background-color: red;
}
.right {
float: right;
}
.black {
background-color: black;
}
.blue {
background-color: blue;
}
.yel {
background-color: yellow;
}
#first-divider {
height: 100%;
width: 3%;
}
#first-column {
height: 100%;
width: 22%;
}
#first-medium-rectangle {
height: 48.5%;
width: 100%;
}
#second-divider {
height: 3%;
width: 100%;
}
#second-medium-rectangle {
height: 48.5%;
width: 100%;
}
#second-row {
height: 3%;
width: 100%;
}
#third-row {
height: 22%;
width: 100%;
}
#last-column {
height: 100%;
width: 5%;
}
#last-first-media-rectangle {
height: 45%;
width: 100%;
}
#last-divider {
height: 10%;
width: 100%;
}
#last-second-media-rectangle {
height: 45%;
width: 100%;
}
#after-last-divider,
#after-after-last-divider{
height: 100%;
width: 3%;
}
#last-rectangle {
height: 100%;
width: 67%;
}
#after-last-rectangle {
height: 100%;
width: 22%;
}