Question

以下是代码：

的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UltimaOath Web Design</title>
<!-- Reset Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>

<body>

<div id="container">
    <div id="header">
    <div class="navigation">
        <ul>
            <li class="navlink left"><a href="index.php"><h1>Home</h1></a></h1></li>
            <li class="navlink"><a href="aboutme.php"><h1>About Me</h1></a></h1></li>
            <li class="navlink"><a href="portfolio.php"><h1>Portfolio</h1></a></h1></li>
            <li class="navlink right"><a href="contact.php"><h1>Contact Me</h1></a></h1></li>
        </ul>
    </div>
    <div class="logo"><img src="img/header/header-logo.png" /></div>
</div>
<div class="clearfix"></div>
<div id="main">
    <div class="box">
        <h1><em>Homepage</em></h1>
        <hr />
        <p>This is a test</p>
    </div>
</div>
<div class="clearfix"></div>
<div id="footer">
    <p>test</p>
</div>
</div>

</body>
</html>

default.css

@charset "utf-8";
/* CSS Document */

@font-face {
font-family: "EssenceSans";
src: url("../font/ESSENCE SANS.TTF");
}

@font-face {
font-family: "EssenceSansItalic";
src: url("../font/ESSENCE SANS ITALIC.TTF");
}

html { 
background: url(../img/background.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fff;
font-family: "EssenceSans", George, serif;
}

#container {
    display: inline-block;
}

em {
    font-family: "EssenceSansItalic", George, serif;
}

.navlink h1 {
    font-size: 42px !important;
}

h1 {
    font-size: 72px;
    margin-top: 15px;
    margin-bottom: 15px;
}

hr {
    border : 0;
    height: 10px;
    margin: 0 auto;
    background: url(../img/separator.png) 0 0 no-repeat;
}

p {
    font-size: x-large;
margin-top: 15px;
margin-bottom: 15px;
}

.clearfix {
    height: 10px;
    line-height: 0px;
    display: block;
    clear: both;
}

#header {
    display: inline-block;
    margin: -25px 50px 0px 50px;
    width: 100%;

    border-width: 45px;
    -moz-border-image: url(../img/box/fullbox.png) 30 repeat;
    -webkit-border-image: url(../img/box/fullbox.png) 30 repeat;
    -o-border-image: url(../img/box/fullbox.png) 30 repeat;
    border-image: url(../img/box/fullbox.png) 30 fill repeat;
}

.navigation {
    float: left;
}

.navigation ul li {
    list-style-type: none;
    margin: 0;
    display: table-cell;
    padding-right: 20px;
    padding-left: 20px;
}

.navlink {
    border-left: 2px #FFF dashed;
    border-right: 2px #FFF dashed;
    padding-left: 20px;
    padding-right: 20px;
}

.navlink.left {
    border-left: none !important;
}

.navlink.right {
    border-right: none !important;
}

.logo {
    float: right;
}

.navigation a {
    color: #FFF;
    text-decoration: none;
}

.navigation a:hover {
    color: #6BC790;
}

.box {
    display: inline-block;
    margin: 0px 50px 0px 50px;

    border-width: 45px;
    -moz-border-image: url(../img/box/fullbox.png) 30 repeat;
    -webkit-border-image: url(../img/box/fullbox.png) 30 repeat;
    -o-border-image: url(../img/box/fullbox.png) 30 repeat;
    border-image: url(../img/box/fullbox.png) 30 fill repeat;
}

#footer {
    display: inline-block;
    position: fixed;
    margin: 0px 50px 0px 50px;

    border-width: 45px;
    -moz-border-image: url(../img/box/fullbox.png) 30 repeat;
    -webkit-border-image: url(../img/box/fullbox.png) 30 repeat;
    -o-border-image: url(../img/box/fullbox.png) 30 repeat;
    border-image: url(../img/box/fullbox.png) 30 fill repeat;
}

reset.css

@charset "utf-8";
/* CSS Document */

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

最后是以上代码显示的网站图片： http://i.imgur.com/0EUiBy1.png

长话短说： 1）我需要页眉和页脚div来适应屏幕的宽度 2）需要中间（主）div适合60％左右并居中

Answer 1

然后简单地添加

width:100%

到页脚和标题容器（注意最小宽度！）

和主要（照顾定位和漂浮）

width:60%;
margin-left:auto; 
margin-right:auto;

希望这会有所帮助。：）

HTML / CSS - 修复代码中的div（更多细节如下）

1 个答案: