<分区>
我制作了一个简单的搜索引擎，除了设计方面，其他都很好用。在 PC 上，按钮出现在顶部中央，但一旦我们在手机上进行设计，按钮就会出现在右上角。
应用了一项更改，这是更新版本。
手机:Android，三星 Galaxy S4，5 英寸 1080x1920
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search</title>
<style>
*{margin:0px;
padding:0px;
}
#menu {
height:38px;
padding-top:0px;
background-color:white;
margin-left: auto
margin-right: auto
}
.photo {
position:relative;
font-family:arial;
overflow:hidden;
border:0px;
width:811px;
height:98px;
margin-left:250px;
}
.photo .heading, .photo .caption {
position:absolute;
background:#000;
height:50px;
width:816px;
opacity:0.6;
}
.photo .heading {
top:-50px;
}
.photo .caption {
bottom:-42px;
left:3px;
}
.photo .heading span {
color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#FF0;
font-size:16px;
display:block;
padding:5px 10px 0 10px;
}
.footer {
font-family: Calibri;
font-size: 18px;
color: #000;
}
head {
text-align: center;
}
menu1 {
text-align: center;
}
.footer a {
text-align: center;
}
.menuhead {
font-family: Calibri;
}
.menuhead {
font-size: 24px;
}
.menuhead {
font-size: 18px;
}
.footer1 {
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: #000;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="/search/books/index.html">Books</a> </li>
<li><a href="/search/list.php">Add Url</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div>
<p><center>
<p class="menuhead"><br>
</p>
<br>
</center>
</div>
<center>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<img src="images/img2.png" width="817" height="110">
</center>
<form action="/search/search.php" method='GET'>
<center>
<p><br>
</p>
<p> </p>
<p>
<input name='search' type='text' class="footer1" size='50'></font></p>
<p> </p>
</center>
<p class="footer1"><center>
<input name='submit' type='submit' class="footer1" value='Search Now'>
</center>
</p>
</form>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1">
<p class="footer1">
<p class="footer1">
<center>
<g:plusone size="tall" annotation="i0nline"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</center></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>