体质计算小网页

超简布局:

在这里插入图片描述

制作过程:

网页可视化展示部分:

先确定网页中的大体内容,包括哪些文本
在对style做调整,比如,css样式。
在调整时,需要考虑元素的种类,是块级元素还是行内元素。

块级元素布局时,可以使用《margin:(上下)(左右=auto)》居中
包括,div、p、ul、li、dl
行内元素包括:span、a、i、em
行内-块级元素:input、img、botton

常用的表单是form,其类型包括:input type=‘text’,
botton类型的元素。

常用的样式设置的属性名称有:
border:边界设置*颜色、线条粗细
border-top(bottom):10px red solid;

margin:边框位置

padding:行内样式设置(比如,文字距离边框的距离)上右下左

weight:
height:
vertical-align:middle,right,left(垂直对齐)
font-size:字体大小
background-color,image,
(背景颜色:比背景图片更靠近底层。background-color:
背景图片:background-image:url(‘图片路径’)
背景图片大小:background-size:x轴方向 y轴方向
背景定位:background-position:x轴方向 y轴方向
背景重复:background-repeat:no-repeat; repeat-x; repeat-y;)
加粗样式text-align:center;

js计算部分

1. 定义变量

	var 变量名 
	let 变量名
	const 常量名

2. 绑定botton元素
添加点击事件方法:
1.找到元素:document.getElementById(‘id名’);、document.getElementsByClassName(‘class名’);、 document.getElmentsByTagName(‘标签名’);
2.元素.onclick = function(){}
3. 函数定义
选择函数
if (表达式){执行语句}
循环函数
for(表达式1,;表达式2){循环体}

4. 赋值返回
第一类:获取双标签中的值(div,span,p)
.innerHTML 来获取

第二类:获取input标签中的值()
.value 来获取
(主题,在获取元素值时,没有小括号,不需要实例化)

要在HBuilder中创建一个用于计算BMI(体质指数)的网页,你可以使用HTML来构建用户界面,CSS来设计样式,以及JavaScript来处理计算逻辑。以下是一个简单的示例代码: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>BMI计算器</title> <style> body { font-family: Arial, sans-serif; } .container { max-width: 300px; margin: 50px auto; text-align: center; } input[type="text"], input[type="number"] { width: 100%; padding: 10px; margin: 10px 0; } button { padding: 10px 20px; } .result { margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>BMI计算器</h1> <input type="number" id="weight" placeholder="请输入重(公斤)"> <input type="number" id="height" placeholder="请输入身高(米)"> <button onclick="calculateBMI()">计算</button> <div class="result" id="result"></div> </div> <script> function calculateBMI() { var weight = document.getElementById(&#39;weight&#39;).value; var height = document.getElementById(&#39;height&#39;).value; if (weight !== &#39;&#39; && height !== &#39;&#39;) { weight = parseFloat(weight); height = parseFloat(height); var bmi = weight / (height * height); document.getElementById(&#39;result&#39;).innerText = &#39;您的BMI值为: &#39; + bmi.toFixed(2); } else { document.getElementById(&#39;result&#39;).innerText = &#39;请完整填写重和身高信息&#39;; } } </script> </body> </html> ``` 这个示例包含了以下几个部分: 1. HTML部分定义了网页的结构,包括输入重和身高的输入框以及一个按钮。 2. CSS部分负责对网页进行基本的样式设置,使得输入框和按钮在网页中居中显示。 3. JavaScript部分定义了`calculateBMI`函数,该函数会在点击计算按钮时被调用。它读取用户输入的重和身高数据,计算BMI值,并在网页上显示结果。 在HBuilder中,你可以将这段代码复制到一个新的HTML文件中,并运行它来查看效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YJII

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值