Ex:
<div class="tile azul">
<span
class="titulo"> heading </span>
</div>
Here I have given class names to the <div> tags to
identify them separately and to give different properties to the tiles using
CSS.
Ex:
<div class="tile azul">
<span
class="titulo"> heading </span>
</div>
<div class="tile tileLargo verde">
<span class="titulo"> heading
</span>
</div>
The <span> tag is used here to give a heading to each
tile in the home page
<span
class="titulo"> heading </span>
<html>
<head>
<link rel="stylesheet"
href="dhanoj.css"/>
</script>
<script type="text/javascript" src="dhanoj.js">
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><style type="text/css">
<!--
body {
background-color:
#666666;
}
.style1 {
font-family:
"Agency FB";
font-size:
18px;
color:
#FFFFFF;
}
-->
</style></head> <body>
<h1>NSBM Library management System</h1>
<div
class="pagina">
<div
class="linha">
<div
class="tile amarelo">
<span
class="titulo"> heading </span><br/>
<br>
<br>
<img
class="log" src=" ">
</div>
<div
class="tile azul">
<span
class="titulo"> heading </span>
<br>
<img
class="book" src=" ">
</div>
<a
href="">
<div class="tile tileLargo
vermelho">
<span class="titulo"> heading </span>
<br>
<img class="borrowings"
src=" ">
</a>
</div>
<div class="tile verde">
<span class="titulo"> heading
</span><br>
<img class="search" src="">
</div>
<div
class="tile tileLargo amarelo">
<a
href="www.facebook.com"><span class="titulo
style1"> heading </span>
<br>
<img
class="comp" src=" ">
</a></div>
</div>
<div class="linha">
<div class="tile tileLargo
amarelo">
<span class="titulo"> heading
</span>
<br>
<img class="newa" src=" ">
</div>
<div class="tile azul">
<span class="titulo"> heading
</span><br>
<img class="cute" src=" ">
</div>
<div class="tile verde">
<span class="titulo"> heading
</span><br>
<img class="budd" src=" ">
</div>
<div class="tile vermelho">
<span class="titulo"> heading
</span><br>
<img class="binu"
src="file:///C|/wamp/www/Unnamed Site 7/search.png">
</div>
<div class="tile tileLargo
verde">
<span
class="titulo"> heading </span>
<br>
<img
class="six" src=" ">
</div>
</div> <div
class="linha">
<div class="tile amarelo">
<span class="titulo"> heading </span>
</div>
<div class="tile verde">
<span class="titulo"> heading
</span>
</div>
<div class="tile vermelho">
<span class="titulo"> heading
</span>
</div>
<div class="tile tileLargo
verde">
<span class="titulo"> heading
</span>
</div>
<div
class="tile azul">
<span
class="titulo"> heading </span>
</div>
<div
class="tile verde">
</div> </div> </div>
</body>
</html>
And here is the CSS file for the above HTML page
body{ font-family: Century; background: rgb(51,51,51);
color: #fff; padding:20px; }
.pagina{ width:auto ;
height:auto; }
.linha{ width:auto;
padding:5px; height:auto; display:table; }
.tile{ height:150px; width:165px; float:left; margin:0 5px 0
0; padding:2px; }
.tileLargo{
width:340px; }
.amarelo{ background:#FF4000; }
.vermelho{ background:#04B404; }
.azul{
background:#2ECCFA; }
.verde{
background-color: #A901DB }
.selecionado{ background-color: #483D8B; }
.log{ height: 75px;
width:60px; position: relative;
left: 50px;
top:-25px }
.all{width:100% ; height:100%;}
.borro{ height: 50px;
width:50px; float:left; margin:0 5px 0 0; padding:2px; }
.bro{ height: 50px;
width:50px; float:left; margin:0 5px 0 0; padding:2px; }
.search{ height:
50px; width:50px; float:left; margin:0 5px 0 0; padding:2px; }
.book{ height: 75px;
width:60px; position: relative;
left: 50px;
top:15px }
.comp{ height: 75px;
width:60px; position: relative;
left: 135px;
top:15px }
.newa{ height: 75px;
width:60px; position: relative;
left: 135px;
top:15px }
.borrowings{ height:
110px; width:300px; position: relative;
left: 20px;
top:1px }
.six{ height: 110px;
width:300px; position: relative;
left: 20px;
top:1px }
.search{ height:
75px; width:60px; position: relative;
left: 50px;
top:10px }
.cute{ height: 75px;
width:60px; position: relative;
left: 50px;
top:15px }
.budd{ height: 75px; width:60px;
position: relative;
left: 50px;
top:15px }
.binu{ height: 75px;
width:60px; position: relative;
left: 50px;
top:15px }
No comments:
Post a Comment