bzrs

最新推荐文章于 2024-10-12 11:31:33 发布

weixin_45429709

最新推荐文章于 2024-10-12 11:31:33 发布

阅读量305

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45429709/article/details/103775511

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编织人生</title>
    <link href="main02.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="main02.js" type="text/javascript"></script>
<header>
    <div class="wrap">
        <input type="checkbox" id="hamber">
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">编制资讯</a></li>
                <li><a href="#">编织教程</a></li>
                <li><a href="#">编制图库</a></li>
                <li><a href="#">毛线大全</a></li>
                <li><a href="#">编织视频</a></li>
                <li><a href="#">编制花样</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">专题</a></li>
                <li><a href="#">论坛</a></li>
                <input type="text" placeholder="搜索"><button>搜索</button>
            </ul>
        </nav>
        <label id="menu" for="hamber"><img src="images/menu.png"></label>
    </div>
</header>
<div class="container">
    <div class="wrap">
        <img src="images/logo2.png">
         <img src="images/tp.png">
    </div>
    <div class="main">
        <div class="wrap">
            <div class="box1" id="box">
                <h2>毛衣教程</h2>
                <ul>
                    <li class="on">儿童</li>
                    <li>女士</li>
                    <li>大衣</li>
                </ul>
                <div class="clearfix"></div>
                <section>
                    <ul>
                        <li><img src="images/list11.png"><p>11</p></li>
                        <li><img src="images/list12.png"><p>22</p></li>
                        <li><img src="images/list13.png"><p>33</p></li>
                        <li><img src="images/list14.png"><p>44</p></li>
                    </ul>
                </section>
                <section class="hide">
                    <ul>
                        <li><img src="images/list15.png"><p>11</p></li>
                        <li><img src="images/list16.png"><p>11</p></li>
                        <li><img src="images/list17.png"><p>11</p></li>
                        <li><img src="images/list18.png"><p>11</p></li>
                    </ul>
                </section>
                <section class="hide">
                    <ul>
                        <li><img src="images/list16.png"><p>11</p></li>
                        <li><img src="images/list17.png"><p>11</p></li>
                        <li><img src="images/list17.png"><p>11</p></li>
                        <li><img src="images/list18.png"><p>11</p></li>
                    </ul>
                </section>
            </div>
        </div>

    </div>
</div>
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-1">
                <p><img src="/img/闭嘴rslogo.gif" /></a>&copy;  版权所有</p>
            </div>
            <div class="col-md-2">
                <p> 电脑版本 | 手机版本 |客户端 </p>
                <p>编织人生旗下网站： 编织人生门户 | 编织人生论坛 | 编织人生阅读 | 会编织</p>
                <p> 网站介绍 | 广告合作  | 网站地图 | 活动合作 | 意见反馈 | 免责条款</p>
                <p>苏ICP备12028468号 增值电信业务经营许可证:苏B2-20120251 公安机关备案号:苏32058202010001号</p>
                <p>本站不再支持IE9.0以下的浏览器，为了获得最佳的浏览体验，请更新高版本的浏览器。点击帮助。</p>
                <p>苏州编织人生网络科技有限公司 版权所有</p>
            </div>
            <div class="col-md-3">
                <img src="/img/icb.gif" />
                <img src="/img/GAcertificate.jpg" />
            </div>
        </div>
    </div>
</footer>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
.clearfix{
    clear: both;
}
.wrap{
    width: 1000px;
    margin: 0 auto;
    position: relative;

}
header {
    background:#f4739d ;
    text-align: center;
}
header input{
    width: 150px;
    height: 20px;
    border: 1px solid #000000;
    box-sizing: border-box;
    vertical-align: top;
    margin-top: 7px;
}
header button{

    height: 20px;
    width: 50px;
    color: #FFF;
    background: #f4739d;
    border: 1px solid #f4739d;
    margin-top:7px;

}
header nav ul{
    min-height: 34px;
    background: #f4739d;
}
header nav ul li {
    float: left;
    text-align: center;
    line-height: 34px;
    height: 34px;
    width: 70px;
    font-size: 11px;
    border: 0px solid #f4739d;
}
header nav ul li a{
    color: white;
}
header nav ul li:first-child{
    background: #e15016;
}
header nav ul li:hover{
    background: #e15016;

}
header input[type="checkbox"]{
    vertical-align: middle;
}
header input[type="checkbox"]{
    z-index: -1;
}
header input[type="checkbox"],header label{
    position: absolute;
    right: 2%;
    display: none;
}

.main  .box1{
    width: 830px;

}
.main .box1 h2{
    margin-bottom: 10px;
}
.main .box1>ul {
    min-height: 50px;
}
.main .box1>ul li {
    float: left;
    line-height:50px;
    padding: 0 25px;

    cursor: pointer;

}
.main .box1>ul li.on{
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    color: black;
    height: 50px;
}
.main .box1>ul li:hover{
    background: #AFAFAF;
    color: #FFFFFF;
}
.main .box1 section ul{
    min-height: 250px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.main .box1 section ul li{
    float: left;
    width: 200px;
    text-align: center;
}
.box1 section img{
    margin-left: 20px;
    margin-top: 10px;
}
.box1 section.hide{
    display: none;
}

.main .description ul{

}
.main .description ul li{
    float: left;
    width: 180px;
    margin-right: 20px;

}



footer {
    padding: 0 calc(50% - 600px);
    height: 200px;
    padding-top: 30px;
    line-height: 2em;
    font-size: 12px;
}
footer .row{
    justify-content: space-around;
    display: flex;

}
footer .row .col-md-1 {
    flex-grow: 0.8;
    order: 1;
    /*background: #ee5a32;*/
    width: 40px;
    margin-left: 50px;
}
footer .row .col-md-2 {
    flex-grow: 1.5;
    order: 2;
    /*background: #7dff46;*/
    width: 180px;
}
footer .row .col-md-3 {
    flex-grow: 1;
    order: 3;
    /*background: #2A809D;*/
    margin-left: 30px;
}

@media (max-width: 640px) {
    .wrap{
        width: 100%;
    }
    header{
        background: #f4739d;
        min-height: 50px;
    }
    header nav{
        display: none;
    }
    header input[type="checkbox"],header label{
        display: block;
        right: 2%;
        top: 10px;
        cursor: pointer;
    }
    header input[type="checkbox"]:checked+nav{
        display: block;
    }
    header nav ul li{
        float: none;
    }
    header nav ul input,header nav ul button{
        display: none;
    }
    .container .banner1{
        width: 100%;
    }
    .main .box1,.main .box2{
        float: none;
        width: 100%;
    }
    .main .box1 section ul li,.main .box2 section ul li{
        float: none;

    }
}

window.onload=function () {

    //切换卡
    var box2 = document.getElementById("box");
    var ul = box2.getElementsByTagName("ul")[0];
    var oLIs = ul.getElementsByTagName("li");
    var len2 = oLIs.length;
    var oSecs = box2.getElementsByTagName("section");
    for (var i = 0; i < len2; i++) {
        oLIs[i].index = i;
        oLIs[i].onclick = function () {
            for (var j = 0; j < len2; j++) {
                oLIs[j].className = "";
                oSecs[j].className = "hide";
            }
            this.className = "on";
            oSecs[this.index].className = "";
        }
    }
}