Question

我在html和css中遇到了一些问题。我的要求如下图所示： -

我的代码如下： -

@font-face {
    font-family: "OpenSans-CondLight";
    src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
@font-face {
    font-family: "Rubik-BoldItalic";
    src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: "RobotoSlab-Regular";
    src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
    height: 350px;
    background: #050000;
    overflow: hidden;
    display: block;
}
.container{
    background: #050000;
}
.top-area{
    float: left;
    width: 20%;
    font-family: "Rubik-BoldItalic";
    font-size: 60px;
    color: #FFFFFF;
    text-transform: uppercase;
    overflow: hidden;
}
.logo-area {
    width: 60%;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 9999;
}

.logo-area img {
    width: 500px;
    height: auto;
    z-index: 9999;
    margin-left: 35px;

}
.search-box {
    width: 25%;
    float: right;
    margin: -300px 73px 0 0;

}
.all-events {
    overflow: hidden;
    background: #FF9D34;
    height: 100px;
    width: 80%;
    margin: auto;
    display: block;
    position: absolute;
    top: 178px;
    border-radius: 10px;
    z-index: 0;


}
.all-events .left-side span{
    float: left;
    color: #000000;
    text-transform: uppercase;
    font-size: 25px;
    padding-left: 20px;
    padding-top: 40px;
}
.all-events .left-side .glyphicon {
    font-size: 45px;
    color: #000;
}
.all-events .right-side span{
    float: right;
    color: #000000;
    text-transform: uppercase;
    font-size: 25px;
}
.main-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    background: #FF931D;
    margin: auto;
}
.main-content .left-content .top-content{
    float: left;
    overflow: hidden;
    display: block;
    width: 55%;
    height: 340px;
    margin-top: 22px;

}
.main-content .left-content .top-content img {
    width: 600px;
    height: 300px;
}
.main-content .left-content .bottom-content{
    float: left;
    overflow: hidden;
    display: block;
    width: 75%;
    height: 340px;
    margin-top: 10px;

}
.main-content .left-content .bottom-content img {
    width: 600px;
    height: 300px;
}
.main-content .right-content {
    float: right;
    overflow: hidden;
    display: block;
    width: 40%;
    margin: -688px 52px 0 0;
}
.main-content .right-content img {
    width: 522px;
    height: 648px;
}
footer{
    overflow: hidden;
    display: block;
    height: 410px;
    width: 90%;
    margin: auto;
    background-color: #FF931D;

}
footer .left-footer {
    float: left;
    width: 350px;
    overflow: hidden;
    display: block;
}
footer .middle-footer {
    width: 350px;
    overflow: hidden;
    display: block;

}
.about {
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background: #fff;
    float: right;
    position: relative;
    top: -79px;
}
.about p {
    position: absolute;
    font-family: "OpenSans-CondLight";
    font-size: 25px;
    text-align: center;
    top: 62px;
}
.about img {
    width: 80px;
    height: auto;
    position: relative;
    top: 240px;
    left: 98px;
    margin-left: 31px;
}

.button  {
    font-size: 15px;
    color: blue;
    cursor: pointer;
}
.button:active{
    color: #000;
}
.caption {
    background: #fff;
    width: 599px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="IE=edge">
    <title>Spotlight</title>

    <!-- style -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
    <link rel="stylesheet" type="text/css" href="style.css" media="all">

    <!-- js -->
    <link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />

</head>
<body>
    <header>
        <div class="container">
            <div class="top-area">
                <h2>24 hour event</h2>
            </div>
            <div class="logo-area">
                <img src="images/logo.gif" alt="Logo">
            </div>
            <div class="search-box">
                <div class="row">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        <input type="text" class="form-control" placeholder="Search for...">
                        </div>
                </div>
            </div>
            <div class="all-events">
                <div class="left-side">
                    <span>donate here</span>
                    <div class="donate_img">
                        <img src="images/07.tif" alt="">
                    </div>
                </div>
                <div class="right-side">
                    <span>all events faq</span>
                </div>
            </div>
        </div>
    </header>
    <section class="main-content">
        <div class="container">
            <div class="left-content">
                <div class="top-content">
                    <img src="images/damien-rice-tour-italia.jpg" alt="">
                    <div class="caption">
                        <span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
                        <div class="button">
                        Book now

                        </div>
                    </div>
                </div>
                <div class="bottom-content">
                    <img src="images/glenhansard_100x445.jpg" alt="">
                    <div class="caption">
                        <span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
                        <div class="button">Book now

                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content">
                <img src="images/tommytiernan.jpg" alt="">
                <div class="caption">
                    <span>Tommy Tiernan, Cork Comedy Club at 7pm.  Ref: GHO</span>
                    <div class="button">Book now    
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <div class="left-footer">
                <span>Click on the blue <div class="button">Book now</div> now link on any 
                    event enter your email and you will recive your 
                    ticket via email.
                    Alternativly or if you have any questions not 
                    listed on the faq tab you can book your tocket 
                    dierectly with us qouting the event refrence 
                    number. 
                </span>
            </div>
            <div class="middle-footer">
                <span>phone:0741237451
                    email:24hourevent@spotlight.ie
                    get involved
                    Would you like to volunteer even one 
                    hour of your time.  Make a diffrence 
                    contact us at:  
                    volunteer@spotlight.ie
                </span>
            </div>
            <div class="about">
                <p>ABOUT <br>
                Focas Ireland works with 
                people who are homeless or 
                who are at risk of losing there 
                homes across ireland.

                <br> Focas Ireland website click </p>
                <img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
                <img src="images/here_fixed_wm.jpg" alt="download">
            </div>
            <div class="social-icons">

                <img src="images/youtube heart shaped free social media icon .png" alt="you tube">
                <img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
                <img src="images/twitter heart shaped free social media icon.png" alt="twitter">
            </div>
        </div>
    </footer>


</body>
</html>

我的主要问题是我的footer我无法改变颜色。图像底部。任何人都可以帮助我吗？

Answer 1

你可以尝试添加这一行CSS：

footer:after {
  content: "";
  display: table;
  clear: both;
}

无法在页脚css和图像中修复

1 个答案: