项目实战3：豆瓣首页-横幅区域-CSDN博客

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134541713

本文详细描述了如何使用CSS为网页横幅区域设置背景图、颜色，嵌入iframe，以及设计title、download区域，包括按钮、二维码的样式，并涉及鼠标悬浮和定位元素的使用。

摘要由CSDN通过智能技术生成

接下来就是

横幅区域

了（banner），先为该区域设置背景图以及背景颜色

.banner {
    margin-top: 10px;
    height: 304px;
    /*该背景图离左边80px，高度铺满，宽度自动*/
    background: url(../imgs/banner-bg.jpg) no-repeat 80px top/auto 100% #edf4ed;
}

之后再创建一个container（中间区域），之前设置过其样式，用iframe元素将之前做过的注册区域嵌入，这里的iframe记得要右浮动清除浮动，接下来就是中间的slogan

其可以看成是两个部分组成，一个title，一个download，title部分主要设置字体颜色，大小以及外边距即可，download区域里包含按钮，二维码，设置按钮样式时，可直接使用类名btn（common.css）接着用img插入图片即可，记得设置宽高。

<div class="banner">
        <div class="container clearfix">
            <iframe class="float-right loginarea" src="./loginframe.html" frameborder="0"></iframe>
            <div class="slogan float-right">
                <h1 class="title">
                    豆瓣
                    <span>6.0</span>
                </h1>
                <div class="download">
                    <button class="btn">下载豆瓣 App</button>
                    <div href="" class="qrcode">
                        <img src="./imgs/banner-er.png" alt="">
                        <div class="qrcode-img hidden">
                            <img src="./imgs/豆瓣二维码.png" alt="">
                            <p>
                                iOS / Android 扫码直接下载
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

.banner {
    margin-top: 10px;
    height: 304px;
/* 80px指的是背景图与区域左边的距离*/
    background: url(../imgs/banner-bg.jpg) no-repeat 80px top/auto 100% #edf4ed;
}

.banner .container .loginarea {
    width: 300px;
    height: 300px;
}

.banner .container .slogan {
    margin-top: 100px;
    margin-right: 32px;
}

.banner .container .slogan .title {
    font-size: 25px;
    color: #111;
}
.banner .container .slogan .title span{
    margin-left: 10px;
}
.banner .container .slogan .download{
    margin-top: 25px;
}
.banner .container .slogan .download .btn{
    width: 115px;
    height: 30px;
    height: 30px;
    font-size: 12px;
}
.banner .container .slogan .download .qrcode{
    /* 使二维码图标横向排列 */
    display: inline-block;
    border: 1px solid #48aa0d;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    vertical-align: bottom;
    position: relative;
}
.banner .container .slogan .download img{
    width: 100%;
    height: 100%;
}

设置鼠标悬浮与二维码图表样式时要使用到定位元素，

在

设置悬浮时（父子关系）

用到的选择器：

.banner .container .slogan .download .qrcode:hover .qrcode-img{
    display: block;
}

再对图片文字区域进行细节刻画即可；代码如下

.banner .container .slogan .download img{
    width: 100%;
    height: 100%;
}
.banner .container .slogan .qrcode-img{
    position: absolute;
    left: -1px;
    top: -2px;
    width: 200px;
    padding: 15px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
}
.banner .container .qrcode-img{
    color: #666;
    font-size: 13px;
    text-align: center;
}
.banner .container .slogan .download .qrcode:hover .qrcode-img{
    display: block;
}

横幅的效果图就做出来了