div标签、html/css基本样式、canvas画布

来源：互联网发布：java向导被中断编辑：程序博客网时间：2024/06/05 01:59

Html/css

Div也叫盒子，盒子一般用于页面的布局。

给这个盒子加上样式就是css

加样式有两种方式：

1、写在这个标签的内部。就直接将样式赋给了这个标签。

2、写在标签的外部：放在head中间。

为什么要放在外面：

1、格式更加清晰，分离比较清晰。

2、写在外面，可以减少代码，因为有的元素他们的样式是相同的，没必要同样的样式写多次

3、容易封装

写在外面就要区分到底是给那个元素添加样式，所以就有了选择器。

元素选择器：会将所有的元素加上样式。写法就是写上元素的名称（属性）

Id选择器：id相当于我们的身份证号有唯一性，不能重复，重复就会报错，只给某个元素加上特有的属性。

这个时候可能会有冲突，冲突处理的原则，内部属性>id>元素的。写法#+id的名字（属性）

类选择器：class有时我们需要给一组元素加上同样的样式，类名是可以重复的。

Img图片

两个常用的属性，第一个src图片路径

绝对路径：

相对路径：

第二个alt可以为空，他是当图片加载不到时的文字提示信息

<imgsrc="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);

阅读全文

0 0