前端学习-day7

TSyyds
88 阅读5分钟

更多的选择器

更多伪类选择器

  1. first-child

选择第一个子元素

first-of-type，选中子元素中第一个指定类型的元素

a:first-of-type {
    color:red;
}
  1. last-child

选中最后一个子元素

last-of-type，选中子元素中最后一个指定类型的元素

  1. nth-child

选中指定的第几个子元素

even：关键字，等同于2n odd: 关键字，等同于2n+1

可以用来实现隔行变色效果

  1. nth-of-type

选中指定的子元素中第几个某类型的元素

更多的伪元素选择器

  1. first-letter

选中元素中的第一个字母

  1. first-line

选中元素中第一行的文字

  1. selection

选中被用户框选的文字

更多的样式

透明度

  1. opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
  2. 在颜色位置设置alpha通道(rgba)

鼠标

使用cursor设置

  • auto，让浏览器自行控制鼠标样式
  • pointer，鼠标指针变为小手
  • 还可以使用特定的图片
cursor: url("图片地址"), auto;
/* auto的作用，一旦图片样式出现问题，使用浏览器默认样式 */

盒子隐藏

  1. display:none，不生成盒子
  2. visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。

背景图

背景图和img元素的区别

img元素是属于HTML的概念，背景图是属于CSS的概念

  1. 当图片属于网页内容时，必须使用img元素
  2. 当图片仅用于美化页面时，必须使用背景图

背景图涉及的css属性

  1. background-image
background-image: url("图片地址");

默认情况下，背景图会在横坐标和纵坐标中进行重复

  1. background-repeat（背景图重复）
  • repeat，默认值，重复
  • no-repeat，不重复
  • repeat-x，仅x轴重复
  • repeat-y，仅y轴重复

  1. background-size

    预设值：contain（图片完整显示在区域中）、cover（覆盖整个区域），类似于object-fit

    数值或百分比

100%，横向撑满，纵向按比例缩放

100% 100%，横向、纵向撑满，图片比例可能发生变化

  1. background-position

    设置背景图的位置。

    预设值：left、bottom、right、top、center

    数值或百分比

    雪碧图（精灵图）（spirit）

  2. background-attachment

    通常用它控制背景图是否固定。

背景图相对于视口固定
background-attachment: fixed;

  1. 背景图和背景颜色混用

    没有背景图的地方会用背景颜色填充

  2. 速写（简写）background

background: url("图片地址") no-repeat center/100% fixed #000;

背景图练习

HTML文件

<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 href="" class="logo">
            <!-- 设置h1标题的目的是告诉搜索引擎该网页的内容 -->
            <h1>魔兽世界</h1>
        </a>
    </header>

    <!-- 页面中的两个超链接 -->
    <div class="menu">
        <a href="" class="detail">
            <!-- 此处文字目的同h1 -->
            <span>了解详情</span>
        </a>
        <a href="" class="download">
             <!-- 此处文字目的同h1 -->
            <span>客户端下载</span>
        </a>
    </div>

    <div class="adv clearfix">
        <div class="item">
            <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>

CSS文件

/* 设置body背景图：图片地址 不重复 居中 靠上 */
body {
    background: url("../img/bg.jpg") no-repeat center top;
}

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

/* 设置导航栏样式 */
.header {
    width: 1198px;
    height: 73px;
    line-height: 73px;      /* 行高等于高度，垂直居中 */
    color: #f8b770;
    background: red;    /* 设置背景色便于观察,可与背景图混用,填充背景图无法充满的位置 */
    margin: 0 auto;     /* 上下为零，左右auto，水平居中 */
    margin-top: 45px;       /* 上外边距 */
    /* 设置导航栏背景图样式：图片地址 不重复 位置0,0 横向及纵向撑满 */
    background: url("../img/bg_nav.jpg") no-repeat 0 0/100% 100%;
    border: 1px solid #3f2a22;
    border-left: none;
    border-right: none;
    position: relative;     /* 相对定位，目的是为绝对定位的logo提供包含块 */
    width: 161px;
}

/* 设置导航链接样式 */
.header nav a {
    float: left;        /* 左浮动 */
    width: 161px;
    height: 73px;
    box-sizing: border-box;     /* 边框会占据尺寸，所以将整个盒子尺寸设为边框包裹的尺寸 */
    text-align: center;
    border: 1px solid #3f2a22;
    border-top: none;
    border-bottom: none;
}

/* .header nav下的子元素中的第三个且为a元素的元素，设置其右-外边框，空出距离以安放logo */
.header nav a:nth-child(3) {
    margin-right: 232px;
}

.header .logo {
    position: absolute;
    width: 238px;
    height: 118px;
    background: url("../img/logo.png") no-repeat;
    left: 7px;
    top: -37px;
    right: 0;       /* 这些数值可通过调试得出 */
    width: 161px;
    margin: auto;
}

/* 隐藏h1标题 */
.header .logo h1 {
    display: none;
}

.menu {
    text-align: center;     /* 居中,行块盒居中可设置其外层容器 */
    margin-top: 473px;
}

/* 设置 了解详情/客户端下载 超链接样式 */
.menu a {
    display: inline-block;    /* 设为行块盒,特点为不独占一行且可以盒子尺寸都生效 */  
    width: 323px;
    height: 105px;
    /* 注意：此处设置背景图由于尺寸限制，只能显示出一部分，另一部分需要单独设置位置以显示 */
    background: url("../img/btns.png") no-repeat;
}

.menu a span {
    display: none;      /* 隐藏span内文字 */
}

/* 单独设置下载图标位置，使其显示 */
.menu a.download {
    background-position: -323px 0;
}

/* 设置整个广告区域样式 */
.adv {
    width: 1203px;/* 只设置宽度，高度默认值为auto，自动撑开 */
    margin: 76px auto;
}

/* 设置每个广告的样式 */
.adv .item{
    float: left;    /* 左浮动，由于包含块没有设置高度，会造成高度坍塌 */
    width: 290px;
    height: 200px;
    margin-right: 13px;
    /* 设置外边框,外边框不占据尺寸,但不能单独设置某条边 */
    outline: 1px solid #3f2a22;
    /* 
    此处的另一种做法为：
    border: 1px solid #3f2a22;
    box-sizing: border-box;
    但border会占据尺寸,所以要调整宽高
    */

}

/* 单独设置做后一张图片的右边距 */
.adv .item:last-child{
    margin-right: 0;
}

/* 设置广告标题样式 */
.adv .item .title{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #211510;
    color: #f8b700;
    border-bottom: 1px solid #3f2a22;
    box-sizing: border-box;
}

/* 设置广告图片盒子样式 */
.adv .item .img{
    height: 150px;
}

/* 设置广告图片元素样式 */
.adv .item .img img{
    width: 290px;
    height: 150px;
}
avatar
文章
阅读
粉丝