Html/css
Div也叫盒子,盒子一般用于页面的布局。
给这个盒子加上样式就是css
加样式有两种方式:
1、写在这个标签的内部。就直接将样式赋给了这个标签。
2、写在标签的外部:放在head中间。
为什么要放在外面:
1、格式更加清晰,分离比较清晰。
2、写在外面,可以减少代码,因为有的元素他们的样式是相同的,没必要同样的样式写多次
3、容易封装
写在外面就要区分到底是给那个元素添加样式,所以就有了选择器。
元素选择器:会将所有的元素加上样式。写法就是写上元素的名称(属性)
Id选择器:id相当于我们的身份证号有唯一性,不能重复,重复就会报错,只给某个元素加上特有的属性。
这个时候可能会有冲突,冲突处理的原则,内部属性>id>元素的。写法#+id的名字(属性)
类选择器:class有时我们需要给一组元素加上同样的样式,类名是可以重复的。
Img图片
两个常用的属性,第一个src图片路径
绝对路径:
相对路径:
第二个alt可以为空,他是当图片加载不到时的文字提示信息
<img src="img/img.jpg" alt="对不起,图片加载失败"/>
图片也可以作为某个元素的背景图片,加上样式
background:url("img/img.jpg")no-repeat;
url就是图片的地址 no-repeat就是不重复出现。
Div里面可以写任何内容比如文字
给文字设置水平居中 用text-align属性 center居中还可以设置居右
给文字设置颜色:color属性
给文字设置大小:font-size
给文字设置字体:font-family
给文字设置加粗:font-weight
要给文字单独设置样式,一般将内容写在span里面
span{
color:red;
font-size:40px;
font-weight:700;
border:1px solid black;
border-radius:4px;
margin:0 auto;/*内边距 auto表示左右适应上下为0*/
padding:12px;/*外边距*/
}
img图片只有设置了display:inline-block才能给图片设置宽高
display:inline-block
display:none
弹性布局:让他的孩子都居中(bottom)
Display:flex;
Align-items:center;
Justify-content:center;
Dom
Dom获得元素的两个常用方法:
<body>
<div id="div1">hello</div>
<div name="div"></div>
</body>
<script>
var div1=document.getElementById("div1");
var div1=document.getElementsByName("div1");//返回的是一个数组
div1.innerHTML="world";//改变他的值
div[0].innerHTML="第一个div";
console.log(div1);
Canvas画布
画布就是用js来判断一个图像
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.beginPath();
context.fillStyle="yellow";55
context.fillRect(x,y,width,height);
首先获得html中的画布元素
然后定义一个context对象上下文
画一个矩形
填充颜色
然后调用fillRect(横坐标,纵坐标,宽,高)
画一个圆
context.beginPath();
context.fillStyle="black";
context.arc(100,100,50,0,2*Math.PI);
context.fill();
context.stroke();
清除画布
第一个参数是x,第二个y 第三个檫的宽度 ,第四个檫的高度
context.clearRect(0,0,400,400);