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

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

news 2026/1/31 0:44:29

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2026/1/27 3:58:29

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/1/27 0:15:19

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/1/26 18:51:05

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/1/22 11:16:26