当前位置：首页 > news >正文

样式与特效（3）——实现一个测算页面

news 2026/2/11 5:56:09

这次我们使用前端实现一个简单的游戏页面,理论上可以增加很多玩法，，但是这里为了加深前端的样式和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>

按钮模块: 使用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>

样式与特效（3）——实现一个测算页面

相关文章：

样式与特效（3）——实现一个测算页面

芯片制造过程4光刻机

Nexus3 Repository代理pypi设置与应用

PMP–知识卡片--燃起图

63 epoll服务器 (ET模式)

AI Agent

select

按照指定格式打印pprint()

Study--Oracle-07-ASM常用维护操作（五）

[Git][分支管理][上]详细讲解

C语言指针（1）

C语言中的指针与数组

CentOS7.9升级OpenSSL1.1.1w

环境搭建：如何安装和使用 MySQL Connector/J——与 MySQL Community Server 的关系

SAP 财务管理系统 —— 企业财务智能化的领航者

python通过pyautogui自动给微信聊天窗口发消息

QML中的Date将时间戳和指定格式时间互转

C++ new/delete 重载

读取连接中文件流和页面展示base64编码的文件

【大模型从入门到精通4】openAI API 分类

＜6＞-MySQL表的增删查改

渲染学进阶内容——模型

Java入门学习详细版（一）

CMake控制VS2022项目文件分组

使用Spring AI和MCP协议构建图片搜索服务

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

Golang——6、指针和结构体

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

【堆垛策略】设计方法