LOL部分网页

LOL部分网页

<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/LOL.css">

1.style

/css/common.css

*{
    box-sizing:border-box;
    margin:0;
    padding: 0;
    border: none;
    outline:none;
    font:14px/1.5 arial,"幼体";
    color:#666;
}
a{
    text-decoration:none;
}
ul{
    list-style:none;
}

/css/LOL.css

body {
    background-color: rgb(206, 25, 25);
}

.line2 {
    background-color: rgb(195, 219, 86);
    margin: 100px auto 0;
    width: 1191px;
}

.hot-acts {
    background-color: rgb(83, 223, 223);
    width: 820px;
    height: 335px;
}

.title {
    
    background-color: rgb(87, 226, 99);
    height: 35px;
    display: flex;
    align-items: center;
}

.title>h2 {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    margin-right: 30px;
}

.title>h2:before {
    position: relative;
    top: 4px;
    left: -10px;
    display: inline-block;
    content: "";
    width: 4px;
    height: 24px;
    background-color: #1da6ba;
}

.title>div {
    flex-grow: 1;
    height: 28px;
    display: flex;
    justify-content: space-between;
    border-bottom: #DDD 1px solid;
}

.title>div>ul {
    width: 300px;
    display: flex;
    justify-content: space-between;
}

.title>div>ul>li {
    cursor: pointer;
}

.title>div>ul>li.selected {
    position: relative;
    color: #1da6ba;
    font-weight: 600;
    transition: all 0.2s ease;
}

.title>div>ul>li.selected:after {
    position: absolute;
    left: 0;
    bottom: -3.5px;
    content: "";
    width: 100%;
    height: 7px;
    background: transparent url(/imgs/tab-title-selected.png) center bottom no-repeat;
}

.content {
    background: blueviolet;
    height: 578px;
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content>a {
    position: relative;
    flex-basis: 193px;
    height: 278px;
    display: flex;
    flex-direction: column;
    background-color: white;
    transition: all 0.5s ease;
}

.content>a:hover>div {
    display: flex;
}

.content>a:hover>p {
    color: #1da6ba;
}

.content>a:hover {
    transform: translateY(-10px);
    /* transform: scale(1.05); */
    /* transform: rotateX(360deg); */
    /* transform: skewY(30deg); */
}

.content>a>div {
    padding: 0 15px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 206px;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content>a>div>h4 {
    color: #cdbe91;
}

.content>a>div>h4+span {
    margin: 10px 0;
}

.content>a>div>span {
    color: #BBB;
}

.content>a>p,
.content>a>span {
    margin-left: 10px;
}

.content>a>p {
    margin-top: 5px;
}

.content>a>span {
    color: #1da6ba;
    margin-top: 20px;
}

2.body

<section class="line2">
    <section class="hot-acts">
        <div class="title">
            <h2>热门活动</h2>
            <div>
                <ul>
                    <li class="select selected">正在进行</li>
                    <li class="select ">商城特惠</li>
                    <li class="select ">长期活动</li>
                </ul>
                <a href="#">更多-&gt;</a>
            </div>
        </div>
        <div class="content">
            <a href="#">
                <div>
                    <p>
                        <h4>每周限时优惠</h4>
                        <span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span>
                        <span>2019-07-05 - 2019-07-08</span>
                    </p>
                </div>
                <img src="/imgs/p1.jpg" alt="" />
                <p>每周限时优惠</p>
                <span>已结束</span>
            </a>
            <a href="#">
                <div>
                    <p>
                        <h4>每周限时优惠</h4>
                        <span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span>
                        <span>2019-07-05 - 2019-07-08</span>
                    </p>
                </div>
                <img src="/imgs/p2.jpg" alt="" />
                <p>每周限时优惠</p>
                <span>已结束</span>
            </a>
            <a href="#">
                <div>
                    <p>
                        <h4>每周限时优惠</h4>
                        <span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span>
                        <span>2019-07-05 - 2019-07-08</span>
                    </p>
                </div>
                <img src="/imgs/p3.jpg" alt="" />
                <p>每周限时优惠</p>
                <span>已结束</span>
            </a>
            <a href="#">
                <div>
                    <p>
                        <h4>每周限时优惠</h4>
                        <span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span>
                        <span>2019-07-05 - 2019-07-08</span>
                    </p>
                </div>
                <img src="/imgs/p4.jpg" alt="" />
                <p>每周限时优惠</p>
                <span>已结束</span>
            </a>
        </div>
        </div>
    </section>
    <section class="download"></section>
</section>

3.JS

<script>
    var sels = document.getElementsByClassName("select");
    for (var i = 0; i < sels.length; i++) {
        (function (i) {
            sels[i].onmouseenter = function () {
                for (var i = 0; i < sels.length; i++) {
                    var cn = sels[i].className.split(" ");
                    sels[i].className = cn[0];
                }
                this.className = "select selected";
            }
        })(i);
    }
</script>