网站设计公司域名服务器建设,青岛城乡住房建设厅网站,新开店铺怎么做推广,wordpress 照片墙这次我们使用前端实现一个简单的游戏页面,理论上可以增加很多玩法#xff0c;#xff0c;但是这里为了加深前端的样式和JS点击事件#xff0c;用该案例做练习。 首先需要掌握手机端的自适应#xff0c;我们是只做手机端玩家页面 。需要允许自适应手机端页面#xff0c; 用…这次我们使用前端实现一个简单的游戏页面,理论上可以增加很多玩法但是这里为了加深前端的样式和JS点击事件用该案例做练习。 首先需要掌握手机端的自适应我们是只做手机端玩家页面 。需要允许自适应手机端页面 用meta的view属性即可 可让玩家缩放 并且自适应手机屏幕属性。 meta nameviewport contentwidthdevice-width,initial-scale1
苹果手机玩家一个额外的标签: meta nameapple-mobile-web-app-capable contentyes 是一个针对苹果设备如 iPhone 和 iPad的 HTML 元标签用于提供对移动 Safari 浏览器的特定指令。这个标签的作用如下
nameapple-mobile-web-app-capable指定这是一个针对苹果移动设备网页应用的元数据标签。
contentyes设置内容为 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 classnameput请输入你的名字:input typetext value classname_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 classbtn_box button classbtn关注我们/button button classbtn智力游戏/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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta nameapple-mobile-web-app-capable contentyestitle测测最近有多少异性暗恋你/titlemeta namekeywords content测测最近有多少异性暗恋你 /meta namedescription content测测最近有多少异性暗恋你 /
/headbodydiv classmaindiv classtitle测测最近有多少异性暗恋你?/div!--图片模块--div idyximgdiv idstartimg srcstart.png classjiantou/div/divdiv classnameput请输入你的名字:input typetext value classname_input/div!--按钮模块--div classbtn_boxbutton classbtn关注我们/buttonbutton classbtn智力游戏/button/div!--推广的大模块--div classtuiguangdiv classtuiguang_titleh3↓ 更多好玩测试 ↓/h3/divdiv classtuiguang_listullia hrefhttps://blog.csdn.net/weixin_43435138测你会成为哪家公司总裁/ahr //lilia hrefhttps://blog.csdn.net/weixin_43435138测测年薪多少才配得上你/ahr //lilia hrefhttps://blog.csdn.net/weixin_43435138测测你天生是什么命/ahr //lilia hrefhttps://blog.csdn.net/weixin_43435138测测你前世是什么人/ahr //lilia hrefhttps://blog.csdn.net/weixin_43435138穿越回古代你会是谁/ahr //lilia hrefhttps://blog.csdn.net/weixin_43435138测你五年内会开什么车/ahr //lilia hrefhttps://blog.csdn.net/weixin_43435138测测你一生中最辉煌的年龄/ahr //li/ul/div/divfooter stylemargin-top:10px; font-size:12px; color:#bbb; text-align:center;郑重承诺本页面为纯静态HTML制作绝不收集任何用户信息!/footer/divstyle.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
