体质计算小网页

超简布局:

在这里插入图片描述

制作过程:

网页可视化展示部分:

先确定网页中的大体内容,包括哪些文本
在对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 来获取
(主题,在获取元素值时,没有小括号,不需要实例化)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

YingJingh

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

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

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

打赏作者

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

抵扣说明:

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

余额充值