开心游戏网页（附效果图）

最新推荐文章于 2023-05-10 10:12:42 发布
最新推荐文章于 2023-05-10 10:12:42 发布
阅读量2.1k 收藏 33
点赞数 4
文章标签： html5 html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47949485/article/details/107087378
版权

在这里插入图片描述
在这里插入图片描述

CSS样式文件

/*公共*/
.w {
  width: 1000px;
  margin: 0 auto;

}

ul li {
  list-style: none;
}

a {
  text-decoration: none;
}

/*导航栏*/
.nav {
  float: left;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(#d12240, #d25c75);
}

.all {
  float: left;
  margin-left: 40px;
  width: 500px;

}

.all .ther {
  display: inline-block;
  color: #d12240;
  width: 100px;
  height: 40px;
  text-decoration: none;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  position: relative;
  top: -6px;
  left: -26px;
  background: white;
  border-radius: 5px;
}

.all .index::before {
  content: url(../img/gameLogo.png);
  position: relative;
  top: 4px;
  left: -50px;
}

.nav_1 {
  float: right;
  margin-right: 35px;
}

.nav_1 ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  margin: 0 5px;
}

.nav_1 ul li {
  float: left;
  color: #fff;
}

.nav_1 .font img {
  width: 0.1px;
  height: 12px;
  vertical-align: middle;
  margin-right: 10px;
}

/*征战四方*/
.for {
  float: left;
  width: 190px;
  height: 203px;
  margin-top: 20px;
  border-radius: 8px;
  border: 1px solid #cccccc;
}

.for ul li {
  height: 29px;
  width: 190px;
  box-sizing: border-box;
}

.for ul {
  float: left;
  margin: 0;
  padding: 0;
}

.for ul li:nth-of-type(1) {
  background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
  border-radius: 8px 8px 0 0;
}

.for ul li:nth-of-type(2) {
  background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}

.for ul li:nth-of-type(3) {
  background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}

.for ul li:nth-of-type(4) {
  background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}

.for ul li:nth-of-type(5) {
  background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}

.for ul li:nth-of-type(6) {
  background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}

.for ul li:nth-of-type(7) {
  background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
  border-radius: 0 0 8px 8px;
}


.for ul li:nth-of-type(1):hover {
  background: url(../img/游戏列表鼠标移入的渐变.jpg);
  border-radius: 8px 8px 0 0;
}

.for ul li:nth-of-type(odd):hover {
  background: url(../img/游戏列表鼠标移入的渐变.jpg);
}

.for ul li:nth-of-type(even):hover {
  background: url(../img/游戏列表鼠标移入的渐变.jpg);
}

.for ul li:nth-of-type(7):hover {
  background: url(../img/游戏列表鼠标移入的渐变.jpg);
  border-radius: 0 0 8px 8px;
}

.for ul li a {
  color: black;
  text-decoration: none;
  font-size: 12px;
  line-height: 29px;
  margin-left: 20px;
  position: relative;
  top: 2px;
}

.for ul li a img {
  position: relative;
  top: 6px;
  left: -10px;
}

/*
.for ul li:nth-of-type(1) a{

}
.for ul li:nth-of-type(2) a::before{
  content: url(../img/sub-3.gif);
  float: left;
  margin-top: 4px;
  margin-left: 1px;
}
.for ul li:nth-of-type(3) a::before{
  content: url(../img/sub-4.gif);
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
.for ul li:nth-of-type(4) a::before{
  content: url(../img/sub-5.gif);
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
.for ul li:nth-of-type(5) a::before{
  content: url(../img/sub-6.gif);
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
.for ul li:nth-of-type(6) a::before{
  content: url(../img/sub-7.gif);
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
.for ul li:nth-of-type(7) a::before{
  content: url(../img/sub-8.gif);
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
*/

/*中心图模块*/
.center img {
  float: left;
  margin-top: 24px;
  margin-left: 12px;
  width: 520px;
  height: 195px;
  border-radius: 8px;
}

.center .qie_huan ul li a {
  text-decoration: none;
  color: black;
  font-size: 12px;
  float: left;
  margin-left: 6px;
  margin-top: 2px;
}

.center .qie_huan ul li {
  float: left;
  margin: 0 10px;
  height: 20px;
  width: 20px;
  background: #cbcac9;
  color: black;
  border-radius: 50%;

}

.center .qie_huan ul li:hover {
  background: #b91e1a;

}

.center .qie_huan ul li a:hover {
  color: white;
}

.qie_huan {
  float: left;
  margin-top: 174px;
  margin-left: -218px;
}

/*用户登录模块*/

.login {
  float: right;
  width: 260px;
  height: 205px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  background: #fafafa;
  margin: 20px 0 0 0;
}

.login a {
  float: left;
  color: #8a7373;
  font-size: 14px;
  font-family: 微软雅黑;
  font-weight: 600;
  margin: 25px 0 0 20px;
}

.login input {
  border: 1px solid #cccccc;
  outline: 0;
  margin-top: 10px;
}

.login form {
  float: left;
  margin: 20px 0 0 20px;
  font-size: 13px;
}

.login a img {
  float: left;
  margin: -12px 0 0 78px;
}

.login p {
  float: left;
  position: relative;
  top: -26px;
  left: 43px;
}

.login p a {
  color: #2b62a5;
  font-weight: 400;
  font-size: 12px;
}

/*全部游戏模块*/
.all_game {
  float: left;
  margin-top: 20px;
  height: 225px;
  width: 720px;
  border: 1px solid #cccc;
  border-radius: 8px;
}

.all_game .class {
  float: left;
  width: 720px;
  height: 30px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(white, #e3e3e3);
  border-bottom: 1px solid #cccc;
}

.class ul {
  height: 30px;
  width: 100%;

  margin: 0;
  padding: 0;
}

.class ul li {
  float: left;
  margin: 0 20px;
}

.gray a::after {
  content: '|';
  color: #cccccc;
  position: relative;
  left: 20px;
}

.more {
  position: relative;
  left: -14px;
}

.class ul li a {
  color: gray;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
}

.class ul li:nth-of-type(1) a {
  color: #7d0808;
}

.class ul li a:hover {
  color: #7d0808;
}

.game_1 {
  float: left;
  margin: 20px 0 0 24px;
  width: 320px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #cccccc;
}

.game_1 img {
  float: left;
  margin: 20px 0 0 10px;
  width: 130px;
  height: 98px;
  transition: all .8s;
}

.game_1 img:hover {
  transform: translate(-12px);
}

.game_1 ul li {
  font-size: 12px;
  line-height: 22px;

}

.game_1 ul {
  float: left;
  margin: 20px 0 0 10px;
  padding: 0;
}

.game_1 ul li span {
  color: #7d0808;
}

.game_1 button {
  float: left;
  height: 26px;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin: 0 0 0 10px;
  cursor: pointer;
  font-size: 12px;
  outline: 0;
}

.all_game .game_1 .over {
  float: left;
  height: 26px;
  background: linear-gradient(#7dc1d3, #326598);
  border: 1px solid #326598;
  color: white;
  border-radius: 3px;
  margin: 0 0 0 10px;
  cursor: pointer;
  font-size: 12px;
  outline: 0;
}
/*新闻公告模块*/
.news_flash{
  float: right;
  margin-top: 20px;
  width: 260px;
  height: 227px;
  border-radius: 8px;
  border: 1px solid #cccccc;
}
.tall{
  float: left;
  width: 100%;
  height: 30px;
  background: linear-gradient(white, #e3e3e3);
  border-bottom: 1px solid #cccccc;
  border-radius: 8px 8px 0 0;
  color:#7d0808;
  font-size: 12px;
  font-weight: bold;
}
.tall a{
  float: left;
  margin: 6px 0 0 10px;
}
.tall ul{
  float: left;
  padding: 0;
  margin-left:5px ;
}
.tall ul li{
  float: left;
  transition: all .4s;
  width: 244px;
  background: url(../img/rightTwo.png) no-repeat 10px 10px;
}
.tall ul li a{
  color: #4d4646;
  font-weight: normal;
  line-height: 21px;
  margin-left: 44px;
  position: relative;
  top:-4px;
}
.tall ul li a:hover{
  transform: scale(1.2);
}
.tall ul li{
  border-bottom: 1px dashed #ccc;
}
/*官方微博模块*/
.w .weibo{
  float: right;
  width: 260px;
  height: 160px;
  margin-top: 20px;
}
.w .weibo img{
  width: 260px;
  height: 70px;
  margin-bottom: 10px ;
}
/*角色扮演模块*/
.cosplay{
  width: 720px;
  height: 430px;
  float: left;
  margin-top: 20px;
  border-radius: 8px;
  border: 1px solid #cccccc;
}
.cosplay .font_s{
  float: left;
  width: 100%;
  height: 30px;
  background: linear-gradient(white, #e3e3e3);
  border-bottom: 1px solid #cccccc;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  font-weight: bold;
}
 .w .cosplay .font_s a{
   color:#7d0808;
  float: left;
  margin: 6px 0 0 10px;
}
.w .cosplay ul li a{
  color: black;
  font-size: 12px;
  font-weight: normal;
}
.cosplay .shenxian ul{
  padding: 0;
}
.cosplay .shenxian ul li{
  float: left;
  width: 150px;
  text-align: center;
}
.shenxian{
  float: left;
  width: 150px;
  margin: 10px 0 0 24px;
}
.cosplay button {
  float: left;
  height: 26px;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin: 5px 0 0 10px;
  cursor: pointer;
  font-size: 12px;
  outline: 0;
}
.cosplay .over{
  float: left;
  height: 26px;
  background: linear-gradient(#7dc1d3, #326598);
  border: 1px solid #326598;
  color: white;
  border-radius: 3px;
  margin: 5px 0 0 26px;
  cursor: pointer;
  font-size: 12px;
  outline: 0;
}
.shenxian img{
  transition: all .8s;
}
.shenxian img:hover{
  transform: translate(-12px);
}
/*游戏视频模块*/
.game_video{
  float: right;
  width: 260px;
  height: 240px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 26px;
}
.game_video .font_s{
  float: left;
  width: 100%;
  height: 30px;
  background: linear-gradient(white, #e3e3e3);
  border-bottom: 1px solid #cccccc;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  font-weight: bold;
}
.game_video .font_s a{
  color: #7d0808;
  float: left;
  margin: -12px 0 0 10px;
}
.game_video img{
  float: left;
  margin: 9px 10px;
}
.game_video .he_1{
  width: 100%;
  height: 138px;
  border-bottom: 1px dashed #ccc;
}
.game_video .he_1 a{
 position: relative;
  top: 18px;
  font-size: 12px;
  line-height: 20px;
  color: #2b62a5;

}
.game_video a{
  position: relative;
  top: 18px;
  font-size: 12px;
  line-height: 20px;
  color: #2b62a5;

}

/*广告模块*/
.guanggao img{
  width: 200px;
  height: 180px;
}
.guanggao{
  position: fixed;
  right: 1px;
  top: 35px;
  animation-name: guanggao;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: 2;
}
@keyframes guanggao {
  from {

  }
  to {
    transform: translate(-900px, 400px);
  }
}
.guanggao .x{
  float: left;
  width: 20px;
  height: 30px;
  background: lightgray;
  opacity: 0.2;
  color: blue;
  text-align: center;
  line-height: 30px;
  position: relative;
  top: -24px;
  left: 200px;
}

/*底部信息模块*/
.police ul{
  float: left;
  padding: 0;
}
.police ul li{
  float: left;
  font-size: 12px;
  margin: 40px 18px 0 0;
}
.police ul li a{
  color: #2b62a5;
}
.police ul .right{
  margin-left: 76px;
  margin-right: 0;
  float: right;
  color: gray;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开心网页游戏</title>
  <link href="css/GameIndex.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="w">
  <!--导航栏start-->
<div class="w nav">
  <div class="all">
  <a class="index" href="#"> </a>
    <a class="ther" href="#">首 页</a>
  </div>
  <div class="nav_1">
    <ul>
      <li><a href="#">注册</a></li>
      <li><a href="#" class="font" ><img src="img/titleBg.jpg">帮助</a></li>
      <li><a href="#" class="font" ><img src="img/titleBg.jpg">登录</a></li>
      <li><a href="#" class="font" ><img src="img/titleBg.jpg">更多</a></li>
    </ul>
  </div>
</div>
  <!--导航栏end-->
  <!--征战四方模块start-->
  <div class="for">
    <ul>
      <li><a href="#"><img src="img/sub-2.gif">征战四方</a></li>
      <li><a href="#"><img src="img/sub-3.gif">龙将</a></li>
      <li><a href="#"><img src="img/sub-4.gif">弹弹堂</a></li>
      <li><a href="#"><img src="img/sub-5.gif">凡人修真2</a></li>
      <li><a href="#"><img src="img/sub-6.gif">一骑当先</a></li>
      <li><a href="#"><img src="img/sub-7.gif">宫廷计</a></li>
      <li><a href="#"><img src="img/sub-8.gif">神仙道</a></li>
    </ul>
  </div>
  <!--征战四方模块end-->
  <!--中心图模块start-->
  <div class="center">
    <img src="img/xdtgg_frxz2_44.jpg">
    <div class="qie_huan">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
    </div>
  </div>
  <!--中心图模块end-->
  <!--用户登录模块start-->
  <div class="login">
    <a href="#">开心网用户登录</a>
    <form action="#" method="">
      账号： <input type="text" placeholder="字母，数字的六位数字符"><br/>
      密码： <input type="password" placeholder="四位数字">
    </form>
    <a href="#"><img src="img/btnLogin.jpg"> </a>
    <p><a href="#" class="new">立即注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="#" class="wu">忘记密码</a></p>
  </div>
  <!--用户登录模块end-->
  <!--全部游戏模块start-->
  <div class="all_game">
    <div class="class">
      <ul>
        <li class="red"><a href="#" class="more">全部游戏</a></li>
        <li class="gray"><a href="#">战争策略</a></li>
        <li class="gray"><a href="#">体育经营</a></li>
        <li><a href="#">社交游戏</a></li>
      </ul>
    </div>
    <div class="game_1">
      <img src="img/img-4.jpg">
      <ul>
        <li>三国题材横版RPG网游，丰富的</li>
        <li>武将系统</li>
        <li>类型：角色扮演</li>
        <li>游戏人气：<span>470921</span></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="game_1">
      <img src="img/img-5.jpg">
      <ul>
        <li>一款不建主城不等CD，不占资</li>
        <li>源，全程战斗</li>
        <li>类型：战征策略</li>
        <li>游戏人气：8745221</li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
  </div>
  <!--全部游戏模块end-->
  <!--新闻公告模块start-->
  <div class="news_flash">
    <div class="tall"><a>新闻公告</a>
      <ul>
        <li><a href="#">[征战四方] 开心首服·黄巾之乱</a></li>
        <li><a href="#">[龙将] 火爆8服·八门金</a></li>
        <li><a href="#">[弹弹堂] 41服开启·万人竞技</a></li>
        <li><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
        <li><a href="#">[一骑当先] 开心2服上线送黄金</a></li>
        <li><a href="#">[宫廷计] 03月06日·西施秘史</a></li>
        <li><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
      </ul>

    </div>

  </div>
  <!--新闻公告模块end-->
  <!--角色扮演模块start-->
  <div class="cosplay">
    <div class="font_s"><a href="#">角色扮演</a></div>
    <div class="shenxian">
    <ul>
      <li><a href="#"><img src="img/img-6.jpg"> </a></li>
      <li><a href="#">游戏人气：1765314</a></li>
      <li><a href="#">游戏状态：22区开启</a></li>
    </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="shenxian">
      <ul>
        <li><a href="#"><img src="img/img-7.jpg"> </a></li>
        <li><a href="#">游戏人气：654814</a></li>
        <li><a href="#">游戏状态：火爆开启</a></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="shenxian">
      <ul>
        <li><a href="#"><img src="img/img-8.jpg"> </a></li>
        <li><a href="#">游戏人气：1245814</a></li>
        <li><a href="#">游戏状态：23区开启</a></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="shenxian">
      <ul>
        <li><a href="#"><img src="img/img-9.jpg"> </a></li>
        <li><a href="#">游戏人气：1232158</a></li>
        <li><a href="#">游戏状态：25区开启</a></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="shenxian">
      <ul>
        <li><a href="#"><img src="img/img-10.jpg"> </a></li>
        <li><a href="#">游戏人气：123745</a></li>
        <li><a href="#">游戏状态：18区开启</a></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="shenxian">
      <ul>
        <li><a href="#"><img src="img/img-11.jpg"> </a></li>
        <li><a href="#">游戏人气：178501</a></li>
        <li><a href="#">游戏状态：火爆开启</a></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="shenxian">
      <ul>
        <li><a href="#"><img src="img/img-12.jpg"> </a></li>
        <li><a href="#">游戏人气：983014</a></li>
        <li><a href="#">游戏状态：2服开启</a></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>
    <div class="shenxian">
      <ul>
        <li><a href="#"><img src="img/img-13.jpg"> </a></li>
        <li><a href="#">游戏人气：745214</a></li>
        <li><a href="#">游戏状态：4服开启</a></li>
      </ul>
      <button>选服</button>
      <button class="over">进入游戏</button>
    </div>

  </div>
  <!--角色扮演模块end-->
  <!--官方微博模块start-->
  <div class="weibo">
    <img class="pic_2" src="img/ad1.jpg">
    <img class="pic_2" src="img/ad2.jpg">
  </div>
  <!--官方微博模块end-->
  <!--游戏视频模块start-->
  <div class="game_video">
    <div class="font_s"><a href="#">游戏视频</a></div>
    <div class="he_1">
    <img src="img/img-1.jpg">
      <a>《航海之王》麻辣炫酷反穿越，英雄时尚大变身！</a>
    </div>

    <img src="img/img-2.jpg">
    <a>《弹弹堂》吴克群同名激情主题MV，体验修真乐趣</a>

  </div>
  <!--游戏视频模块end-->
  <div class="guanggao">
    <div class="x">x</div>
  <img src="img/ad3.jpg">
  </div>
  <!--底部信息模块start-->
  <div class="police">
  <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 class="right">@2017开心网   文网文[2009]157号   京ICP证080482号   京公网安备110000000003号 未成年人家长监护</li>
  </ul>
  </div>
  <!--底部信息模块end-->
</div>

</body>
</html>
七号男技师
关注
  • 4
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
开心网游戏简单页面
10-04
HTML+CSS开心网游戏简单页面布局 适合刚学习HTML标签和CSS的综合应用
html-制作开心网游戏页面,【手把手】制作一个简单的HTML网页
weixin_39776991的博客
06-03 1869
新建一个html文件：1488713605137007396.png我要给body添加一些样式，就在head元素上挂载一个style元素。1488713655277049231.png然后，写样式表：1488714003902054281.png效果：1488714070605004548.png这样的话，我们就可以看到body部分了。现在，我给body添加一点padding。1488714153...
HTML -----------------制作开心网游戏页面!!!!
热门推荐
weixin_36024620的博客
10-23 1万+
开心网 .tou { height:50px; background-image: url(03%20%E6%8F%90%E4%BE%9B%E7%BB%99%E5%AD%A6%E5%91%98%E7%9A%84%E4%B8%8A%E6%9C%BA%E7%BB%83%E4%B9%A0%E7%B4%A0%E6%9D%90/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/
仿开心网的前端页面 html+css
凉意的博客
03-21 3066
效果如下图所示 这就不贴代码了，代码和图片全放在https://gitee.com/feeling-cool/html-css​​​​​​
HTML练习--制作开心庄园页面
gengzhi1293443962的博客
10-16 9837
无标题文档 .a { font-family: "Times New Roman"; font-size: 18px; font-style: normal; line-height: 40px; font-weight: bolder; font-variant: normal; color: #960; } .b { font-family: "Times New Roman
HTML练习css--制作开心餐厅介绍页面
gengzhi1293443962的博客
10-14 1万+
百度一下,就知道 .a{font-size:12px;color:#00DB00;} .b{font-size:24px;color:#00DB00;} p{font-size:12px;} .c{font-size:18px;color:red;} #d{font-size:12px;color:#2828FF;} 开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打
开心网游戏界面Html
PPDY93的博客
05-27 6310
文章目录敲完心得页面目标图我的效果图我敲的代码布局分析图+图片素材 敲完心得 傍晚了，花了一下午时间，我终于终于把这个页面东凑西拼弄好了，高度还原了这个页面，怎么说呢，真的很累，就是凑，在敲代码前还是建议先构思好，你要用表格还是列表还是表单什么的，先想好布局，然后再下手，成果了就好，虽然累，但是看到结果出来那一刻还是能开心一点点的，好了，吃饭去啦。加油！ 页面目标图 我的效果图 我敲的代码 <!DOCTYPE html> <html> <head> <me
HTML制作开心网游戏静态页面
等待是种历练的博客
11-07 2607
利用css样式，设置游戏网站的静态页面，先说明思路： 1.先设置最上方为一个div，并且添加背景颜色（建议用取色器，这里比较草率） 2.将第二个板块划分为一个div，左侧为ul，注意宽度的合理分配，并且在右边插入一个div用于存放提交表格 3.下方的两块以及右侧划分两个div，注意上方文字的对齐和背景。
作业一学期三书十章
sc13647346287的博客
11-16 340
body,div,ul,li,h3，from{ padding: 0; margin: 0;}li{ list-style: none;}a{ text-decoration: none;}a:hover{ text-decoration: none;}.whole{ width: 1000px; margin: 0 auto; height: 10...
html实现开心消消乐小游戏
xcLeigh
05-10 2247
html实现开心消消乐小游戏源码，消消乐源码下载，《开心消消乐》 是一款三消游戏，游戏画面精美、上手简单。玩家只需通过鼠标，拖动小动物，让三个及以上的同色小动物横竖相连即可消除，完成每关的指定消除目标就可以过关。
开心游戏网页面
12-12
自己自学HTML,CSS3时，进行练习做的一个简单的页面，用作学习使用。
开心网站游戏
09-25
HTML网站制作，运用了js以及HTML。实现页面美化及其点击跳转页面
开心网HTML代码
06-28
开心网HTML代码　HTML第十章　html
开心网源码
09-09
自己之前做安卓项目就是拿的这个模板，很有用，购物类都可以按照这个模板来做
New制作开心网页游戏.rar
06-28
开心网网页游戏制作，花费我们2天的时间完成的大作，希望你能喜欢。
公司网页效果图
03-04
公司网页效果图
左右图片轮播网页效果图
11-13
左右图片轮播网页效果图
网页效果图
09-23
网页效果图网页效果图网页效果图网页效果图网页效果图
某厂区规划设计附效果图.rar
09-14
某厂区规划设计附效果图.rar
制作开心网页游戏html
最新发布
10-17
好的，制作开心网页游戏需要以下几个步骤： 1. 设计游戏规则和玩法 2. 编写HTML页面，包括游戏界面和交互元素 3. 使用JavaScript编写游戏逻辑和交互效果 4. 测试和调试游戏 具体实现方法可以参考以下步骤： 1. 设计游戏规则和玩法 - 确定游戏类型，例如益智、休闲、竞技等 - 设计游戏目标和胜利条件 - 设计游戏难度和关卡系统 - 设计游戏角色和道具 2. 编写HTML页面，包括游戏界面和交互元素 - 使用HTML和CSS设计游戏界面，包括背景、角色、道具等 - 添加交互元素，例如按钮、输入框、音效等 3. 使用JavaScript编写游戏逻辑和交互效果 - 实现游戏规则和玩法 - 处理用户输入和交互事件 - 实现游戏动画效果和音效 4. 测试和调试游戏 - 在不同浏览器和设备上测试游戏兼容性 - 发现并修复游戏中的错误和漏洞

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七号男技师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值