前端-第5周第1次-JS(4)-2022·2·15.css

/* 页面整体设置 */
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

:root {
    font-family: PingFang SC,HarmonyOS_Regular,Helvetica Neue,Microsoft YaHei,sans-serif !important;
}

body {
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* 轮播图整体设置 */
.box {
    width: 600px;
    /* height: 400px; */

    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px #999;

    overflow: hidden;

    position: relative;
}

.list {
    width: 6000px;
    height: 400px;

    list-style: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* 轮播图各项设置 */
.item {
    width: 600px;
    height: 400px;
}

.item > a {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    text-decoration: none;
    color: white;

    position: relative;
}

.item > a > img {
    width: 100%;
    height: 100%;
}

.item > a > div {
    position: absolute;
    bottom: 15%;
    left: 5%;

    font-size: 18px;
}

/* 页面切页点显示部分 */
.points {
    position: absolute;
    bottom: 5%;
    left: 5%;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 9;

    list-style: none;
}

.points > li {
    background-color: rgba(255, 255, 255, 0.5);

    width: 8px;
    height: 8px;
    margin: 4px 5px;
    border: none;

    border-radius: 50%;

    cursor: pointer;

    transition: all 250ms ease 0ms;
}

.points > .point-active {
    background-color: white;

    width: 1px;
    height: 1px;
    outline: 6px solid white;
    border: none;
}

/* 页面左右切换按钮部分 */
.switch {
    position: absolute;
    bottom: 5%;
    right: 5%;

    width: 75px;
    height: 25px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.switch > div {
    background-color: rgba(255, 255, 255, 0.2);

    width: 25px;
    height: 25px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 5px;

    transition: all 250ms ease 0ms;

    cursor: pointer;
}
.switch > div:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* 外部引入箭头文件 */
.arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    position: relative;
}
.arrow_bottom {
    transform: rotate(135deg);
    top: -3px;
}
.arrow_top {
    transform: rotate(-45deg);
    top: 3px;
}
.arrow_left {
    transform: rotate(-135deg);
    top:1px;
    left:3px;
}
.arrow_right {
    transform: rotate(45deg);
    top: 1px;
    left: -3px;
}