HTML + CSS 实现豆瓣首页

王大傻0928

已于 2022-07-01 17:44:33 修改

阅读量1.2k

点赞数

分类专栏： html css 文章标签： css html 前端

于 2022-06-18 23:04:14 首次发布

本文链接：https://blog.csdn.net/weixin_49981930/article/details/125352906

版权

html 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

HTML + CSS 实现豆瓣首页

效果图：

在这里插入图片描述

整个首页效果图：
在这里插入图片描述

部分 HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="header">
        <div class="container clearfix">
            <div class="logo left">
                <h1>
                    <a href="https://www.douban.com/">豆瓣</a>
                </h1>
            </div>
            <div class="search left">
                <form action="https://www.douban.com/search" method="get">
                    <input type="text" placeholder="书籍、电影、音乐、小组、小站、成员" class="txt">
                    <button>
                        <i class="iconfont iconxiazai17"></i>
                    </button>
                </form>
            </div>
            <nav class="menu right clearfix">
                <a href="https://book.douban.com/" class="menu-read" target="_blank">豆瓣读书</a>
                <a href="https://movie.douban.com/" class="menu-movie" target="_blank">豆瓣电影</a>
                <a href="https://music.douban.com/" class="menu-music" target="_blank">豆瓣音乐</a>
                <a href="https://www.douban.com/group/" class="menu-group" target="_blank">豆瓣小组</a>
                <a href="https://douban.fm/" class="menu-fm" target="_blank">豆瓣FM</a>
                <a href="https://www.douban.com/location/" class="menu-city" target="_blank">豆瓣同城</a>
                <a href="https://time.douban.com/?dt_time_source=douban-web_anonymous_index_top_nav" class="menu-time" target="_blank">豆瓣时间</a>
                <a href="https://market.douban.com/?utm_campaign=anonymous_top_nav&utm_source=douban&utm_medium=pc_web/" class="menu-doupin" target="_blank">豆瓣豆品</a>
            </nav>
        </div>
    </header>

    <div class="banner">
        <div class="container clearfix">
            <iframe class="right loginarea" src="loginframe.html" frameborder="0"></iframe>
            <div class="slogan right">
                <h1 class="title">
                    豆瓣
                    <span>7.0</span>
                </h1>

                <div class="download">
                    <button class="btn">下载豆瓣 App</button>
                    <a href="" class="qrcode">
                        <img src="./img/icon_qrcode_green.png" alt="">
                    </a>
                    <div class="qrcode-img hidden">
                        <img src="img/doubanapp_qrcode.png" alt="">
                        <p>iOS / Android 扫码直接下载</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

部分 index.css

@import "reset.css";
@import "common.css";


/* 统一样式 */
body{
    line-height: 2;
}

button{
    cursor: pointer;
}

/* 统一样式结束 */

/* 首页通用样式 */

.container{
    width: 950px;
    margin: 0 auto;
}


/* 首页通用样式结束 */

/* 页头开始 */

.header{
    height: 90px;
    padding-top: 30px;
    box-sizing: border-box;
}

.header .logo a{
    background: url(../img/logo_db.png) no-repeat left top/100%;
    width: 154px;
    height: 0;
    padding-top: 30px;
    display: block;
    overflow: hidden;
}

.header .search{
    width: 270px;
    height: 30px;
    border: 1px solid #c3c3cc;
    margin-left: 20px;
    position: relative;
}

.header .search .txt{
    width: 240px;
    height: 20px;
    padding: 5px;
    font-size: 13px;
}
.header .search .txt::placeholder{
    color: #ccc;
}

.header .search button{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    right: 0;
    color: #c3c3cc;
}

.header .menu{
    margin-top: 6px;
}

.header .menu a{
    background: url(../img/nav_logo.png);
    width: 40px;
    height: 20px;
    line-height: 20em;
    float: left;
    overflow: hidden;
    margin-left: 20px;

}

.header .menu a.menu-read{
    background-position: 0 0;
}

.header .menu a.menu-movie{
    background-position: -60px 0;
}

.header .menu a.menu-music{
    background-position: -120px 0;
}

.header .menu a.menu-group{
    background-position: -180px 0;
}

.header .menu a.menu-fm{
    background-position: -240px 0;
}

.header .menu a.menu-city{
    background-position: -300px 0;
}


.header .menu a.menu-time{
    background: url(../img/shijian_home_nav.png);
}

.header .menu a.menu-doupin{
    background-position: -420px;
    width: 43px;
}
/* 页头结束 */


/* 横幅开始 */

.banner{
    height: 304px;
    background: url('../img/banner-bg.jpg') no-repeat 25px top/auto 100% #edf4ed;
}

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

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

.banner .container .slogan .title{
    font-size: 25px;
    color: #111;
}

.banner .container .slogan .title span{
    margin-left: 10px;
}

.banner .container .slogan .download{
    margin-top: 25px;
    position: relative;
}

.banner .container .slogan .download .btn{
    width: 115px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background-color: #00B51D;
}

.banner .container .slogan .download .qrcode{
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #48aa0d;
    border-radius: 2px;
    vertical-align: bottom;
}

.banner .container .slogan .download .qrcode img{
    width: 100%;
    height: 100%;
}

.banner .container .slogan .download .qrcode-img{
    position: absolute;
    left: 119px;
    top: 0;
    width: 200px;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 2px;
}

.banner .container .slogan .download .qrcode-img img{
    width: 160px;
    height: 160px;
}

.banner .container .slogan .download .qrcode-img p{
    text-align: center;
    font-size: 13px;
    color: #666;
}

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

/* 横幅结束 */