CSS基础- 3.17背景图练习

最新推荐文章于 2024-03-18 14:07:34 发布

夏赞恩

最新推荐文章于 2024-03-18 14:07:34 发布

阅读量177

点赞数 1

分类专栏：前端学习文章标签： css 前端 css3

原文链接：https://www.bilibili.com/video/BV1yx411d7Rc?p=36&spm_id_from=pageDriver

版权

前端学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

文章目录

页面效果图
HTML代码
CSS代码

页面效果图

在这里插入图片描述

所用到的图片如下：

导航栏背景图
logo
button
背景图
1.jpg
2.jpg
3.jpg
4.jpg

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="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header class="header">
        <nav>
            <a href="">进入官网</a>
            <a href="">账号注册</a>
            <a href="">充值管理</a>
            <a href="">游戏下载</a>
            <a href="">官方论坛</a>
            <a href="">客户中心</a>
        </nav>
        <!-- 一般logo用a元素表示，因为可以点击 -->
        <a href="" class="logo">
            <!-- 该文字在样式上要被隐藏，该文字主要是给浏览器看的 -->
            <h1>魔兽世界</h1>
        </a>
    </header>

    <div class='menu'>
        <a href="" class='detail'>
             <!-- 该文字在样式上要被隐藏，该文字主要是给浏览器看的-->
            <span>了解详情</span>
        </a>
        <a href="" class="download">
             <!-- 该文字在样式上要被隐藏，该文字主要是给浏览器看的-->
           <span>客户端下载</span> 
        </a>
    </div>

    <div class="adv">
        <div class="item clearfix">
            <div class="title">
                <h2>
                    <a href="">点卡兑换现已开启</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/1.jpg" alt="">
                </a>
            </div>
        </div>

        <div class="item">
            <div class="title">
                <h2>
                    <a href="">直升110级现已开启</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/2.jpg" alt="">
                </a>
            </div>
        </div>

        <div class="item">
            <div class="title">
                <h2>
                    <a href="">客户端下载</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/3.jpg" alt="">
                </a>
            </div>
        </div>

        <div class="item">
            <div class="title">
                <h2>
                    <a href="">免费注册</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/4.jpg" alt="">
                </a>
            </div>
        </div>

    </div>
</body>

</html>

CSS代码

.clearfix::after{
    content: '';
    display: inline;
    clear: both;
}
body{
    /* 先写位置，如center，或者左右，上边为0 0 ，再写尺寸,或者不设置尺寸 */
    background: url('../img/bg.jpg') no-repeat center top;/* 左右居中 上下为0 */
}

.header{
    width: 1198px;
    height: 73px;
    line-height: 73px;
    color: #f8b770;
    background-color: red;
    margin: 0 auto;
    margin-top: 45px;
    background: url('../img/bg_nav.jpg') no-repeat 0 0/100% 100%;
    /* header元素有上下边框，没有左右边框 */
    border:1px solid #3f2a22;
    border-left: none;
    border-right: none;
    position: relative;
}

.header nav a{
    float: left;
    width: 161px;
    height: 73px;
    text-align: center;
    /* 边框要占据尺寸，最好设置一下box-sizing */
    box-sizing: border-box;
    border: 1px solid #3f2a22;
    /* a元素有左右边框，没有上下边框 */
    border-top: none;
    border-bottom: none;
}

.header nav a:nth-child(3){
    margin-right:232px;
}

.header .logo{
    position: absolute;
    width: 238px;
    height: 118px;
    background: url('../img/logo.png') no-repeat;    /* 设置背景图 */
    /* 相对于header元素水平居中 */
    left: 0;
    right: 0;
    margin: 0 auto;
    /* 进行背景图元素微调 */
    top:-37px;
    left:7px;
}
/* 隐藏文字 */
.header .logo h1{
    display: none;
}

.menu{
    /* 只要是行盒居中，设置text-align即可 */
    text-align: center;
    margin-top: 473px;
}
.menu a {
    display: inline-block;
    width: 330px;
    height: 130px;
    background-color: red;
    /* 给两个a元素设置同一个背景图，使用background-position来选取所要的部分 */
    background: url('../img/btns.png') no-repeat;
}
.menu a span{
    display: none;
}
/* 使用background-position来选取所要的部分*/
.menu .detail{
    background-position: 5px 0;
}
.menu .download{
   background-position: -325px 0;
} 
.adv{
    width:1203px;
    margin: 76px auto;
}
.adv .item{
    float:left;
    width: 290px;
    height: 200px;
    margin-right: 13px;
    outline: 1px solid #3f2a22;/* 使用外边框 不占据尺寸 */
}
.adv .item:last-child{
    margin-right: 0px;
}
.adv .item .title{
    height:50px;
    line-height: 50px;
    text-align: center;
    background-color: #211510;
    color: #f8b700;
    border-bottom: 1px solid #3f2a22;
    box-sizing: border-box;
}
.adv .item .img{
    height: 150px;
}
/* 设置img类中的img元素 */
.adv .item .img img{
    width: 290px;
    height: 150px;
}

夏赞恩

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS基础- 3.17背景图练习

文章目录页面效果图HTML代码CSS代码页面效果图所用到的图片如下：导航栏背景图logobutton背景图1.jpg2.jpg3.jpg4.jpgHTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
复制链接

扫一扫

专栏目录