HCI: Laboratory Activity #7 - CSS Box Model and Positioning

The CSS Box Model

div {
  width: 250px;
  height: 100px;  background-color: #ff0000;
  border: 1px solid #000000;
}

div#d2 {
  width: 250px;
  height: 100px;
  background-color: #ff0000;
  border: 5px solid #000000;
  margin: 10px;
  padding: 10px;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Positioning the Color Blocks</title>   <style type="text/css">
   div {
     position:relative;
     width:250px;
     height:100px;
     border:5px solid #000;
     color:black;
     font-weight:bold;
     text-align:center;
    }
    div#d1 {
     background-color:red;
    }

    div#d2 {
     background-color:green;
    }

    div#d3 {
     background-color:blue;
    }

    div#d4 {
     background-color:yellow;
    }
   </style>

</head>
<body>
  <div id="d1">DIV #1</div>
  <div id="d2">DIV #2</div>
  <div id="d3">DIV #3</div>
  <div id="d4">DIV #4</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Positioning the Color Blocks</title>
    <style type="text/css">
    div {
     position:absolute;
     width:250px;
     height:100px;
     border:5px solid #000;
     color:black;
     font-weight:bold;
     text-align:center;
    }
    div#d1 {
     background-color:red;
     left:0px;
     toppx;
    }
    div#d2 {
     background-color:green;
     left:75px;
     top:25px;
    }
    div#d3 {
     background-color:blue;
     left:150px;
     top:50px;
    }
    div#d4 {
     background-color:yellow;
     left:225px;
     top:75px;
    }
    </style>
</head>
<body>
  <div id="d1">DIV #1</div>
  <div id="d2">DIV #2</div>
      <div id="d3">DIV #3</div>
  <div id="d4">DIV #4</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Positioning the Color Blocks</title>
   <style type="text/css">
   div {
     position:absolute;
     width:250px;
     height:100px;
     border:5px solid #000;
     color:black;
     font-weight:bold;
     text-align:center;
    }
    div#d1 {
     background-color:red;
     left:0px;
     top:0px;
     z-index:0;
    }
    div#d2 {
     background-color:green;
     left:75px;
     top:25px;
     z-index:3;
    }
    div#d3 {
     background-color:blue;
     left:150px;
     top:50px;
     z-index:2;
    }
   div#d4 {     background-color:yellow;
     left:225px;
     top:75px;
     z-index:1;
    }
   </style>
</head>
<body>
  <div id="d1">DIV #1</div>
  <div id="d2">DIV #2</div>
  <div id="d3">DIV #3</div>
  <div id="d4">DIV #4</div>
</body>
</html>

HCI

Huwebes, Enero 31, 2019

Laboratory Activity #7 - CSS Box Model and Positioning

The CSS Box Model

Walang komento:

Mag-post ng isang Komento