【前端】CSS盒子模型和JavaScript

最新推荐文章于 2020-12-29 00:15:27 发布

小张在努力

最新推荐文章于 2020-12-29 00:15:27 发布

阅读量150

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43464809/article/details/97957333

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS盒子模型和JS

盒子模型：任意的标签看成一个盒子

CSS 定位：CSS属性：position

CSS盒子模型和JS

盒子模型：任意的标签看成一个盒子

盒子模型属性：

border 边框---->盒子的厚度
padding 盒子的内边距（边框和内容之间的距离）
Margin:盒子的外边距（盒子和盒子之间的距离）

CSS 定位：CSS属性：position

三种定位：position

绝对定位（absolute）
相对定位（relative）
固定定位（fixed）

js:Javascript

基础语法：

如何定义变量：var 定义变量/var 定义对象

CSS盒子模型：

盒子模型的属性：

登录密码界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型的使用</title>
		<style>
			/*修饰外层div*/
			#main{
				width:450px;
				height:300px;
				border: 2px solid #000;
			}
			/*设置外边距*/
			margin: 200px 0 0 420px;
			
			/*CSS背景设置*/
			background-image:url(img/1.jpg);
			background-repeat: no-repeat;
			background-position: top center;
			
			/*用户名所在div*/
			#name_div{
				/*设置外边距*/
				margin: 60px 0 0 100px;
			}
			/*密码框*/
			#pwd_div{
				margin: 20px 0 0 100px;
			}
			/*按钮的div*/
			#btn_div{
				margin: 20px 0 0 150px;
			}
			/*设置立即注册的位置*/
			#reg_btn{
				margin-left: 30px;
			}
			/*设置用户名所在的背景*/
			#input_name{
				background-image: url(img/head.png);
				background-repeat: no-repeat;
				/*控制内容和边框之间的距离*/
				padding-left: 29px;
			}
			/*设置密码所在的背景*/
			#input_pwd{
				bacground-image: url(img/head.png);
				background-repeat: no-repeat;
				padding-left: 29px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<form>
				<div id="name_div">
				用户名：<input type="text" id="input_name" />
				</div>
				<div id="pwd_div">
					密&nbsp;&nbsp;&nbsp;码：<input type="password" id="input pwd" />
				</div>
				<div id="btn_div">
					<input type="submit" value="登录"> <input type="button" id="reg_btn" value="立即注册">
				</div>
			</form>
		</div>
	</body>
</html>

CSS定位：

absolute:绝对定位是子元素针对父元素父的位置进行移动

relative:相对定位，是针对元素原来的位置进行移动

定位属性：

position:relative;
top: 20px
left: 20px;

JS：

事件编程三要素：

1.事件源

2.事件监听器

3.注册事件监听器

<script>
			function testFocus(){
				/*获取input标签对象，改变他的value属性*/
				document.getElementById("usename");
				//设置value属性
				input.value="";
			}
			function testBlur(){
				//获取用户输入的内容
				var usename = document.getElementById("username")
				//获取span标签对象
				var span = document.getElementById("span_tip");
				if(username!="eric"){
					span.innerHTML="当前用户名格式正确"
				}else{
					span.innerHTML="当前用户名重复"
				}
			}
		</script>

<body>
		用户名：<input type="text" value="请输入用户名"
			onfocus="testFocus()" onblur="testBlur()" /><span id="span_tip">
	</body>

js简介：

作用：

1.进行表单验证

2.前后端局部交互的时候用到js

3.提供一些特别效果（举例：网页时钟，省市联动，定时弹出广告和隐藏广告，表格隔行换色等..）

必须要符合前端定义的规则

1.前端校验通过

2.将数据提交后退，在服务器中查询

缓存技术redis:noSQL非关系型数据库

String型
LinkedList
set
map

js的引用方式：js是一种弱类型语言

js的两种引用方式：

内部方式
外部方式

引入外部的js文件，使用script有标签体的标签（有开始有结束的）

消息对话框：

window属于顶级对象，频繁调用，所以一般情况省略不写.
（window.）alert("消息对话框")；

在浏览器中打印内容
document.write("hello,javascript,i'm coming...")

小张在努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】CSS盒子模型和JavaScript

目录CSS盒子模型和JS盒子模型：任意的标签看成一个盒子CSS 定位：CSS属性：positionjs:JavascriptCSS盒子模型：CSS定位：JS：js简介：CSS盒子模型和JS盒子模型：任意的标签看成一个盒子盒子模型属性：border 边框---->盒子的厚度 padding 盒子的内边距（边框和内容之间的距离） Mar...
复制链接

扫一扫