We would like to know how to create Search Page Structure.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
header {<!-- w ww. j a v a 2s .c o m-->
text-align: right;
}
header li {
display: inline;
}
div {
width: 400px;
margin: 0 auto;
text-align: center;
}
div img {
width: 100%;
}
div input {
display: block;
width: 100%;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer ul:nth-child(1) {
float: left;
}
footer ul:nth-child(2) {
margin-right: 40px;
float: right;
}
footer li {
display: inline;
}
</style>
</head>
<body>
<header>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</header>
<div>
<img
src="http://placehold.it/400x400"
alt=""> <input type="text">
<button>Search</button>
<button>Lucky</button>
</div>
<footer>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</footer>
</body>
</html>
The code above is rendered as follows: