Question

我在为网站的标题，正文和其他部分创建单独的容器时遇到了困难。我不确定我的代码在哪里不正确，但布局不符合计划。任何建议都将不胜感激。

    <!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>San Francisco | Downtown Parking Guide</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>

    <body>
    <!-- Header -->
        <div class="container">
            <nav class="cf">
                <ul>
                    <li><a href="index.html" class="logo" title="Home Page"></a></li>
                    <li><a href="index.html" title="Home Page" class="">Home</a></li>
                    <li><a class="bar">|</a></li>
                    <li><a href="#" title="Downtown Parking List">Downtown Parking List</a></li>
                </ul>
            </nav>
        </div>
    <!-- End Header -->
    <!-- Begin San Francisco Image -->
        <div class="container">

            <div id="sfpic">
                <h1>WELCOME TO THE</h1>
                    <div class="break1"></div>
                <h2>SAN FRANCISCO PARKING GUIDE</h2>
            </div>
    <!-- End San Francisco Image -->
    <!-- Begin Ad  -->      
                <div class="ad">
                    <h1>SPECIAL DEALS</h1>
                        <div class="break1"></div>
                            <h2>RESERVE</h2>
                        <h3>SAN FRANCISCO PARKING AND SAVE UP TO 70%</h3>
                    <button type="button" class="adbutton">RESERVE NOW</button>
                </div>
        </div>
    <!-- End Ad -->
    <!-- Begin Text Below Picture & Add -->
        <div class="container">
            <div class="break1"></div>
                <p>San Francisco is a cultural, commerical, and financial center in Northern California and the only consolidated city in Northern California. San Francisco is known as a popular tourist destination due to it's cool summers, fog, steep hills, eclectic mix of architecture and landmarks including the Golden Gate Bridge, cable cars, Alcatraz, and Chinatown.</p>

        </div>
    </body>
    </html>

CSS:

@charset "UTF-8";
/* CSS Document */
html {
    background: #ffffff; }
body {
    font-family: "Helvetica Neue", Times, serif;
    width: 75%;
    margin: 0 auto; }
@font-face { font-family: "Helvetica Neue"; src: url url(../Images/HelveticaNeue.ttf); } 
@font-face { font-family: "Avenir"; src: url(../Images/AvenirLTStd-Light.otf); }

/*--- Begin Header Section ---*/

.logo {
    display: block;
    padding: 0; 
    margin: 30px 330px 0 20px;
    background-image: url(../Images/DPG-Logo.jpg) ;
    width: 406px;
    height: 28px;
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table; }
.cf:after {
    clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1; }
/*horizontal menu styles*/  
nav {
    background: #FFF }

ul, li {
    margin : 0;
    padding: 0;
    list-style: none;
    float: left; 
    }

ul {
    background: none;
    height: none; 
    margin: 0;
    padding: 0;
    }

li {
    display: inline-block; 
}
li a {
    display: block;
    line-height: none;
    padding: 0;
    color: #8b9093;
    text-decoration: none;
    margin: 36px 0 0 30px;
}
li a:hover {
    color: #FE5A1D;
    }

li a:active {
    color: #d74c18;
}

.bar {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
a.bar:hover{
    color: #8b9093;
}
/*--- Need to Fix This ---*/
/*---Need to Fix This ---*/
/*--- End Header Section ---*/


/*--- Begin City Picture Section ---*/
.container {
    width: 70%;
    margin: 0;
    padding: 0;
}
#sfpic {
    background-image: url(../Images/sf-downtown.jpg);
    width: 750px;
    height: 500px;
    margin: 40px 0 0 0 ;
    padding: 0;
    display: block;
    float: left;
}
#sfpic h1 {
    font-family: "Avenir";
    letter-spacing: 1px;
    color: #FFF;
    margin: 425px 0 0 0;
    font-size: 12px;
    font-weight: 100;
    text-align: center;
}
#sfpic h2 {
    font-family: "Avenir";
    letter-spacing: 4px;
    color: #FFF;
    margin: 10px 0 0 0 ;
    font-size: 36px;
    font-style: normal;
    font-weight: 100;
    text-align: center;
}
.break1 {
    padding: 4px 0 0 0 ;
}
/*--- End City Picture Section ---*/

/*--- Begin Ad Section ---*/
.ad {
    background-image: url(../Images/sf-ad.jpg);
    float: left;
    width: 330px;
    height: 500px;
    margin: 40px 0 0 0
}
.ad h1 {
    font-family: "Avenir";
    letter-spacing: 1px;
    color: #FFF;
    margin: 20px 0 0 0;
    font-size: 12px;
    font-weight: 100;
    text-align: center;
}
.break2 {
    padding: 0;
}
.ad h2 {
    font-family: "Avenir";
    letter-spacing: 4px;
    line-height: 1.5;
    color: #FFF;
    margin: 40px 0 0 0px ;
    font-size: 30px;
    font-weight: 100;
    text-align: center;
}
.ad h3 {
    font-family: "Avenir";
    letter-spacing: 4px;
    line-height: 1.5;
    color: #FFF;
    margin: 0 0 0 0px ;
    font-size: 30px;
    font-weight: 100;
    text-align: center;
}
.adbutton {
    background-image: url(../Images/button-reserve.jpg);
    height: 48px;
    width: 160px;
    font-family: "Helvetica Neue";
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #FFF;
    margin: 50px 0 0 90px;
    border:none;
}

.adbutton:hover {
    background-image: url(../Images/button-reserve-hover.jpg);  
}

.adbutton:active {
    background-image: url(../Images/button-reserve-click.jpg)   
}
/*--- End Ad Section ---*/

/*--- Begin First Text Section Below Pictures ---*/
.container p {

}

http://jsfiddle.net/44z5a055/

Answer 1

看起来有不需要的空间和边距，而form ..已经删除了其中一些。 http://jsfiddle.net/44z5a055/

Answer 2

试试bootstrap的基本布局。它会解决你的问题。

网站布局搞砸了

2 个答案: