个人中心
gpt4 book ai didi

html - 网站布局困惑

转载 作者：行者123 更新时间：2023-11-28 06:41:55 25 4
gpt4 key购买 nike

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

    <!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/

最佳答案

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

关于html - 网站布局困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34236265/

25 4 0
文章推荐： swift - 安装用于 firebase 的 cocoapods 挂起并卡住
文章推荐： javascript - 如何在 angular.js 中分别编写 Controller 、服务、路由和模块？
文章推荐： html - 如何管理 Css Floats
文章推荐： JavaFX CSS 行不会相交
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com