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

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

news 2026/2/8 21:05:50

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

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/2/8 10:51:38

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2026/1/29 5:24:50

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

从物理机到云原生：全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

编程新知 2026/2/6 6:02:06

电脑桌面太单调，用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

编程新知 2025/8/10 0:53:59