这个练习中用到html中盒子的知识和各种选择器的嵌套:
可以把html中的元素看着一个盒子,对与选择的参照物的不同,这对应的css中样式也不一样。
如果不希望破坏预先设置的盒子外观,则尽量使用margin布局,因为padding可能会改变盒子的大小(相当于这个盒子有弹性),margin如果过大,盒子内容被挤到盒子外边去,但是盒子本身没有变化
实例代码:
test4.html:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>作者:一叶扁舟</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./test4.css">
</head>
<body>
<div id="s1">
<div class="s2">
<img src="image/d.jpg" />
<br>
<a href="#">夜空中最亮的星</a>
</div>
<div class="s2">
<img src="image/b.jpg" />
</div>
<div class="s2">
<img src="image/c.jpg" />
</div>
</div>
<!--第二种方法:利用无序列表 -->
<div id="s4">
<ul class="s3">
<li>
<img src="image/a.jpg" />
<br />
<a href="#">这是一朵花</a>
</li>
<li>
<img src="image/b.jpg" />
</li>
<li>
<img src="image/c.jpg" />
</li>
</ul>
</div>
</body>
</html>
css代码:
test4.css:
/*html类选择器*/
body {
width: 800px;
height: 540px;
border: 4px solid red;
background-color: green;
magin: 0 auto;
}
#s1 {
width: 480px;
height: 320px;
border: 3px dotted blue;
margin-top: 20px;
margin-left: 10px;
}
/*对于类选择器为s2的div元素起作用的css样式*/
/*div.s2 {
display: inline;
}*/
.s2 {
width: 120px;
height: 85px;
border: 3px double yellow;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 2px;
}
.s2 img {
width: 80px;
height: 60px;
margin-left: 15px;
margin-top: 5px;
}
#s4 {
margin: 0;
padding: 0;
}
.s3 {
width: 350px;
height: 180px;
border: 1px dashed pink;
list-style-type: none;
padding-left: 2px;
}
/*控制单个区域*/
.s3 li {
width: 80px;
height: 80px;
border: 2px solid red;
margin-left: 10px;
margin-top: 4px;
float: left;
}
/*控制单个的图片*/
.s3 li img {
margin-top: 4px;
margin-left: 5px;
width: 45px;
height: 45px;
}
效果图片:
说明:原本是想设置上下两个的效果一样,按自己的理解添加了这行代码
/*div.s2 {
display: inline;
}*/