2019.7.11相框的制作
Posted awei313558147
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2019.7.11相框的制作相关的知识，希望对你有一定的参考价值。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*
margin: 0;
padding: 0;
.photo
width: 700px;
height: 400px;
margin: 20px auto;
background-color: #f79090;
.maxPic
width: 500px;
height: 300px;
border: 10px dotted #fff;
background-color: #7eccf9;
margin: 0 20px;
overflow:hidden;
float: left;
.maxPic img
width: 500px;
height: 300px;
.minPic
width: 90px;
height: 300px;
border: 10px solid #fff;
overflow-y: auto;
float: left;
.minPic img
width: 80px;
height: 60px;
.maxPic,.minPic
/*float: left;*/
</style>
</head>
<body>
<div class="photo">
<h1>电子相册</h1>
<div class="maxPic">
<img src="img/pic01.jpg" id="img01" />
<img src="img/pic02.jpg" id="img02"/>
<img src="img/pic03.jpg" id="img03"/>
<img src="img/pic04.jpg" id="img04"/>
<img src="img/pic05.jpg" id="img05"/>
<img src="img/pic06.jpg" id="img06"/>
<img src="img/pic07.jpg" id="img07"/>
</div>
<div class="minPic">
<a href="#img01"><img src="img/pic01.jpg" /></a>
<a href="#img02"><img src="img/pic02.jpg" /></a>
<a href="#img03"><img src="img/pic03.jpg" /></a>
<a href="#img04"><img src="img/pic04.jpg" /></a>
<a href="#img05"><img src="img/pic05.jpg" /></a>
<a href="#img06"><img src="img/pic06.jpg" /></a>
<a href="#img07"><img src="img/pic07.jpg" /></a>
</div>
</div>
</body>
</html>
分析
重要元素：
overflow:hidden 隐藏
overflow-y：auto 纵向排列
<a href=#id值></a>设置锚点，要让所链接的id为id值
float 浮动，脱离文档流，一般让块级元素变为行内元素 使用后记得用clear清除
定位
相对定位
元素不会脱离文档流 元素原有的位置会保留
以自身的位置为目标做较小的偏移
适用场合：实现元素微调的时候
/*position: relative;
top: 50px;
left: 50px;*/
绝对定位
元素脱离文档流 不占据页面的空间
元素相对于它最近的已定位的祖先元素实现位置的初始化；
如果没有已经定位的祖先元素，那么元素会相对于body或者是html最大的祖先元素实现位置的初始化
已定位：position的属性值设置为：relative absolute fixed
绝对定位的一些影响
绝对定位的元素变成块级元素
绝对定位的元素可以使用margin，但是auto会失效
固定定位
作用；将元素固定在页面可视区的某个位置处，不会随着滚动条变化而移动
固定定位的元素会脱离文档流
固定定位的元素会变成块级元素
固定定位永远是相对于body实现定位
元素覆盖
z-index：值 值越大，越在上，设置负数则在最下面
以上是关于2019.7.11相框的制作的主要内容，如果未能解决你的问题，请参考以下文章