 |
| Display LayOut Part 1 | set Layout using CSS |
Hello Guys,
Kaise hai aap, Source of Display Lay out is here :-
In HTML
<DOCTYPE html> <html> <head> <title> Display Layout </title> <link rel="stylesheet" href="Display.css"> </head> <body> <div class="p"> <p>This Paragraph under Inline Block</p> </div> <br/> <br/> <br/> <div class="p1" > <p> This is Paragraph</p> </div> <br/> <div class="p2"> <p> This is Paragraph</p> </div> <br/>
<br/> <div class="p3"> <p> This is Paragraph</p> </div> <div class="grid" > <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> <div class="box g">G</div> <div class="box h">H</div> <div class="box i">I</div> </div> </body> <html>
In CSS
body
{
font: absolute;
}
.p
{
display: inline;
background:gray;
font-size: 25px;
padding:5px;
left:50px;
}
.p1
{
display:block;
background:yellow;
font-size:25px;
padding:5px;
left:50px;
}
.p2
{
display:inline-block;
margin-left:200px;
border:6px dotted #949599;
height:100px;
width:300px;
font-size:25px;
left:30px;
padding:20px;
left:50px;
}
.p3
{
display:none;
background:yellow;
font-size:25px;
padding:5px;
left:50px;
}
.grid
{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap:10px;
background:;
font-size: 25px;
padding:5px;
left:50px;
}
.Box
{
Background-color: #444;
color:#fff;
border-radius:5px;
padding:20px;
font-size:150%;
}
Comments
Post a Comment