实战练习3：纯css实现菜单切换

最新推荐文章于 2023-01-04 18:22:23 发布

chengpang2665

最新推荐文章于 2023-01-04 18:22:23 发布

阅读量568

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4036426/blog/2961953

版权

项目描述（需求分析）：

1、仅使用css，不借助JavaScript实现菜单切换

2、点击右侧按钮，背景图切换到对应图片；

html部分：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="wrapper">
        <!-- 1 -->
        <input type="radio" name="btn" id="btn1" checked>
        <input type="radio" name="btn" id="btn2">
        <input type="radio" name="btn" id="btn3">
        <input type="radio" name="btn" id="btn4">
    
        <div class="list">
            <label for="btn1">
                <div class="p">
                    <img src="./img/but1.png" alt="">
                </div>
                <div class="d">
                    <p class="title">我是标题</p>
                    <p class="des">我是内容那日我那天</p>
                </div>
            </label>
            <label for="btn2">
                <div class="p">
                    <img src="./img/but2.png" alt="">
                </div>
                <div class="d">
                    <p class="title">我是标题</p>
                    <p class="des">我是内容那日我那天</p>
                </div>
            </label>
            <label for="btn3">
                <div class="p">
                    <img src="./img/but3.png" alt="">
                </div>
                <div class="d">
                    <p class="title">我是标题</p>
                    <p class="des">我是内容那日我那天</p>
                </div>
            </label>
            <label for="btn4">
                <div class="p">
                    <img src="./img/but4.png" alt="">
                </div>
                <div class="d">
                    <p class="title">我是标题</p>
                    <p class="des">我是内容那日我那天</p>
                </div>
            </label>
        </div>
        <div class="img-box">
            <img src="./img/1.png" alt="">
            <img src="./img/2.png" alt="">
            <img src="./img/3.png" alt="">
            <img src="./img/4.png" alt="">
        </div>
    </div>
</body>
</html>

css部分：

body, ul, li, p{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrapper{
    position: relative;
    width: 948px;
    height: 260px;
    margin: 0 auto;
    border: 3px solid #000;
}
input{
    display: none;
}
.list{
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
}
.list label{
    display: block;
    width: 230px;
    height: 65px;
    padding-left: 20px;
}
.list .p{
    display: inline-block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    margin-top: 12px;
}
.list .p img{
    width: 100%;
}
.list .d{
    display: inline-block;
    margin-top: 12px;
    vertical-align: top;
}
.list .d p{
    color: #fff;
}
.list .d .des{
    font-size: 12px;
}
.img-box img{
    display: none;
}
#btn1:checked ~ .img-box img:nth-child(1) {
    display: block;
}
#btn2:checked ~ .img-box img:nth-child(2) {
    display: block;
}
#btn3:checked ~ .img-box img:nth-child(3) {
    display: block;
}
#btn4:checked ~ .img-box img:nth-child(4) {
    display: block;
}

#btn1:checked ~ .list label:first-child {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
}
#btn2:checked ~ .list label:nth-child(2) {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
}
#btn3:checked ~ .list label:nth-child(3) {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
}
#btn4:checked ~ .list label:nth-child(4) {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
}

转载于:https://my.oschina.net/u/4036426/blog/2961953

chengpang2665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实战练习3：纯css实现菜单切换

项目描述（需求分析）： 1、仅使用css，不借助JavaScript实现菜单切换 2、点击右侧按钮，背景图切换到对应图片； html部分： <!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫