一.初识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>
<meta charset="utf-8" />
<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 id="box">
<div id="box1"></div>
<div id="box2" ></div>
<div id="box3"</div>
<div id="box4"></div>
<div id="box5"</div>
<div id="box6"</div>
<div id="box7"></div>
</div>
</body>
</html>
网友评论