第一天：html、css的初步学习和制作七巧板

来源：互联网发布：一键转发微信源码编程编辑：程序博客网时间：2024/06/05 05:55

一.初识html

command + / 注释 command + s 保存 command + shift + P 插件安装入口

文档声明

1.创建HTML标签；

2.创建文档的头部和身体；

标签规范

1. 标签分为单标签与双标签；

2. 标签必须闭合；

3. 标签可以嵌套嵌套标签必须缩进(tab键)；

4. 标签有属性(自有属性，和自定义属性)；

5. 标签不区分大小写告诉；

浏览器使用最新的html版本解析:<!DOCTYPE html>；

二.初识css

1. 行间样式书写在开始标签出书写style=""；

2.css语法：样式名称:样式值;

3.width 宽度设置：单位是px(像素) 或者百分比

4.border 边界方向设置：border-top, border-left, border-right, border-bottom

5.border 宽度设置: border-width , border--top-width

6.border 颜色设置: border-color , border--top-color

7.border 边框类型：border-style : solid(实体线) dotted(点状线) dashed（虚线）；border-top-style；

8.border 复合写法: border: border-width border-color border-style;

三.七巧板制作

思路：建立七个div的盒子，使用绝对定位的方法使它们组合成一个七巧板：

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>七巧板/title>

<style>

#box{ position: relative; }

#box1{

width: 0px;

height: 0px;

border-top: 200px solid rgb(197,233,152);

border-left: 200px solid transparent;

border-right: 200px solid transparent;

border-bottom: 200px solid transparent;

}

#box2{

width: 0px;

height: 0px;

border-top: 200px solid transparent;

border-left: 200px solid rgb(86,184,200);

border-right: 200px solid transparent;

border-bottom: 200px solid transparent;

position: absolute;

top: 5px;

}

#box3{ width: 0px;

height: 0px;

border-top: 100px solid transparent;

border-left: 100px solid transparent;

border-right: 100px solid rgb(245,148,199);

border-bottom: 100px solid transparent;

position: absolute;

top: 4px;

left: 200px;

}

#box4{ width: 138px;

height: 138px;

background: rgb(166,149,192);

position: absolute;

top: 135px;

left: 229px;

transform: rotate(45deg);

}

#box5{

width: 0px;

height: 0px;

border-top: 100px solid transparent;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 100px solid rgb(246,243,72);

position: absolute;

top: 109px;

left: 101px;

}

#box6{ width: 0px;

height: 0px;

border-top: 195px solid transparent;

border-left: 195px solid transparent;

border-right: 195px solid transparent;

border-bottom: 188px solid rgb(246,61,99);

position: absolute;

top: 20px;

left: 6px;

z-index: -1;

}

#box7{

width: 0px;

height: 0px;

border-top: 140px solid transparent;

border-left: 140px solid transparent;

border-right: 140px solid transparent;

border-bottom: 145px solid rgb(248,205,70);

position: absolute;

top: 261px;

left: 264px;

transform: rotate(134deg);

}

</style>

</head>

<body>

</div>

</body>

</html>

阅读全文

1 0