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

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