html练习（4）

最新推荐文章于 2023-04-20 09:28:31 发布

无悔_一叶扁舟

最新推荐文章于 2023-04-20 09:28:31 发布

阅读量531

点赞数

分类专栏： html 文章标签： html 选择器嵌套盒子

本文链接：https://blog.csdn.net/u011662320/article/details/37726849

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这个练习中用到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;
}