本节知识视频教程
1.图片标签
<img />标签
用来显示图片的标签。它的Src属性用来设置图片来源,其实也可以直接设置width来设置图片的宽度,设置height来是指图片的高度。值得注意的是,图片的宽度一旦设置以后,图片的高度会自动按图片比例进行缩放。
2.脚本标签
<script>标记
这里开始写js代码,这个代码用来控制网页上面html标签的逻辑,俗称DOM控制。
注释的标记 //单行注释 /* ….. */ 多行注释
2.1逻辑
这里有个图片切换的逻辑控制,就是n变量的变化。
n++ 意义是 n=n+1 用来切换图片名称
2.2 dom控制
document.getElementById(“对应html中标签的ID的值”) 返回一个对应的 标签对象。
innerHTML表示某个容器内部所有的html代码。
3.符号与html中的对应关系
符号对应。
空格对应到url中是20%
4.总结
素材:
源代码:
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页-刘金玉编程</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">刘金玉编程</div>
</div>
<div class="main">
<div id="pics">
<img src="img/a%20(1).jpg" />
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
<script src="js/main.js"></script>
main.css文件
body{
margin:0;
}
.logo{
color:white;
font-weight: bolder;
padding:10px;
font-size: 20px;
background-color: #9ACD32;
}
#pics img{
width: 100%;
}