Tuesday, 5 April 2016

Create a Box Model using CSS (Cascading Style Sheets) Styles as shown below.

              1:
www.programmingwithbasics.com

                2.

           
www.programmingwithbasics.com

Code Copy From Here


1.
<html><head><title>css style</title>
</head>
<body><center>
<table border="1" height="600" width="600" align="top" bgcolor="magenta" style="margin-top:10px">
<tr><td>
<table border="2" height="85%" width="85%" bgcolor="pink" style="margin-left:50px"><h2 align="center">Margin</h2>
<tr><td>
<table border="3" height="80%" width="80%" bgcolor="yellow" style="padding:20px;margin-left:48px"><h2 align="center">Border</h2>
<tr><td>
<table border="2" height="70%" width="70%" bgcolor="red" style="margin-left:50px"><tr><h2 align="center">Padding</h2>
<td align="center"><h2 align="center">Element Content</h2>Therefore, to ascertain the total space required to place an element on the page, 
add the content area’s dimensions to any padding, borders, and margins that have been declared.</td>
</tr>

</table>
</td></tr></table></td></tr></table></td></tr></table></body></html>

2.
<html>
<head>
<style>
#in
{
 width:20%;
 height:25%;
 padding:90px;
 margin-top:40px;
 transform: rotate(-10deg);
background-color:mediumorchid;
border-color:black;
}
#d
{
width:20%;
height:30%;
margin-left:-100px;
transform: rotate(-10deg);
background-image:url("na.jpg");
opacity: 0.8;
border-color:black;
}
#e
{
width:20%;
height:30%;
margin-left:-100px;
transform: rotate(-10deg);
border-color:black;
background-image:url("t1.jpg");
opacity: 0.8;
}

table
{
 width:20%;
 height:30%;
margin-top:-13%;
margin-left:40%;
transform: rotate(-10deg);
border-style:solid;
border-color:yellow;
}
#td1
{
color:red;
border:none;
padding-left:29%;
}
</style>
</head>
<body bgcolor="LIGHTCORAL">
<marquee>
<b style="font-size:30px;color:brown">
BOX MODEL HIERACHY
</marquee>
<br><br><br><br><br><br>
       <p style="margin-left:30px">
<input type="textfield" id="in">
<input type="textfield" id="d">
<input type="textfield" id="e">
<table border="1">
<tr>
<td id="td1">
The box model is the specification that defines how a box and its attributes relate to each other.
</td>
</tr>
</table>
</p>
</body>
</html>

Output:

www.programmingwithbasics.com


www.programmingwithbasics.com






















Extreme Recommended:- Like our Facebook Page or Join our Facebook Group and Google plus Community for up-to-date. If you have any Query or Question you can ask in the group, I will Try To Solve your Query and try to answers of your Questions withing 24 Hours, You can also Email me or comment below Please suggest to your Friends to join and like our page and don't forget to Subscribe. Enter your Email and click to subscribe.

subodh yadav

Ghanendra Yadav

Hello, I Am Ghanendra Yadav Owner of This Blog, I am professional Blogger and Programmer. I Love Programming, Logo Making, And Banner Designing. My Highest Qualification is MCA From NIT Warangal. You Can Find Me On Social Media Through Below Link And If You Have Any Query Related To Programming And Other Subject Comment Below or You Can Mail Me I Will Try To Answer Within 24 Hours Email:- yghanendra@student.nitw.ac.in

Find me on Social Media

Facebook | Twitter | Google+ | RSS Feed

No comments:

Post a Comment