【前端】CSS盒子模型和JS
程序员文章站
2024-01-28 16:49:40
...
目录
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">
密 码：<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="请输入用户名"
οnfοcus="testFocus()" οnblur="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...")