我已经使用切片从photoshop设计导出div标签到dreamweaver,从头部提取css并创建样式表。页面中的所有div标签都为每个标签设置了绝对位置。我已经尝试了所有我能想到的东西来集中页面上的所有内容,但没有任何工作。有人可以看看代码并告诉我我错过了什么。
<HTML>
<html>
<head>
<title>Packet Access</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style_sheet.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px;
margin-left: 0px; margin-right: 0px`enter code here`;">
<div id="Table_01">
<div id="topper">
</div>
<div id="Topper-2">
</div>
<div id="search">
<img src="images/search.png" width="133" height="19" alt="">
</div>
<div id="topper-side2"></div>
<div id="topper-side"></div>
<div id="Logo">
<img src="images/Logo.png" width="254" height="37" alt="">
</div>
<div id="side-logo-right"></div>
<div id="under-search"></div>
<div id="index-09"></div>
<div id="navigation">
<img src="images/navigation.png" width="457" height="20" alt="">
</div>
<div id="under-logo"></div>
<div id="under-navigation"></div>
<div id="divider">
<img src="images/divider.jpg" width="1024" height="3" alt="">
</div>
<div id="bg-left">
<img src="images/bg_left.jpg" width="131" height="147" alt="">
</div>
<div id="index-15">
<img src="images/index_15.png" width="764" height="52" alt="">
</div>
<div id="bg-right">
<img src="images/bg_right.jpg" width="129" height="147" alt="">
</div>
<div id="index-17">
<img src="images/index_17.jpg" width="764" height="243" alt="">
</div>
<div id="index-18">
<img src="images/index_18.jpg" width="130" height="519" alt="">
</div>
<div id="index-19">
<img src="images/index_19.jpg" width="1" height="148" alt="">
</div>
<div id="index-20">
<img src="images/index_20.jpg" width="1" height="148" alt="">
</div>
<div id="index-21">
<img src="images/index_21.jpg" width="128" height="519" alt="">
</div>
<div id="index-22">
<img src="images/index_22.png" width="766" height="43" alt="">
</div>
<div id="index-23">
<img src="images/index_23.png" width="12" height="1" alt="">
</div>
<div id="OTT-box">
<img src="images/OTT_box.jpg" width="242" height="99" alt="">
</div>
<div id="index-25">
<img src="images/index_25.png" width="9" height="1" alt="">
</div>
<div id="XFP">
<img src="images/XFP.jpg" width="242" height="99" alt="">
</div>
<div id="index-27">
<img src="images/index_27.png" width="10" height="1" alt="">
</div>
<div id="Cache">
<img src="images/Cache.jpg" width="242" height="99" alt="">
</div>
<div id="index-29">
<img src="images/index_29.png" width="9" height="1" alt="">
</div>
<div id="index-30">
<img src="images/index_30.jpg" width="12" height="327" alt="">
</div>
<div id="index-31">
<img src="images/index_31.jpg" width="9" height="327" alt="">
</div>
<div id="index-32">
<img src="images/index_32.jpg" width="10" height="327" alt="">
</div>
<div id="index-33">
<img src="images/index_33.jpg" width="9" height="327" alt="">
</div>
<div id="index-34">
<img src="images/index_34.png" width="242" height="81" alt="">
</div>
<div id="index-35">
<img src="images/index_35.png" width="242" height="81" alt="">
</div>
<div id="index-36">
<img src="images/index_36.png" width="242" height="81" alt="">
</div>
<div id="index-37">
<img src="images/index_37.jpg" width="242" height="148" alt="">
</div>
<div id="index-38">
<img src="images/index_38.jpg" width="242" height="148" alt="">
</div>
<div id="index-39">
<img src="images/index_39.jpg" width="242" height="148" alt="">
</div>
<div id="footer">Copyright © 2012 Packet Access</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
<!--The CSS is below-->
<CSS>
@charset "utf-8";
*{
margin:0;
padding:0;
}
.body {
background-color: #000;
text-align:center; /*For IE6 Shenanigans*/
}
#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
}
#topper {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:10px;
background-color:#000000;
}
#Topper-2 {
position:absolute;
left:0px;
top:10px;
width:763px;
height:6px;
background-color:#000000;
}
#search {
position:absolute;
left:763px;
top:10px;
width:133px;
height:19px;
background-color:#000000;
}
#topper-side2 {
position:absolute;
left:896px;
top:10px;
width:128px;
height:59px;
background-color:#000000;
}
#topper-side {
position:absolute;
left:0px;
top:16px;
width:130px;
height:53px;
background-color:#000000;
}
#Logo {
position:absolute;
left:130px;
top:16px;
width:254px;
height:37px;
}
#side-logo-right {
position:absolute;
left:384px;
top:16px;
width:379px;
height:26px;
background-color:#000000;
}
#under-search {
position:absolute;
left:763px;
top:29px;
width:133px;
height:13px;
background-color:#000000;
}
#index-09 {
position: absolute;
left: 384px;
top: 42px;
width: 55px;
height: 27px;
background-color: #000;
}
#navigation {
position:absolute;
left:439px;
top:42px;
width:457px;
height:20px;
background-color:#000000;
}
#under-logo {
position:absolute;
left:130px;
top:53px;
width:254px;
height:16px;
background-color:#000000;
}
#under-navigation {
position:absolute;
left:439px;
top:62px;
width:457px;
height:7px;
background-color:#000000;
}
#divider {
position:absolute;
left:0px;
top:69px;
width:1024px;
height:3px;
background-color:#000000;
}
#bg-left {
position:absolute;
left:0px;
top:72px;
width:131px;
height:147px;
}
#index-15 {
position:absolute;
left:131px;
top:72px;
width:764px;
height:52px;
}
#bg-right {
position:absolute;
left:895px;
top:72px;
width:129px;
height:147px;
}
#index-17 {
position:absolute;
left:131px;
top:124px;
width:764px;
height:243px;
}
#index-18 {
position:absolute;
left:0px;
top:219px;
width:130px;
height:519px;
}
#index-19 {
position:absolute;
left:130px;
top:219px;
width:1px;
height:148px;
}
#index-20 {
position:absolute;
left:895px;
top:219px;
width:1px;
height:148px;
}
#index-21 {
position:absolute;
left:896px;
top:219px;
width:128px;
height:519px;
}
#index-22 {
position:absolute;
left:130px;
top:367px;
width:766px;
height:43px;
}
#index-23 {
position:absolute;
left:130px;
top:410px;
width:12px;
height:1px;
}
#OTT-box {
position:absolute;
left:142px;
top:410px;
width:242px;
height:99px;
}
#index-25 {
position:absolute;
left:384px;
top:410px;
width:9px;
height:1px;
}
#XFP {
position:absolute;
left:393px;
top:410px;
width:242px;
height:99px;
}
#index-27 {
position:absolute;
left:635px;
top:410px;
width:10px;
height:1px;
}
#Cache {
position:absolute;
left:645px;
top:410px;
width:242px;
height:99px;
}
#index-29 {
position:absolute;
left:887px;
top:410px;
width:9px;
height:1px;
}
#index-30 {
position:absolute;
left:130px;
top:411px;
width:12px;
height:327px;
}
#index-31 {
position:absolute;
left:384px;
top:411px;
width:9px;
height:327px;
}
#index-32 {
position:absolute;
left:635px;
top:411px;
width:10px;
height:327px;
}
#index-33 {
position:absolute;
left:887px;
top:411px;
width:9px;
height:327px;
}
#index-34 {
position:absolute;
left:142px;
top:509px;
width:242px;
height:81px;
}
#index-35 {
position:absolute;
left:393px;
top:509px;
width:242px;
height:81px;
}
#index-36 {
position:absolute;
left:645px;
top:509px;
width:242px;
height:81px;
}
#index-37 {
position:absolute;
left:142px;
top:590px;
width:242px;
height:148px;
#index-38 {
position:absolute;
left:393px;
top:590px;
width:242px;
height:148px;
}
#index-39 {
position:absolute;
left:645px;
top:590px;
width:242px;
height:148px;
}
#footer {
position: absolute;
left: 0px;
top: 738px;
width: 100%;
height: 21px;
background-color: #000000;
font-family: "Helvetica LT Std";
font-size: 14px;
color: #999;
text-decoration: none;
text-align: center;
padding-top: 3px;
padding-bottom: 2px;
}
</style>
答案 0 :(得分:0)
要回答如何将所有内容置于页面中心的直接问题,请从{<1}}更改:
#Table_01
为:
#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
}