html简单网页编写3

最新推荐文章于 2022-06-16 10:07:37 发布

top啦它

最新推荐文章于 2022-06-16 10:07:37 发布

阅读量287

点赞数 2

分类专栏： JavaScript 简易网页编写文章标签： html js

本文链接：https://blog.csdn.net/weixin_45949073/article/details/108677467

版权

JavaScript 同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

简易网页编写

4 篇文章 0 订阅

订阅专栏

图片在网盘里面，点击这里
提取码：yzta
坚持就是胜利，一起加油。
效果如下：
在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="head.css">
    <script src="table.js"></script>
    <script src="jquery.js"></script>
</head>
<body>
<div class="head_1">
    <div class="div_2">
        <div class="logo"><img src="图片/logo.png" alt=""></div>
        <div class="head_2">
            <div style="background-color: #3e8f3e" id="name"><a href="#" class="nav_1">首页</a></div>
            <div><a href="#" class="nav_1">博雅游戏</a></div>
            <div><a href="#" class="nav_1">博雅新闻</a></div>
            <div><a href="#" class="nav_1">关于我们</a></div>
            <div><a href="#" class="nav_1">客服中心</a></div>
            <div><a href="#" class="nav_1">投资者关系</a></div>
            <a href="https://blog.csdn.net/weixin_45949073" class="nav_2">加入我们</a>
        </div>
        <div class="span_1">
            <span class="span_2"><a href="#" class="chinese" onmousedown="qie1(this);">中文</a><a href="#" class="en" onmousedown="qie2(this);">EN</a></span>
        </div>
    </div>
</div>
<div class="center_1">
    <div class="center_2">
        <div class="po">
            <span class="span_3 ab left"><button class="xia le" href="#"><</button></span>
            <span class="span_3 ab right"><button class="xia ri" href="#">></button></span>
            <img class="picture" src="图片/table1.png" alt="">
            <p class="radius" ></p>
        </div>
    </div>
</div>
<!--游戏板块-->
<div id="links" >
    <div class="bb1 bb">
        <p class="center"><a href="https://blog.csdn.net/weixin_45949073">我的博客</a></p>
        <p class="center"><a href="https://mp.csdn.net/console/article">博客管理</a></p>
        <p class="center"><a href="https://edu.csdn.net/lc/mycourse">我的学院</a></p>
        <p class="center"><a href="https://mp.csdn.net/console/upDetailed">我的下载</a></p>
        <p class="center"><a href="https://huiyi.csdn.net/activity/myorder">我的活动</a></p>
    </div>
    <div class="bb2 bb">
        <p class="center"><a href="https://i.csdn.net/#/uc/follow-list">我的关注</a></p>
        <p class="center"><a href="https://i.csdn.net/#/uc/collection-list?type=1">我的收藏</a></p>
        <p class="center"><a href="https://i.csdn.net/#/uc/profile">个人中心</a></p>
        <p class="center"><a href="https://i.csdn.net/#/account/index">账号设置</a></p>
    </div>
    <div class="menu2">
        <div class="child_div1 aa"><img src="图片/game1.png" alt="" class="img_1"><a href="#" style="color: #8c8c8c">五子棋</a></div>
        <div class="child_div2 aa"><img src="图片/game2.png" alt="" class="img_1"><a href="#" style="color: #8c8c8c">斗地主</a></div>
        <div class="child_div3 aa"><img src="图片/game3.png" alt="" class="img_1"><a href="#" style="color: #8c8c8c">麻将</a></div>
        <div class="child_div4 aa"><img src="图片/game4.png" alt="" class="img_1"><a href="#" style="color: #8c8c8c">五子棋</a></div>
    </div>
</div>
</body>
</html>

css代码：
文件名为：head.css

*{
    margin: 0;
    padding: 0;
}
.head_1{
    width: 100%;
    height: 60px;
    background-color: #191d3a;
}
.logo{
    float: left;
    width: 200px;
    line-height: 39px;
    text-align: center;
    background: no-repeat;
    margin: 11px 27px 0 131px;
}
.nav_1{
    float: left;
    width: 85px;
    height: 58px;
    border-left: 1px solid #252947;
    border-right: 1px solid #252947;
    margin-right: -1px;
    color: #818496;
    text-decoration: none;
    text-align: center;
    line-height: 58px;
    font-size: 14px;
}
.nav_2{
    color: white;
    line-height: 31px;
    text-align: center;
    font-size: 14px;
    float: left;
    margin: 14px 0 0 15px;
    border-radius: 3px;
    background-color: #37ab40;
    width: 92px;
    height: 31px;
    text-decoration: none;
}
.nav_1:hover{
    color: palevioletred;
}
/*.span_1 {*/
/*    width: 30px;*/
/*    height: 30px;*/
/*    line-height: 58px;*/
/*    float: right;*/
/*    display: inline-block;*/
/*}*/
/*.span_2 a{*/
/*    color: white;*/
/*    text-decoration: none;*/
/*}*/
.span_1{
    float: right;
    line-height: 59px;
    margin-right: 52px;
}
.span_2 a{
    color: white;
    text-decoration: none;
}
.chinese{
    margin-right: 11px;
}
.center_1{
    margin-bottom: 60px;
    margin-top: -1px;
    width: 100%;
    height: 253px;
    background-color: red;
}
.center_2{
    margin-top: 1px;
}
.span_3{
    padding: 0 0 9px 0;
    background-color: #8c8c8c;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    /*padding-top: 1px;*/
}
.left{
    top: 40%;
    left: 0;
}
.right{
    top: 40%;
    right: 0;
}
.xia{
    /*text-align: center;*/
    font-size: 31px;
    /*text-decoration: none;*/
}
.po{
    position: relative;
}
.ab{
    line-height: 46px;
    position: absolute;
}
.radius {
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 30px;
    text-align: center;
}
.span_4 {
    margin-right: 13px;
    display: inline-block;
    border: 10px solid dimgrey;
    border-radius: 50%;
}
.active {
    border: 10px solid red;
}
.radius {           /* 圆点所在的p (容器)  */
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 30px;
    text-align: center;
}
.picture {
    width: 100%;
    height: 253px;
    overflow: hidden;
}
.div1{
    height: 20px;
}
a{
    text-align: center;
    text-decoration: none;
}
.menu2{
    margin: 0 auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    /*top: -298px;*/
    /*clear: both;*/
    /*margin: 0 auto;*/
    /*position: relative;*/
    width: 836px;
    height: 125px;
    border: 1px solid #dbe1e7;
}
.aa{
    border-top: 1px solid #dbe1e7;
    border-left: 1px solid #dbe1e7;
    width: 25%;
    height: 100%;
    position: absolute;
    top: 0;
    /*right: 0;*/
    bottom: 0;
    /*margin: auto;*/
    margin: 0 0 -1px -1px;
    text-align: center;
}
.child_div1{
    left: 0;
}
.child_div2{
    left: 25%;
}
.child_div3{
    left: 50%;
}
.child_div4{
    left: 75%;
}
.img_1{
    margin: 16px 69px 6px 69px;
}
.color{
    background-color: #dbe1e7;
}
/*游戏模块*/
#links{
    background-color: #0f0f0f;
    position: relative;
}
.bb{
    border-top: 1px solid #dbe1e7;
    border-left: 1px solid #dbe1e7;
    border-right: 1px solid #dbe1e7;
    background-color: lightyellow;
    top: -50px;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 180px;
    height: 300px;
}
.bb1{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.bb2{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    left: 0;
}
.center{
    padding: 15px 0 15px 0;
    text-align: center;
    border-bottom: 1px solid #dbe1e7;
}

js代码：
文件名：table.js

var chi = document.getElementsByClassName("chinese");
var en = document.getElementsByClassName("en");
function qie1(obj) {
    obj.style.color="red";
    en[0].style.color = "white"
}
function qie2(obj) {
    obj.style.color="red";
    chi[0].style.color = "white"
}

   // 修改圆点
window.onload = function () {
    var buttonl = document.getElementsByClassName('le');
    var buttonr = document.getElementsByClassName('ri');
    var pic = document.getElementsByClassName("picture");
    var pictures = ["图片/table1.png","图片/table2.png"];
    var len = pictures.length;
    var str = "";
    var pp = document.getElementsByClassName("radius");
    var n = 0;
    for (i = 0;i < len;i++) {
        str += "<span></span>"
    }
    pp[0].innerHTML = str;
    var spans = pp[0].getElementsByTagName('span');
    spans[0].classList.add("active","span_4");
    for (i = 1;i < len;i++) {
        spans[i].classList.add("span_4");
    }
    for (i = 0;i < len;i++) {
        spans[i].index = i;
        spans[i].onmouseover = function () {
            for (i = 0;i<len;i++) {
                spans[i].classList.remove("active");
            }
            n = this.index;
            this.className = "active span_4";
            pic[0].src = pictures[n];
    };
    }
    buttonl[0].onclick = function () {
        n=(n-1<0)?(len-1):n-1;
        for (i = 0;i<len;i++) {
            spans[i].classList.remove("active");
        }
        spans[n].className = "active span_4";
        pic[0].src = pictures[n];
    };
    buttonr[0].onclick = function () {
        n=(n+1>len-1)?0:n+1;
        for (i = 0;i<len;i++) {
            spans[i].classList.remove("active");
        }
        spans[n].className = "active span_4";
        pic[0].src = pictures[n];
    };
    setInterval(buttonl[0].onclick,2000);

    //游戏板块颜色
    var game = $(".aa");
    var ps = $(".center");
    game[0].classList.add("color");
    colo(game);
    colo(ps);
    function colo(obj) {
        for (i = 0;i < obj.length;i++) {
        obj[i].onmouseover = function () {
            for (i = 0;i < obj.length;i++) {
                obj[i].classList.remove("color");
            }
            this.classList.add("color");
        }
        }
    }
};