标签：1.0 asc osi head order main 绝对定位 src type
使一个元素在另一个元素内绝对居中，可以通过绝对定位和margin:auto;的方式
.center_xy{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
如何使元素内容滚动：
overflow:auto;
锚点：
<a>标签的锚点可以和id绑定，<a href="#id">跳转到锚点所在的元素，#代表当前页面
防止class名起冲突：
在命名时加上外部的class名
设置最小宽度，以便容器内容为空时可显示默认宽度，内容较多时自动扩展
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../demo1/demo1.css" /> </head> <body> <div class="mainbox center_xy"> <div class="title">图片展示</div> <hr> </div> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="../js/imgdata.js" ></script> <script type="text/javascript" src="../js/demo1.js" ></script> </body> </html>
.center_xy{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.mainbox{
width: 600px;
height: 400px;
border: 2px solid #888;
background: #fff;
overflow: hidden;
}
.title{
height: 35px;
color: #888;
font-size: 24px;
line-height: 35px;
text-align: center;
}
hr{
border: 1px dashed #888;
}
#bigimgbox{
width: 390px;
height: 340px;
margin-left: 5px;
border: 1px solid #888;
background: #ccc;
float: left;
overflow: hidden;
}
#bigimgbox img{
width: 97%;
height: 97%;
margin: 5px;
border: 1px solid #aaa;
overflow: hidden;
}
.minimgbox{
width: 190px;
height: 340px;
margin-left: 5px;
border: 1px solid #888;
background: #ccc;
float: left;
overflow: auto;
}
.minimgbox img{
width: 97%;
height: 30%;
margin-left: 2px;
margin-top: 3px;
border: 1px solid #aaa;
}
$(function(){ var $mainbox = $(".mainbox"); var $bigimgbox = $("<div id = ‘bigimgbox‘></div>"); var $minimgbox = $("<div class = ‘minimgbox‘></div>"); $mainbox.append($bigimgbox); $mainbox.append($minimgbox); $.each(imgdata, function(i,o) { var $bigimg = $("<img src=‘"+o.img+"‘ id=‘"+o.name+"‘>"); $bigimgbox.append($bigimg); var $minimg = $("<a href=‘#"+o.name+"‘><img src=‘"+ o.img +"‘></a>"); $minimgbox.append($minimg); }); })
标签：1.0 asc osi head order main 绝对定位 src type
原文地址：http://www.cnblogs.com/roxy/p/7392467.html
