前端第一次培训

培训内容

html

HTML是超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。HTML命令可以说明文字，图形、动画、声音、表格、链接等。

标签 list

有序列表
无序列表
自定义列表

css

CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言

三种使用方法

• 行内CSS：在标签内部使用
• 内部CSS：在中的``标签中编写。
• 外部CSS：在文件外部使用.css文件，然后在html文件中引入。

自学内容

javascript实现点击按钮跳转页面

首先在按钮元素中使用onclick属性绑定点击事件，规定发生点击事件时，执行myFunction()函数；然后在myFunction()函数中，定义“location.href="页面地址"”语句进行跳转。

示例代码如下

function myFunction(){ window.location.href='http://127.0.0.1:5500/dierye.html'; }

css3实现鼠标放上图片放大（hover）

利用transform属性可以对元素进行旋转、缩放、移动或倾斜，css3实现图片放大需要用到transform属性。

示例代码如下

`

<title></title>

    body {background-color:#a2cec7;}
.enlarge{
    width: 320px;
    height: 180px;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}
.button {
background-color: #4c91af;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;

}

<title></title>

    body {background-color:#a2cec7;}
.enlarge{
    width: 320px;
    height: 180px;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}
.button {
background-color: #4c91af;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;

}
`

背景色设置

body background-color设计

示例代码如下

body {background-color:#a2cec7;}

张莫