我目前正在使用 HTML 和 CSS 构建一个网站。
我有一个与缩放有关的小问题。当页面被缩小时，大多数元素都会变得混乱和不合适。
使用的浏览器：
- 谷歌浏览器
- 苹果浏览器
- 歌剧
更何况，当在 27 英寸屏幕上从 Safari 浏览时，它变得更加糟糕。
索引.html
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Arrow-TvSeries - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta property="fb:admins" content="{793705343}"/>
</head>
<body>
<center>
<table>
<tr>
<td align="center">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=80504353315";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '793705343', // App ID from the app dashboard
channelUrl : '//www.arrow-tvseries.com/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
cookie : true, // enable cookies to allow the server to access the session
oauth : true // enable OAuth 2.0
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asyncchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:f="http://java.sun.com/jsf/core">
<!--website-->
<div id="hood_image">
<br/><br/><br/></br></br></br><img src="images/oli_arrow4.png" align="right"/>
</div>
<div id="sitewrapper">
<div id="header"></div>
<div id="line"></div>
<div id="menu">
<br><a href="index.html">Home</a> | <a href="cast.html">Cast</a> | <a href="episodes.html">Episodes</a>
</div>
<!--content-->
<div id="content">
<div id="episodecontent">
<table border="0">
<tr>
<td>
<img id="episodeimg" src="images/Next-Episode.png"/>
</td>
<td>
<p style="color: white"><b>Title:</b> Home Invasion<br/><b>Date:</b> 24th April 2013</p>
</td>
</tr>
</table>
</div>
<div id="division1">
<p>After a violent shipwreck, billionaire playboy Oliver Queen was
missing and presumed dead for five years before being discovered
alive on a remote island in the Pacific. When he returns home to
Starling City, his devoted mother Moira, much-beloved sister Thea,
and best friend Tommy welcome him home, but they sense Oliver has
been changed by his ordeal on the island. While Oliver hides the
truth about the man he's become, he desperately wants to make amends
for the actions he took as the boy he was. Most particularly, he
seeks reconciliation with his former girlfriend, Laurel Lance.</p><br/>
<p>As Oliver reconnects with those closest to him, he secretly creates
the persona of Arrow a vigilante to right the wrongs of his family,
fight the ills of society and restore Starling City to its former glory.
By day, Oliver plays the role of a wealthy, carefree and careless
philanderer he used to be - flanked by his devoted chauffeur/bodyguard,
John Diggle - while carefully concealing the secret identity he turns
to under the cover of darkness. However, Laurel's father, Detective
Quentin Lance, is determined to arrest the vigilante operating in his
city. Meanwhile, Oliver's own mother, Moira, knows much more about the
deadly shipwreck than she has let on and is more ruthless than he
could ever imagine.</p><br/>
<p style="font-size: 20px"><b>I n t r o d u c t i o n</b></p><br/>
<p>At the beginning of each episode, with the exception of "Pilot", the
first episode of the series, a voiceover of Oliver Queen describes
briefly the hardships that Oliver faced on Lian Yu. He states that
as he returned, he set out to fulfill his father's dying wish.</p><br/>
<p>"My name is Oliver Queen. For five years I was stranded on an
island with only one goal: survive. Now I will fulfill my father's
dying wish. To use the list of names he left me and bring down those
who are poisoning my city. To do this, I must become someone else.
I must become... something else."</p>
<div id="video" align="middle">
<iframe width="640" height="360"
src="http://www.youtube.com/embed/xZrFSsc6CpI?autoplay=1"
frameborder="1" allowfullscreen>
</iframe>
<!--?autoplay=1-->
</div>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8938167182852335";
/* Home paga bottom */
google_ad_slot = "9919170802";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style="float: right; font-size: 9px;">
<p><br/><br/>Most of the information about this Tv-Show is taken from <a href="http://http://www.imdb.com/title/tt2193021/?ref_=sr_1" target="new">IMDB.COM</a></p>
</div>
</div>
<div id="division2">
<div class="fb-comments" data-href="http://www.arrow-tvseries.com" data-width="200"
data-num-posts="10" data-colorscheme="dark">
</div>
<div class="fb-like" data-href="http://www.arrow-tvseries.com" data-send="false"
data-width="220" data-show-faces="true" data-font="arial">
</div><br/>
<div><br/>
<p><b>You may also like:</b></p>
</div>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8938167182852335";
/* First Ad */
google_ad_slot = "7105305203";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
<br/><br/><a href="http://www.imdb.com"><img src="images/imdb.png" alt="IMDB" width="100" /></a>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</center>
</body>
样式.css
a:link {color:#fff;} /* unvisited link */
a:visited {color:#fff;} /* visited link */
a:hover {color:#2e6402;} /* mouse over link */
a:active {color:#fff;} /* selected link */
#table{
padding-top: 30px;
padding-bottom: 30px;
z-index: 100;
}
#header{
background-position: center;
position: relative;
background-image:url('images/logo_bg.png');
background-repeat:no-repeat;
border-radius: 25px;
height: 331px;
width: 1300px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: -3;
/*border:2px solid;*/
display:block;
margin: 0 auto 0 auto;
}
#line{
width: 1290px;
height: auto;
background-color: white;
padding-top: 1px;
margin: 0 auto 0 auto;
}
body{
background-color: black;
}
#sitewrapper{
width: 1300px;
height: 100%;
padding-left: 0px;
padding-top: 3px;
padding-right: auto;
margin: 0 auto 0 auto;
}
p{
text-align: justify;
font-family: arial;
padding-left: 0px;
margin: 0 auto 0 auto;
color: white;
}
p2{
text-align: justify;
font-family: arial;
padding-left: 0px;
color: green;
margin: 0 auto 0 auto;
}
#menu{
width: 1250px;
height: auto;
color: white;
padding-top: 0px;
padding-right: 100px;
padding-bottom: 0px;
font-size: 120%;
/*border:2px solid;*/
text-align: right;
font-family: arial;
z-index: 31;
position: relative;
margin: 0 auto 0 auto;
}
#episodeimg{
width: 250px;
float: left;
padding-top:0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
margin: 0 auto 0 auto;
}
#episodecontent{
width: 55%;
float: auto;
margin: 0 auto 0 auto;
}
#hood_image{
float: left;
width: 30%;
height: auto;
position: fixed;
z-index: 1;
padding-left: 0px;
}
#content{
float: right;
width: 85%;
position: absolute;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: 5;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}
#division1{
position: relative;
float: left;
height: 100%;
width: 700px;
color: white;
padding-top: 30px;
padding-left: 20%;
padding-right: 0px;
padding-bottom: 10px;
z-index: 30;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}
#division2{
float: right;
height: 100%;
width: 20%;
/*padding-top: 0px;
padding-left: 0px;
padding-right: 0px;*/
color: white;
border:2px solid;
margin: 0 auto 0 auto;
z-index: 1000;
overflow: hidden;
position: relative;
}
#video{
padding-top: 50px;
padding-left: 0%;
padding-right: 0%;
padding-bottom: 100px;
/*border:2px solid;*/
}
#footer{
/*background-color: red;*/
height: 10px;
width: 100%;
color: black;
background-color: white;
display:block;
}
本网站链接：
www.arrow-tvseries.com