效果说明
鼠标移动到图片上,图片会中心等比放大
分析:一个盒子放图片,一个盒子放文字,上面那行字用p标签,下面那行字用a标签,两行字位于一个盒子中
遇到问题
-
1.在使用定位时,父元素相对,子元素绝对,并且添加了overflow:hidden;,子元素不显示?
解决办法:子元素的参照物是父元素,因此要加上子元素相对于父元素的位置,如:bottom:0;
-
2.将p标签和a标签放在一个盒子中,使用line—height:盒子高度;时只有p标签居中,a标签不居中?
解决办法:
-
3.如何给一个a标签添加一个给定大小的边框???
解决办法:给a标签加上float:left;
我的效果
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;}
.pic{
width: 276px;
height: 277px;
position: relative;
overflow: hidden;
f