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

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

news 2025/10/31 17:27:23

这次我们使用前端实现一个简单的游戏页面,理论上可以增加很多玩法，，但是这里为了加深前端的样式和JS点击事件，用该案例做练习。

  1. 首先需要掌握手机端的自适应，我们是只做手机端玩家页面 。需要允许自适应手机端页面， 用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需要掌握的基本属性

  1. 掌握模块居中显示 margin: 0 auto; 通常用于以下场景：
  2. 居中一个块级元素：如果你有一个块级元素（如 div），并希望它在页面上水平居中显示，可以应用这个样式。
  3. 响应式设计：在响应式布局中，margin: 0 auto; 可以确保元素在不同屏幕尺寸下都能保持水平居中。
  4. 保持布局的一致性：当元素需要在其容器内保持水平居中，而不影响垂直布局时。
  5. 在该页面里面，我们需要一个div 模块 是以指针指向的为背景，同时这个背景需要居中。我们定义一个居中的模块:
  6.        #yximg {
  7.             background: url(wenzhangku.gif);
  8.             height: 320px;
  9.             width: 320px;
  10.             margin: 0px auto;
  11.             position: relative;
  12.         }

这样就实现了图片背景居中的效果，技巧我们全部游戏的背景都是可以放入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>


 

相关文章：

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

这次我们使用前端实现一个简单的游戏页面,理论上可以增加很多玩法&#xff0c;&#xff0c;但是这里为了加深前端的样式和JS点击事件&#xff0c;用该案例做练习。 首先需要掌握手机端的自适应&#xff0c;我们是只做手机端玩家页面 。需要允许自适应手机端页面&#xff0c; 用…...

编程日记 2024/8/4 7:12:13

芯片制造过程4光刻机

以下内容均取自哔哩哔哩up主谈三圈 链接: 芯片制造详解04&#xff1a;光刻技术与基本流程&#xff5c;国产之路不容易 1.光刻原理 通过光掩膜、光刻机、光刻胶进行光刻 光掩膜是芯片的蓝图&#xff0c;是一张刻有集成电路板图的玻璃遮光板光刻机就像一台纳米级的打印机&#…...

编程日记 2024/8/4 7:11:12

Nexus3 Repository代理pypi设置与应用

目录 1. 创建Blob库并指定路径 2. 创建pypi阿里镜像源 3. 创建pypi腾讯镜像源 4. 创建一个pypi组管理 5. 配置pip 6. 下载测试 扩展&#xff1a;配置好后无法下载解决思路。 Nexus 存储库中的 Blob 存储是指一种用于存储大量非结构化数据的技术。在 Nexus 存储库的上下文…...

编程日记 2024/8/4 7:10:11

PMP–知识卡片--燃起图

燃起图用两条曲线分别绘制随时间的推移、完成的工作量和总工作量的变化情况。它不仅能清晰地展示项目进度&#xff0c;还是对团队成员的一种激励形式。 使用燃起图可以更好地了解进度、范围变更和预期完成时间&#xff0c;它为所有相关方提供了更清晰的进度状态。 燃起图根据工…...

编程日记 2024/8/4 7:09:10

63 epoll服务器 (ET模式)

基于LT模式修改&#xff0c;并加入前面的应用层计算器&#xff0c;实现稍完整的服务器功能 1.修改tcp_socket.hpp&#xff0c;新增非阻塞读和非阻塞写接口 2.对于accept返回的new_sock加上EPOLLET这样的选项 注意&#xff1a;此代码暂时未考虑listen_sock ET的情况&#xff0c…...

编程日记 2024/8/4 7:04:02

AI Agent

一&#xff0c;什么是AI Agent&#xff1f; AI Agent&#xff08;人工智能代理&#xff09;是一种能够自主执行任务和决策的智能系统。它通常具备感知环境、处理信息和采取行动的能力&#xff0c;能够模拟人类的思维和行为方式。 它可以是软件程序&#xff0c;也可以是嵌入式…...

编程日记 2024/8/4 7:02:59

select

select函数简介: select是Linux中常用的多路复用IO机制&#xff0c;它允许程序同时监控多个文件描述符&#xff08;可以是套接字socket&#xff0c;也可以是普通文件&#xff09;的读、写和异常事件。 #include <sys/select.h> #include <sys/time.h> …...

编程日记 2024/8/4 6:58:55

按照指定格式打印pprint()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 按照指定格式打印 pprint() [太阳]选择题 根据给定的Python代码&#xff0c;哪个选项是正确的&#xff1f; from pprint import pprint data { name: A, age: 30, hobbies:…...

编程日记 2024/8/4 6:56:53

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

一、ASM创建新的磁盘组 1、查看系统中可用的磁盘 set lines 150; col name for a35; col path for a35; select group_number,path, state, name, total_mb, free_mb from v$asm_disk; 2、磁盘组操作 创建磁盘组 create DISKGROUP DATADGV2 EXTERNAL REDUNDANCY DISK /dev…...

编程日记 2024/8/4 6:55:52

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

目录 1.理解分支2.创建分支3.切换分支4.合并分支5.删除分支 1.理解分支 感性理解&#xff1a;分支可以理解为平行宇宙&#xff0c;但是在用户需要的时候&#xff0c;可以将两个平行宇宙合并&#xff0c;此时两个平行宇宙的效果将会"叠加"理性理解&#xff1a;每次提…...

编程日记 2024/8/4 6:52:49

C语言指针（1）

目录 一、内存和地址 1、生活中的例子 2、内存的关系 二、指针变量和地址 1、&符号&#xff0c;%p占位符 2、一个简单的指针代码。 3、理解指针 4、解引用操作符 5、指针变量的大小。 三、指针变量类型的意义 1、指针解引用的作用 2、指针指针 3、指针-指针 4…...

编程日记 2024/8/4 6:50:47

C语言中的指针与数组

C语言中的指针与数组是编程中非常基础且强大的概念&#xff0c;它们之间有着紧密的联系和相互转换的可能性。深入理解这两个概念对于编写高效、可维护的C程序至关重要。以下将详细探讨C语言中的指针与数组&#xff0c;包括它们的基本概念、关系、应用以及一些高级话题。 一、指…...

编程日记 2024/8/4 6:49:45

CentOS7.9升级OpenSSL1.1.1w

下载 https://www.openssl.org/source/old/1.1.1/index.html 安装依赖 yum install gcc libffi-devel zlib* openssl-devel libffi-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gcc perl make 解压 tar -zxvf openss…...

编程日记 2024/8/4 6:46:42

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

环境搭建&#xff1a;如何安装和使用 MySQL Connector/J—— MySQL Community Server 的关系 在 Java 项目中&#xff0c;与 MySQL 数据库的交互需要使用 MySQL Connector/J 驱动。本文将介绍 MySQL Connector/J 的作用、安装方法以及与 MySQL Community Server 的关系&#xf…...

编程日记 2024/8/4 6:42:38

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

在当今数字化时代&#xff0c;企业财务管理的智能化已成为推动企业持续增长的关键因素。SAP 财务管理系统通过智能化技术&#xff0c;帮助财务部门提高收入、控制成本并降低财务风险&#xff0c;释放财务数字化转型的价值。财务 ERP 作为 SAP 的核心组成部分&#xff0c;将帮助…...

编程日记 2024/8/4 6:41:36

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

使用py脚本自动给聊天窗口发消息 1.突然的自我2.编写脚本玩一把i.先获取窗口位置ii.模拟聊天iii.疗效不错呢 1.突然的自我 突然想到pyautogui可以做那么事情&#xff0c; 那么是不是可以模拟聊天呢&#xff0c;如果结合现在的大模型chatGPT一边问然后得到结果一边自动和别人聊…...

编程日记 2024/8/4 6:40:35

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

在QML中&#xff0c;可以通过使用JavaScript来处理日期和时间的转换&#xff0c;其中包括将时间戳转换为指定格式的时间字符串&#xff0c;以及将时间字符串解析为时间戳的操作。 将时间戳转换为指定格式的时间字符串 在QML中&#xff0c;可以通过JavaScript的Date对象来处理…...

编程日记 2024/8/4 6:37:32

C++ new/delete 重载

operator new/delete 重载 语法格式 void *operator new(size_t); void operator delete(void *); void *operator new[](size_t); void operator delete[](void *);#include <iostream> using namespace std;class A { public:// 构造函数A(){// _x1;// _y2;// 在n…...

编程日记 2024/8/4 6:36:31

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

读取连接中文件流和页面展示base64编码的文件 背景需求从接口处获取base64编码的字节流依赖java 代码 前端展示pdf图片 背景需求 我需要展示一个pdf 文件在页面上&#xff0c;但是我一直没办法将 pdf的下载链接用预览方式展示出来&#xff0c;于是打算讨个巧&#xff0c;直接给…...

编程日记 2024/8/4 6:34:28

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

这里写目录标题 分类理解 SYSTEM 和 USER 在 AI 对话中的角色System MessageUser Message工作原理示例分类示例更多分类示例理论问题理论 分类 理解 SYSTEM 和 USER 在 AI 对话中的角色 在分类任务中&#xff0c;通常需要向模型提供一个需要将其分类到预定义类别中的文本场景…...

编程日记 2024/8/4 6:32:27

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/10/19 16:25:32

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/25 11:57:30

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/10/28 5:42:30

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/10/27 13:40:44

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/10/29 18:00:42

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/10/24 14:40:23

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/10/25 12:56:40

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2025/10/30 18:02:54

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/10/25 18:26:50