One way to create a responsive webpage design, is to create it yourself using the HTML setup shown below. This particular demonstration will not really work well on this page because of the table I'm using on it, so click here to see the webpage in its full responsive glory.
| The <style> content: | The <body> content: |
|---|---|
|
<style>
.city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; } .myown { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; color:olive; border: 1px solid olive; } </style> |
<body>
<div> <h1>RWD Demonstration</h1> <h3>Resize this responsive page!</h3> <div class="city"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> <div class="myown"> <h2>View Source</h2> <p>View the source code to see how this page was built, or look at the previous page.</p> <hr /> <p><i>I can't say that I like the way my "back" button jumps around, but I don't know how to fix that... yet. I could put it into one of these boxes or at the top, before the boxes, but I <b>want</b> it stationary, on the bottom of the webpage. I wish I knew why it <b>insists</b> on moving around!</i></p> </div> </div> <div> <p><a href="rwd1.html"><img src="images/back.jpg" alt="Back button" style="height:42px;width:93px"></a></p> </div> </body> |
