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

news2025/11/1 6:28:12

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


 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1976848.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OpenCV||超详细的图像处理模块

OpenCV||超详细的图像处理模块

一、颜色变换cvtColor dst cv2.cvtColor(src, code[, dstCn[, dst]]) src: 输入图像&#xff0c;即要进行颜色空间转换的原始图像。code: 转换代码&#xff0c;指定要执行的颜色空间转换类型。这是一个必需的参数&#xff0c;决定了源颜色空间到目标颜色空间的转换方式。dst…
阅读更多...
实现元素定位：掌握Selenium八大定位方法

实现元素定位：掌握Selenium八大定位方法

文章目录 0. 八大定位方法1. id2. name3. xpath4. css_selector 0. 八大定位方法 当实现测试自动化&#xff0c;编写测试用例时&#xff0c;首先需要在web界面找到对应元素位置&#xff0c;而Selenium提供了一套对应的API&#xff0c;被封装在WebDriver类中。如下图&#xff0…
阅读更多...
JAVA字符串刷题（力扣经典算法及题解）

JAVA字符串刷题（力扣经典算法及题解）

练习一&#xff1a; 输入字符串aba,依次输出各个字符 import java.util.Scanner;public class StringTomrs {public static void main(String[] args) {Scanner scnew Scanner(System.in);String numbersc.next();System.out.println("输入的字符串是"number);for(i…
阅读更多...
使用FastChat快速部署LLM服务

使用FastChat快速部署LLM服务

原文&#xff1a;https://zhuanlan.zhihu.com/p/705915093 FastChat 是一个用于训练、服务和评估基于LLM的聊天机器人的开放平台&#xff0c;它的核心功能包括&#xff1a; 最先进模型&#xff08;例如 Vicuna、MT-Bench&#xff09;的训练和评估代码。具有 Web UI 和与 Open…
阅读更多...
＜Rust＞使用rust实现crc16_modbus校验码生成？

＜Rust＞使用rust实现crc16_modbus校验码生成？

前言 本文是使用rust代码来实现crc16 modbus校验码的输出。 概述 crc16 modbus算法简介： 代码实现： crc16 modbus是crc校验码的其中一种计算方式，通常用于modbus类通讯的数据校验上。 其计算步骤如上面的图片所示，通常此校验算法用在工控行业比较多，如一些支持串口通讯…
阅读更多...
Linux驱动----总线

Linux驱动----总线

总线相关 总线注册和注销总线device对象----描述设备信息&#xff0c;包括地址&#xff0c;中断号和其他的一些自定义数据注册和注销device对象----指将device注册到mybus总线 driver对象----描述设备驱动的方法&#xff08;操作地址和中断&#xff09;注册和注销driver对象---…
阅读更多...
38 器件移动、旋转、镜像、对齐、等间距操作介绍39 器件、网络、过孔锁定与解锁操作40 相同模块复用操作41 测量、查询功能介绍

38 器件移动、旋转、镜像、对齐、等间距操作介绍39 器件、网络、过孔锁定与解锁操作40 相同模块复用操作41 测量、查询功能介绍

38 器件移动、旋转、镜像、对齐、等间距操作介绍&&39 器件、网络、过孔锁定与解锁操作&&40 相同模块复用操作&& 41 测量、查询功能介绍 第一部分 38 器件移动、旋转、镜像、对齐、等间距操作介绍第二部分 39 器件、网络、过孔锁定与解锁操作第三部分 4…
阅读更多...
明确工作目标学习稿：计算技术体系的发展方向

明确工作目标学习稿：计算技术体系的发展方向

学习2022年《孙凝晖&#xff1a;建立高水平自立自强的计算技术新体系》 计算所新时期的目标就是要建立高水平自立自强的计算技术新体系&#xff0c;其中&#xff0c;针对处理器提出“C体系”、针对信息基础设施提出“信息高铁”体系。 计算技术体系的新结构 包含C体系、信息高…
阅读更多...
自建数据库VS云数据库

自建数据库VS云数据库

自建数据库VS云数据库 什么是自建数据库&#xff1f;自建数据库方案自建数据库的优点自建数据库的缺点什么是云数据库&#xff1f;自建数据库的缺点什么是云数据库&#xff1f; 云数据库方案云数据库的优点云数据库的缺点适用场景比较总结 【纪录片】中国数据库前世今生 在数字…
阅读更多...
日志采集格式指定实验

日志采集格式指定实验

目录 一. 进入配置文件&#xff0c;有两种方式指定采集格式 &#xff08;1&#xff09;日志默认格式指定 &#xff08;2&#xff09;指定用liu的格式采集某一个日志 二.重启服务 三.测试 #WESTOS_FORMAT&#xff1a; 格式名称 #%FROMHOST-IP%&#xff1a; 日志来源主…
阅读更多...
合作开发中的Simulink算法保护

合作开发中的Simulink算法保护

项目越来越大&#xff0c;分工越来越细&#xff0c;合作开发已经成为常态。在几家公司或者几个团队合作开发同一个项目的时候&#xff0c;经常会出现互相之间技术上要做一些保密工作&#xff0c;一方做的模型或代码不能给另一方看到&#xff0c;但又要求可以让对方能够运行自己…
阅读更多...
File类的用法

File类的用法

目录 File的常见方法 普通文件的创建 普通文件的删除 deleteOnExit 目录的创建 mkdir mkdirs 文件的重命名和剪切 剪切 重命名 InputStream read() OutputStream write() Reader Writer write(String str) 代码练习 扫描指定⽬录&#xff0c;并找到名称中包含…
阅读更多...
git clone private repo

git clone private repo

Create personal access token Clone repo $ git clone https://<user_name>:<personal_access_tokens>github.com/<user_name>/<repo_name>.git
阅读更多...
【DOCKER】VNC可视化UBUNTU容器

【DOCKER】VNC可视化UBUNTU容器

1. 启动测试容器 # 启动容器 # -e USERu20 vncserver所需环境变量 # -p 15901:5901 vncserver所需端口 docker run -id --privilegedtrue --restart always --useru20 --workdir/home/u20 -p 15901:5901 -e USERu20 --name ui u20:dev# 进入容器 docker exec -it ui /bin/ba…
阅读更多...
jupyter支持跨机器远程访问

jupyter支持跨机器远程访问

1. 远程访问场景 本地往往缺少GPU设备&#xff0c;为了让我们的代码能在有GPU设备的机器上运行&#xff0c;就需要在远程机器上启动jupyter notebook, 这意味着我们要在本地机器的浏览器上访问远程机器上的jupyter notebook。但是直接按ip访问会报如下错误&#xff1a; 因为ju…
阅读更多...
MATLAB优化模型（3）

MATLAB优化模型（3）

一、前言 在MATLAB中处理各种优化问题&#xff0c;如背包问题、指派问题&#xff08;也称为分配问题&#xff09;、抽屉原理应用、旅行商问题&#xff08;TSP&#xff09;以及排队论模型&#xff0c;通常需要结合MATLAB的优化工具箱&#xff08;如Optimization Toolbox&#xf…
阅读更多...
C++ | 动态内存管理 new、delete (用法、底层)详解

C++ | 动态内存管理 new、delete (用法、底层)详解

目录 简单回顾C语言动态内存管理 new、delete的用法 内置类型 new delete 自定义类型 new、delete底层讲解&#xff08;重要&#xff09; operator new 与 operator delete 定位 new 结语 简单回顾C语言动态内存管理 在C语言的学习阶段 我们接触到了三个能在堆上开辟…
阅读更多...
vulhub靶场之wordpress关卡（保姆级教程）

vulhub靶场之wordpress关卡（保姆级教程）

一.打开wordpress关卡 1.选择简体中文 然后添加信息 点击安装wordpress 1.2 登陆后台 1.3 在后台修改模板 1.4 找一个php文件&#xff0c;在最开头加入一句话木马 点击更新 然后访问默认模板路径 下面的是默认的模板路径 /wp-content/themes/twentyfifteen/404.php 然后…
阅读更多...
JAVA基础 - 数据库编程

JAVA基础 - 数据库编程

目录 一. 简介 二. 数据持久化 三. 安装MySQL 四. JDBC API 五. 三个重要接口 一. 简介 数据库编程是指使用编程语言与数据库进行交互&#xff0c;以实现数据的存储、检索、更新、删除等操作。 在数据库编程中&#xff0c;常见的任务包括&#xff1a; 连接数据库&#x…
阅读更多...
Spring统一返回类型中关于String的问题

Spring统一返回类型中关于String的问题

文章目录 1. 问题铺垫2. 解决方法3. 问题分析4 解决方法解释 1. 问题铺垫 首先设置了以下代码统一处理返回类型 ControllerAdvice public class ResponseAdvice implements ResponseBodyAdvice {Overridepublic boolean supports(MethodParameter returnType, Class converte…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023