从零开始编写五子棋一页面的制作

制作背景图片、菜单页面

首先在html文件里面添加代码

然后写入对应的css代码

divid="menuContainer"ullipGOBANG/p/liliaclass="buttonlargeroundred"href="javascript:void(0);"onclick="jump(1)"人机模式/a/liliaclass="buttonlargeroundred"href="javascript:void(0);"onclick="jump(2)"人人模式/a/liliaclass="buttonlargeroundred"href="javascript:void(0);"onclick="jump(3)"排行榜/a/li/ul/div

CSS代码：

body{background-image:url(../images/bodyBG.jpg);background-size:%auto;}#menuContainer{width:px;height:px;position:absolute;/*left:50%;top:50%;transform:translate(-50%,-50%);*/}#menuContainerul{width:%;text-align:center;}#menuContainerulli{list-style:none;height:60px;margin-top:50px;}#menuContainerullip{font-size:40px;font-weight:;}.button{background-color:#;background-image:-webkit-linear-gradient(hsla(0,0%,%,.05),hsla(0,0%,0%,.1));background-image:-moz-linear-gradient(hsla(0,0%,%,.05),hsla(0,0%,0%,.1));background-image:-ms-linear-gradient(hsla(0,0%,%,.05),hsla(0,0%,0%,.1));background-image:-o-linear-gradient(hsla(0,0%,%,.05),hsla(0,0%,0%,.1));background-image:linear-gradient(hsla(0,0%,%,.05),hsla(0,0%,0%,.1));border:none;border-radius:.5em;box-shadow:insetpxhsla(0,0%,0%,.2),inset02px0hsla(0,0%,%,.1),inset01.2em0hsla(0,0%,%,0.1),inset0-.2em0hsla(0,0%,%,.1),inset0-.25em0hsla(0,0%,0%,.25),0.25em.25emhsla(0,0%,0%,.05);color:#;cursor:pointer;display:inline-block;font-family:sans-serif;font-size:1em;font-weight:bold;line-height:1.5;margin:0.5em1em;padding:.5em1.5em.75em;position:relative;text-decoration:none;text-shadow:01px1pxhsla(0,0%,%,.25);vertical-align:middle;}.button:hover{outline:none;}.button:hover,.button:focus{box-shadow:insetpxhsla(0,0%,0%,.2),inset02px0hsla(0,0%,%,.1),inset01.2em0hsla(0,0%,%,.1),inset0-.2em0hsla(0,0%,%,.1),inset0-.25em0hsla(0,0%,0%,.25),insetemhsla(0,0%,%,.2),0.25em.25emhsla(0,0%,0%,.05);}.button:active{box-shadow:insetpxhsla(0,0%,0%,.2),inset02px0hsla(0,0%,%,.1),inset01.2em0hsla(0,0%,%,.1),insetemhsla(0,0%,%,.2),inset0.25em.5emhsla(0,0%,0%,.05),0-1px1pxhsla(0,0%,0%,.1),01px1pxhsla(0,0%,%,.25);margin-top:.25em;outline:none;padding-bottom:.5em;}.large{font-size:1.25em;}.round{border-radius:1.25em;}.red{background-color:#ff6c6f;}

输入名称页面

首先在html文件里面添加代码

然后写入对应的css代码

HTML代码：

divid="inputName"p大侠，请输入你的大名/pinputid="name"aclass="buttonlargeroundred"href="javascript:void(0);"onclick="jump(4)"确定/a/div

CSS代码：

#inputName{display:none;text-align:center;width:px;height:px;background-color:rgba(0,0,0,0.5);border-radius:20px;box-shadow:rgb(85,91,)0px0px0px3px,rgb(31,,27)0px0px0px6px,rgb(,,19)0px0px0px9px,rgb(,,85)0px0px0px12px,rgb(,85,85)0px0px0px15px;border:1pxsolidgreen;}#inputNameinput{width:80%;margin:50px;height:30px;background-color:rgb(,,19);}

五子棋页面

首先在html文件里面添加代码

然后写入对应的css代码

HTML代码：

divid="container"divid="chessboard"/div/div

CSS代码：

#container{display:none;position:absolute;width:px;height:px;border:2pxsolidwheat;box-shadow:2px2px5px;background-image:url(../images/bg-1.jpg);}#chessboard{width:px;height:px;background-image:url(../images/chessboard.png);margin:13px;}.chess{width:35px;height:35px;position:absolute;}

剩余页面制作

首先在html文件里面添加代码

然后写入对应的css代码

HTML代码：

divid="tool"ullipid="infor"玩家VS电脑/p/lilipid="time"00:00/p/lilipid="step"步数：0/p/liliaclass="buttonroundred"href="javascript:void(0);"onclick="jump(7)"id="musicInfor"音乐：关/a/liliaclass="buttonroundred"href="javascript:void(0);"onclick="jump(8)"重新开始/a/liliaclass="buttonroundred"href="javascript:void(0);"onclick="jump(6)"悔棋/a/liliaclass="buttonroundred"href="javascript:void(0);"onclick="jump(9)"更换背景/a/li/ul/divdivid="gameOver"pid="gameOverTitle"/ppid="gameOverContent"/p/div

CSS代码：

#tool{display:none;width:px;height:px;border:1pxsolid#;background-color:rgba(0,0,0,0.5);text-align:center;color:white;}#toolp{font-size:20px;font-weight:;margin:20px;}#gameOver{display:none;text-align:center;width:px;height:px;background-color:rgba(0,0,0,0.5);border-radius:20px;box-shadow:rgb(85,91,)0px0px0px3px,rgb(31,,27)0px0px0px6px,rgb(,,19)0px0px0px9px,rgb(,,85)0px0px0px12px,rgb(,85,85)0px0px0px15px;border:1pxsolidgreen;color:white;font-size:20px;font-weight:;}#gameOverp{margin:20px;}预览时标签不可点收录于话题#个上一篇下一篇