这次我们使用前端实现一个简单的游戏页面,理论上可以增加很多玩法，，但是这里为了加深前端的样式和JS点击事件，用该案例做练习。
- 首先需要掌握手机端的自适应，我们是只做手机端玩家页面 。需要允许自适应手机端页面， 用meta的view属性即可 可让玩家缩放 并且自适应手机屏幕属性。
<meta name="viewport" content="width=device-width,initial-scale=1">
苹果手机玩家一个额外的标签:
<meta name="apple-mobile-web-app-capable" content="yes"> 是一个针对苹果设备（如 iPhone 和 iPad）的 HTML 元标签，用于提供对移动 Safari 浏览器的特定指令。这个标签的作用如下：
name="apple-mobile-web-app-capable"：指定这是一个针对苹果移动设备网页应用的元数据标签。
content="yes"：设置内容为 yes，表示该网页应该被视为一个 web 应用，并且可以添加到主屏幕作为一个应用图标，用户可以从主屏幕直接启动。
手机端H5需要掌握的基本属性
- 掌握模块居中显示 margin: 0 auto; 通常用于以下场景：
- 居中一个块级元素：如果你有一个块级元素（如 div），并希望它在页面上水平居中显示，可以应用这个样式。
- 响应式设计：在响应式布局中，margin: 0 auto; 可以确保元素在不同屏幕尺寸下都能保持水平居中。
- 保持布局的一致性：当元素需要在其容器内保持水平居中，而不影响垂直布局时。
- 在该页面里面，我们需要一个div 模块 是以指针指向的为背景，同时这个背景需要居中。我们定义一个居中的模块:
- #yximg {
- background: url(wenzhangku.gif);
- height: 320px;
- width: 320px;
- margin: 0px auto;
- position: relative;
- }
这样就实现了图片背景居中的效果，技巧我们全部游戏的背景都是可以放入background里面的，然后将模块居中，这个时候，我们就能看到游戏开始的页面。
3.我们现在需要把箭头放入游戏盘面正中心，表示游戏开始的状态 通过我们的切图，我们可以看到 这是一个透明背景图 宽度100 长度195 我们需要定义好一个这样的div模块 然后将模块放入中央
然后可以看到
放上去是这样的显示，我们现在需要将我们的坐标开始偏移到正中央。
在背景模块里面，我们已经定位了一个背景出来，我们现在是在其对应的模块里面需要确定是正中心，所以需要用到position:absolute属性，根据测算，大约在top 55px left:110px 的具体位置
.jiantou {
width: 100px;
height: 195px;
position: absolute;
top: 55px;
left: 110px;
}
实现目标效果
这里我们用到了绝对定位 还有top left元素具体定位具体的点
4.布局的下面是一个输入模块:
input 是支持class的这样可以定位长宽高 还有内部字体大小，这样才能和外面的符合
<div class="nameput">请输入你的名字:<input type="text" value="" class="name_input"></div>
使用居中定位:，同时使得input可以接受定制的形状大小
.nameput {
text-align: center;
margin-top: 10px;
font-size: 18px;
}
.name_input {
height: 26px;
width: 104px;
font-size: 18px;
border-radius: 5px;
}
5.按钮模块
<!--按钮模块-->
<div class="btn_box">
<button class="btn">关注我们</button>
<button class="btn">智力游戏</button>
</div>
按钮模块: 使用flex布局， 将俩个按钮居中
.btn_box {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
margin: 0 auto;
}
.btn {
font-size: 16px;
margin: 5px;
}
6. 推广页面: 这个和我们的新闻列表有点类似
主要实现思路和前面一样，定义个大模块 然后再在小模块里面
这里掌握边框的技巧 边框是可以定义颜色和灰度的
这样我就定义出了一个有灰度的实线 同时有锐角的
.tuiguang {
border-style: solid;
border-width: 1px;
border-color: #ccc;
margin-top: 10px;
border-radius: 10px;
}
7.掌握 hr的属性控制 hr是可以画灰色的虚线
.tuiguang_list hr {
border-style: dashed;
/* 设置边框样式为虚线 */
border-color: #ccc;
/* 设置边框颜色，可以根据需要调整 */
border-width: 1px;
/* 设置边框宽度，可以根据需要调整 */
}
ul 当成div来使用的技巧方法:
.tuiguang_list ul {
margin-left: 0;
/* 移除ul的左侧外边距 */
padding-left: 0;
/* 移除ul的左侧内边距，如果有的话 */
}
.tuiguang_list li {
list-style: none;
margin-top: 5px;
font-size: 16px;
text-align: left;
}
清理之后，就可以看成一个个div
8.掌握将a标签变成普通文字功能 其实可以使用click事件来点击div的方式触发，但是a标签直接使用，改变a标签的属性也是一种实现方式
a {
color: black;
/* 设置链接颜色为黑色 */
text-decoration: none;
/* 去除下划线 */
font-weight: normal;
/* 设置字体重量为正常 */
font-style: normal;
/* 设置字体风格为正常 */
}
a:hover {
text-decoration: none;
/* 鼠标悬停时显示下划线 */
}
最后实现最开始的页面效果:
完整代码::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>测测最近有多少异性暗恋你？</title>
<meta name="keywords" content="测测最近有多少异性暗恋你？" />
<meta name="description" content="测测最近有多少异性暗恋你？" />
</head>
<body>
<div class="main">
<div class="title">测测最近有多少异性暗恋你?</div>
<!--图片模块-->
<div id="yximg">
<div id="start"><img src="start.png" class="jiantou"></div>
</div>
<div class="nameput">请输入你的名字:<input type="text" value="" class="name_input"></div>
<!--按钮模块-->
<div class="btn_box">
<button class="btn">关注我们</button>
<button class="btn">智力游戏</button>
</div>
<!--推广的大模块-->
<div class="tuiguang">
<div class="tuiguang_title">
<h3>↓ 更多好玩测试 ↓</h3>
</div>
<div class="tuiguang_list">
<ul>
<li><a href="https://blog.csdn.net/weixin_43435138">测你会成为哪家公司总裁？</a>
<hr />
</li>
<li><a href="https://blog.csdn.net/weixin_43435138">测测年薪多少才配得上你？</a>
<hr />
</li>
<li><a href="https://blog.csdn.net/weixin_43435138">测测你天生是什么命？</a>
<hr />
</li>
<li><a href="https://blog.csdn.net/weixin_43435138">测测你前世是什么人？</a>
<hr />
</li>
<li><a href="https://blog.csdn.net/weixin_43435138">穿越回古代你会是谁？</a>
<hr />
</li>
<li><a href="https://blog.csdn.net/weixin_43435138">测你五年内会开什么车？</a>
<hr />
</li>
<li><a href="https://blog.csdn.net/weixin_43435138">测测你一生中最辉煌的年龄？</a>
<hr />
</li>
</ul>
</div>
</div>
<footer style="margin-top:10px; font-size:12px; color:#bbb; text-align:center;">
郑重承诺：本页面为纯静态HTML制作，绝不收集任何用户信息!
</footer>
</div>
<style>
.main {
font-size: 14px;
background-color: white;
height: 500px;
width: 100%;
}
.title {
text-align: center;
font-size: 18px;
font-weight: bold;
}
#yximg {
background: url(wenzhangku.gif);
height: 320px;
width: 320px;
margin: 0px auto;
position: relative;
}
.jiantou {
width: 100px;
height: 195px;
position: absolute;
top: 55px;
left: 110px;
}
.nameput {
text-align: center;
margin-top: 10px;
font-size: 18px;
}
.name_input {
height: 26px;
width: 104px;
font-size: 18px;
border-radius: 5px;
}
.btn_box {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
margin: 0 auto;
}
.btn {
font-size: 16px;
margin: 5px;
}
.tuiguang {
border-style: solid;
border-width: 1px;
border-color: #ccc;
margin-top: 10px;
border-radius: 10px;
}
.tuiguang_title {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.tuiguang_list {
background-color: white;
text-align: left;
}
.tuiguang_list ul {
margin-left: 0;
/* 移除ul的左侧外边距 */
padding-left: 0;
/* 移除ul的左侧内边距，如果有的话 */
}
.tuiguang_list li {
list-style: none;
margin-top: 5px;
font-size: 16px;
text-align: left;
}
.tuiguang_list hr {
border-style: dashed;
/* 设置边框样式为虚线 */
border-color: #ccc;
/* 设置边框颜色，可以根据需要调整 */
border-width: 1px;
/* 设置边框宽度，可以根据需要调整 */
}
/* 样式表 */
a {
color: black;
/* 设置链接颜色为黑色 */
text-decoration: none;
/* 去除下划线 */
font-weight: normal;
/* 设置字体重量为正常 */
font-style: normal;
/* 设置字体风格为正常 */
}
a:hover {
text-decoration: none;
/* 鼠标悬停时显示下划线 */
}
</style>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
