Analiza y practica.....
Realiza la siguiente practica con los ejercicios del siguiente link:
<html>
<head>
<title>Maquetacion con CSS y Divs</title>
<!<link rel="stylesheet"
href="maquetacion.css" type="text/css"/>
<link rel="stylesheet"
href="DIVIQUIZ05.css" type="text/css"/>
</head>
<body>
<div id
="uno"></div>
<div id
="cuatro"></div>
<div
id ="cuatro01"></div>
<div
id ="tres"></div>
<div
id ="dos01"></div>
<div
id ="dos02"></div>
<div
id ="dos03"></div>
</body>
</html>
DIVIQUIZ05.css
#uno{
background-color:YELLOW;
height:25%;
}
#cuatro{
background-color:green;
height:25%;
width:40%;
float:left;
}
#cuatro01{
background-color:blue;
height:25%;
width:60%;
float:left;
}
#dos01{
height:25%;
background-color:CYAN;
float:left;
width:30%;
}
#dos02{
height:25%;
background-color:BLUE;
float:left;
width:10%;
}
#dos03{
height:25%;
background-color: MAGENTA;
float:LEFT;
width:60%;
}
#tres{
height:25%;
background-color:RED;
clear:both;
}
<html>
<head>
<title>Maquetacion con CSS y Divs</title>
<!<link rel="stylesheet"
href="maquetacion.css" type="text/css"/>
<link rel="stylesheet"
href="DIVIQUIZ09.css" type="text/css"/>
</head>
<body>
<div id
="uno"></div>
<div id
="dos"></div>
<div
id ="tres"></div>
<div
id ="cuatro"></div>
<div
id ="cinco"></div>
<div
id ="uno1"></div>
<div
id ="dos1"></div>
<div
id ="tres1"></div>
<div
id ="cuatro1"></div>
<div
id ="cinco1"></div>
<div
id ="uno"></div>
<div
id ="dos"></div>
<div
id ="tres"></div>
<div
id ="cuatro"></div>
<div
id ="cinco"></div>
<div
id ="uno1"></div>
<div
id ="dos1"></div>
<div
id ="tres1"></div>
<div
id ="cuatro1"></div>
<div id
="cinco1"></div>
</body>
</html>
DIVIQUIZ09.css
#uno{
background-color:blue;
height:25%;
width:20%;
float:left;
}
#dos{
background-color:green;
height:25%;
width:20%;
float:left;
}
#tres{
background-color:blue;
height:25%;
width:20%;
float:left;
}
#cuatro{
background-color:green;
height:25%;
width:20%;
float:left;
}
#cinco{
background-color:blue;
height:25%;
width:20%;
float:left;
}
#uno1{
background-color:green;
height:25%;
width:20%;
float:left;
}
#dos1{
background-color:blue;
height:25%;
width:20%;
float:left; }
#tres1{
background-color:green;
height:25%;
width:20%;
float:left;
}
#cuatro1{
background-color:blue;
height:25%;
width:20%;
float:left;
}
#cinco1{
background-color:green;
height:25%;
width:20%;
float:left;
}
