CSS案例讲解：博雅互动

前言

CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以博雅互动的官网首页举例。

版心

首页的版心如下：

添加效果图

我们可以看到，这个网站的版心（主体内容的宽度）是 1000px，居中显示。

页面的整体布局

整体页面包含五个部分：

顶部导航栏
Banner图
主体内容
底部信息
返回顶部按钮

顶部导航栏的制作

顶部导航栏包含了logo和导航菜单。我们可以使用浮动来实现这个效果。

html

<div class="header">
    <div class="header-content">
        <div class="logo">
            <a href="#"><img src="images/logo.png" alt="博雅互动"></a>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">博雅游戏</a></li>
                <li><a href="#">博雅新闻</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">客服中心</a></li>
                <li><a href="#">投资者关系</a></li>
                <li><a href="#">校园招聘</a></li>
            </ul>
        </div>
    </div>
</div>

css

.header {
    height: 58px;
    background-color: #191D3A;
}

.header-content {
    width: 1000px;
    height: 58px;
    margin: 0 auto;
}

.logo {
    float: left;
    margin-top: 5px;
}

.nav {
    float: right;
}

.nav ul {
    list-style: none;
}

.nav ul li {
    float: left;
    width: 100px;
    line-height: 58px;
    text-align: center;
}

.nav ul li a {
    display: block;
    color: #818496;
    text-decoration: none;
    font-size: 14px;
}

.nav ul li a:hover {
    color: #fff;
    background-color: #252947;
}

Banner图是一个全屏的大图，我们可以使用背景图片来实现。

html

<div class="banner">
    <div class="banner-content">
        <div class="banner-text">
            <h2>世界上最好玩的游戏</h2>
            <p>ENJOY THE MOST EXCITING GAMES IN THE WORLD</p>
        </div>
    </div>
</div>

css

.banner {
    height: 465px;
    background: url(images/banner.jpg) no-repeat center top;
}

.banner-content {
    width: 1000px;
    height: 465px;
    margin: 0 auto;
    position: relative;
}

.banner-text {
    position: absolute;
    left: 50px;
    top: 200px;
    color: #fff;
}

.banner-text h2 {
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 10px;
}

.banner-text p {
    font-size: 12px;
}

主体内容的制作

主体内容包含了多个部分，我们以游戏展示部分为例。

html

<div class="content">
    <div class="content-games">
        <div class="content-title">
            <h2>博雅游戏</h2>
        </div>
        <div class="game-list">
            <div class="game-item">
                <img src="images/game1.jpg" alt="游戏1">
                <div class="game-info">
                    <h3>游戏名称1</h3>
                    <p>游戏简介游戏简介游戏简介游戏简介游戏简介</p>
                </div>
            </div>
            <div class="game-item">
                <img src="images/game2.jpg" alt="游戏2">
                <div class="game-info">
                    <h3>游戏名称2</h3>
                    <p>游戏简介游戏简介游戏简介游戏简介游戏简介</p>
                </div>
            </div>
            <div class="game-item">
                <img src="images/game3.jpg" alt="游戏3">
                <div class="game-info">
                    <h3>游戏名称3</h3>
                    <p>游戏简介游戏简介游戏简介游戏简介游戏简介</p>
                </div>
            </div>
        </div>
    </div>
</div>

css

.content {
    width: 1000px;
    margin: 0 auto;
    padding: 30px 0;
}

.content-title {
    text-align: center;
    margin-bottom: 30px;
}

.content-title h2 {
    font-size: 24px;
    color: #333;
    font-weight: normal;
}

.game-list {
    overflow: hidden;
}

.game-item {
    float: left;
    width: 300px;
    margin-right: 50px;
    margin-bottom: 30px;
}

.game-item:nth-child(3n) {
    margin-right: 0;
}

.game-item img {
    width: 100%;
    height: 180px;
    border-radius: 5px;
}

.game-info {
    padding: 10px 0;
}

.game-info h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;
}

.game-info p {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}

底部信息的制作

底部信息包含了版权信息、友情链接等。

html

<div class="footer">
    <div class="footer-content">
        <div class="footer-nav">
            <a href="#">关于博雅</a>
            <a href="#">联系我们</a>
            <a href="#">加入我们</a>
            <a href="#">商务合作</a>
            <a href="#">博雅微博</a>
        </div>
        <div class="copyright">
            <p>Copyright © 2004-2020 博雅互动. All Rights Reserved. 粤ICP备05062536号</p>
        </div>
    </div>
</div>

css

.footer {
    background-color: #191D3A;
    padding: 20px 0;
}

.footer-content {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.footer-nav {
    margin-bottom: 10px;
}

.footer-nav a {
    color: #818496;
    text-decoration: none;
    margin: 0 10px;
    font-size: 12px;
}

.footer-nav a:hover {
    color: #fff;
}

.copyright {
    color: #818496;
    font-size: 12px;
}

返回顶部按钮的制作

返回顶部按钮使用固定定位，当页面滚动到一定距离时显示。

html

<div class="back-to-top">
    <a href="#top"><img src="images/top.png" alt="返回顶部"></a>
</div>

css

.back-to-top {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    display: none;
}

.back-to-top a {
    display: block;
}

.back-to-top img {
    width: 30px;
    height: 30px;
    margin-top: 10px;
}

JavaScript部分

为了实现返回顶部按钮的显示和隐藏，我们需要一点JavaScript代码。

javascript

window.onscroll = function() {
    var backToTop = document.querySelector('.back-to-top');
    if (document.documentElement.scrollTop > 300) {
        backToTop.style.display = 'block';
    } else {
        backToTop.style.display = 'none';
    }
};

完整代码

以上只是博雅互动官网首页的部分代码，完整的代码会更加复杂。但是通过这个案例，我们可以看到如何使用HTML和CSS来实现一个企业官网的首页。

在实际开发中，我们通常会使用更多的技术，比如CSS预处理器（Sass、Less）、CSS框架（Bootstrap）、JavaScript框架（jQuery、Vue、React）等，来提高开发效率和代码质量。

总结

通过这个案例，我们学习了：

如何使用版心来控制页面的宽度
如何使用浮动来实现水平布局
如何使用定位来实现特定的效果
如何使用背景图片来实现大图展示
如何使用JavaScript来实现简单的交互效果

这些技术在实际开发中非常常用，掌握它们对于前端开发至关重要。

CSS案例讲解：博雅互动 ​

前言 ​

版心 ​

页面的整体布局 ​

顶部导航栏的制作 ​

Banner图的制作 ​

主体内容的制作 ​

底部信息的制作 ​

返回顶部按钮的制作 ​

JavaScript部分 ​

完整代码 ​

总结 ​

CSS案例讲解：博雅互动

前言

版心

页面的整体布局

顶部导航栏的制作

Banner图的制作

主体内容的制作

底部信息的制作

返回顶部按钮的制作

JavaScript部分

完整代码

总结