html css 和 js 如何协同工作的
- html css 和 js 如何协同工作的
- 一个简单的登录样式的demo
- 在html中通过
<link />
标签引入对应的css文件,例如:
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Log in</title><link rel="stylesheet" type="text/css" href="login.css"/>
</head>
<link />
标签写在<head>
标签层,这样就将css样式文件链接了过来。
- 在html中通过
<script ></script>
标签引入js文件,例如:
<body><script type="text/javascript" src="login.js"></script>
</body>
<script ></script>
写在 <body> </body>
层,相当于将对应的目标文件加载到了这里。
html有了css样式文件,就增加了灵魂,就知道如何取渲染UI样式。js文件中写一些逻辑处理,例如点击事件的处理等,除此外,js中也可以加html。
以下是一个简单的登录功能的例子:
login.html
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Title --><title>Log in</title><!-- link css --><link rel="stylesheet" type="text/css" href="login.css"/>
</head>
<body><!-- login div --><div class="login"><div class="login_nav"><h3><span>Log in</span></h3></div><div class="login_icon"></div><div class="login_content"><div class="login_input"><input id="login_input_account" type="text" placeholder="User Name Or Email"></div><div class="login_input"><input id="login_input_pwd" type="password" placeholder="Password"></div><div class="login_button"><button onclick="loginBtnClick()">Log in</button></div></div></div><!-- load js --><script type="text/javascript" src="login.js"></script>
</body>
</html>
login.css
.login{height:100%;
}.login_nav{background: #1672c1;height: 44px;text-align: center;font-size: 16px;
}
h3{padding: 6px;
}.login_icon{height: 120px;
}input[type="text"]{border: 1px solid lightgray;border-radius: 3px;box-sizing: border-box;width: 70%;height: 44px;text-indent: 1em;font-size: 14px;margin-left: 15%;margin-top: 16px;
}
input[type="password"]{border: 1px solid lightgray;border-radius: 3px;box-sizing: border-box;width: 70%;height: 44px;text-indent: 1em;font-size: 14px;margin-left: 15%;margin-top: 16px;
}input[type="text"]::placeholder,input[type="password"]::placeholder{color: lightgray;
}
button{width: 70%;height: 44px;text-indent: 1em;font-size: 14px;margin-left: 15%;margin-top: 20px;background-color: #1672c1;border: 1px solid #1672c1;
}
login.js
loginBtnClick = () => {const a = document.getElementById("login_input_account").value;const p = document.getElementById("login_input_pwd").value;if (!a || !p) {alert("Please input login info!");return;}alert("login Btn Clicked");
};
将login.html, login.css, login.js 放一个文件中,点击login.html,就可以在浏览器打开这个web页面了,浏览器内核会负责将html css 和 js进行"解释",将对应标签和样式显示出来。
如果没有 css 的话,页面显示出来是这样的:
加了 css 样式修饰,是这样的
可以看出差距还是挺大的,css 可以说是 html 的灵魂,有了 css 的修饰,前端页面才会更加美观。
【See also】
[1] 菜鸟教程 - CSS 创建:https://www.runoob.com/css/css-howto.html
html css 和 js 如何协同工作的相关推荐
- IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题.原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收 ...
- CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
- js和html以及css的区别,html、css、js中的区别与关系
html.css.js中的区别与关系 2020/04/26 作者: 互盟股份 今天小盟给大家分享的是html.css.js中的区别与关系,相信很多人都不太了解,为了让大家更加了解html.css.js ...
- php替换时 css中的图片不显示不出来,URL重写:CSS,JS和图像未加载
我遵循规则 .htaccess Options +FollowSymLinks RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAM ...
- 介绍html CSS和JS的定义或引用
现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) . 浏览器解析原理 服务器接收到HTML->解析HTML结构建DOM树-> ...
- 使用Minify合并css和js减少http请求
一个页面可能包含很多的css和js文件,如果能够合并这些文件,能够大大减少网站的http请求,减少日志的产生和用户体验的提高. Minify就是一个能够合并css或js为一个文件的工具,不但可以合并, ...
- 你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接: 5 Ways that CSS and JavaScript Interact That You ...
- 判断CSS与JS是否加载完毕的方法
简单而有效的思路:三步走 一.显示默认提示:直接在页面上标识一个友好的提示:例如xxx,系统加载未完成,建议您刷新后再进行yy操作 二.css加载完毕:对提示内容进行处理:例如红色提示变..黄色警告 ...
- 解决修改css或js文件,浏览器缓存更新问题。
解决修改css或js文件,浏览器缓存更新问题. 参考文章: (1)解决修改css或js文件,浏览器缓存更新问题. (2)https://www.cnblogs.com/zhangycun/p/7427 ...
最新文章
- java多线程常用面试_java的多线程常见面试题
- linux 脚本案例,30个关于Shell脚本的经典案例(上)
- 招商银行的AI野心:转型金融科技公司?
- 北邮OJ 2016网预 - Saber's Conjecture
- 计算机设置从u盘启动怎么办,电脑设置从u盘启动盘启动出现蓝屏该怎么解决?
- Mysql的数据库引擎 区别特点_mysql数据库存储引擎及区别
- 小箭头的写法,z-index在ie7显示混乱问题
- 只需1分钟,这个网站用AI分离歌曲的人声、伴奏和乐器声
- 10个常用的数据分析商业模型之波特五种竞争力模型(一)
- java map putall 覆盖_Java HashMap putAll() 方法
- 人工智能之我见(1)
- 《数据库原理与应用》实验一
- html向下滚动条,《html》不显示滚动条,鼠标滑轮可以控制向下滚动是怎么回事?...
- 函数——哥德巴赫猜想
- 制作一个简单HTML游戏网页(HTML+CSS)_英雄联盟 lol 7页
- 用jk触发器构成二分频电路_如何用下沿触发JK触发器设计一个同步二,四分频电路?...
- Origami Airplanes Folds In 3D:非常给力的3D折纸应用
- [Azure]推荐一个好用的Azure存储管理工具——CloudBerry Explorer
- golang扫描端口
- 感人的故事值得分享给大家
热门文章
- [几何]改革春风吹满地
- 文件下载多级文件生成ZIP压缩包
- 报错:Prop being mutated: “placement“found in---> <ElDatePicker> at packages/date-picker/src/picker
- Leetcode题目练习总结(持续更新......)
- 如何将自己电脑作为服务器将项目发布至外网
- 怎么在keil下载对应的固件包
- PHP浮点数运算的问题解决
- 低代码开发平台+巡检管理系统解决方案
- 【STM32F429开发板用户手册】第40章 STM32F429的LCD控制器LTDC基础知识和HAL库API
- 计量经济学-多元回归-2022.11