最近学习前端js知识,但是对css不甚了解,看到一个案例“美女画廊”,对其中css语法有些疑问,百度之后发现,有个别人也有类似的困惑,但是解决的人说的不清不楚,于是我还是自己根据理解大胆测试了一下,终有所获。其实也是非常基础的东西,话不多说,摆上美女吧,呵呵,案例!
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 2em 10%;
}
h2 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<ul id="imagegallery">
<li><a href="../../images/1.jpg" title="美女A">
<img src="../../images/1-small.jpg" width="100" alt="美女1"/>
</a></li>
<li><a href="../../images/2.jpg" title="美女B">
<img src="../../images/2-small.jpg" width="100" alt="美女2"/>
</a></li>
<li><a href="../../images/3.jpg" title="美女C">
<img src="../../images/3-small.jpg" width="100" alt="美女3"/>
</a></li>
<li><a href="../../images/4.jpg" title="美女D">
<img src="../../images/4-small.jpg" width="100" alt="美女4"/>
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="../../images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>
var aObjs = my$("imagegallery").getElementsByTagName("a");
for(var i=0; i<aObjs.length;i++){
aObjs[i].onclick=function(){
my$("image").src=this.href;
my$("des").innerText=this.title;
return false;
}
}
</script>
</body>
这个案例实现的功能很简单,就是点击小图片的美女就在底下显示大图片的美女。唯一让我疑惑的就是<style>标签中margin:2em 10%;当我去改变数值的时候,上下边距是会变化的,这符合css对于margin的定义,但是我想知道的是这种变化是相对于哪个盒子?其实很简单,只要我们设置一下html的样式就一目了然了(很多人说是相对于浏览器,至少我不认同,也不知道这个浏览器和html是不是一样的呢)。
html{
background: hotpink;
}
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 2em 10%;
}
好的,这里就截取小部分css,其他的都没变化。
看到设置后的效果相信大家就明白了,你再怎么设置margin的左右值(上面同理),左右的pink颜色区域都是x%(相对于html元素),