审查元素时，和设定的大小不一样啊（老师的就一样）为什么呀
柠檬香草
2015-05-13 13:52
为什么我也是按照老师的代码做的，但是审查元素的时候，大小和自己设定大小不一样，图为其中一个，其他的也大小不一样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding: 0;margin:0;}/*所有元素padding和margin都设为0*/
body{
background-color:#fff;
color:#555;
font-family:'Avenir Next','Lantinghei SC';/*中文为兰亭雅黑*/
font-size:14px;
-webkit-font-smoothing:antialisase;/*字体平滑*/
}
.wrap{
width:100%;
height:600px;
position:absolute; /*设置居中*/
top:50%; /*设置居中*/
margin-top:-300px;/*设置居中*/
background-color:#333;
overflow:hidden;/*超出div.wrap的照片就不显示了*/
/*海报样式*/\
}
.photo{
width:260px;
height:320px;
position:absolute;
z-index:1;
box-shadow:0 0 1px rgba(0,0,0,.01);/*因为是随机定位的，要用到left和top*/
}
.photo.side{
width:100%;/*正面和反面*/
height:100%;
background-color:#eee;
position:absolute;/*为了漂浮起来*/
top:0;
right:0;
box-sizing:border-box;/*内容和padding都不会超过边框*/
}
.photo.side-front{display:none;}/*正面*/
.photo.side-front.image{
width:100%;
height:250px;
line-height:250px;/*当里面的图片标签不足250px会垂直居中*/
overflow:hidden;/*超过部分会隐藏*/
}
.photo.side-front.image img{
width:100%;
}
.photo.side-front.caption{
text-align:center;
font-size:16px;
line-height:50px;}
.photo.side-back{}
.photo.side-back.desc{
color:#666;
font-size:14px;
line-height:1.5em;
}
.photo_center{
left:50%;
top:50%;/*设置水平居中*/
margin:-160px 0 0 -130px;
z-index:999;/*保证不会被遮挡*/
}
</style>
</head>
<body onselectstart="return false;">
<div class="wrap">
<div class="photo">
<div class="side side-front">
<p class="image"><img src="test.jpg"/> </p>
<p class="caption"> 麦兜</p>
</div>
<div class ="side side-back">
<p class="desc">描述信息</p>
</div>
<div class="photo_center"></div>
</div>
</div>
</body>
</html>
3回答
-
- qq_挽手摘太阳_03401579
- 2016-05-23 11:14:06
你用的什么浏览器？可以换个浏览器试试看
-
- 恭喜发系
- 2015-09-05 12:09:44
你们这个是什么编写软件啊？
-
- wonderq_ubuntu
- 2015-05-14 22:29:21
我的也是啊，，求解为什么呐？？
CSS3+JS 实现超炫的散列画廊特效
46090 学习 · 215 问题
相似问题