<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span:first-of-type{
display: none;
}
p:first-of-type, p:nth-of-type(2){
display: inline;
height: 30px;
}
p:nth-of-type(3){
height: 30px;
width: 50%;
}
span:nth-of-type(2){
display: block;
height: 30px;
width: 50%;
margin: 16px 0;
}
span:nth-of-type(3){
display: block;
height: 30px;
width: 50%;
margin: 16px 0;
}
span:nth-of-type(4){
display: inline-block;
height: 30px;
width: 40%;
margin: 16px 0;
}
span:nth-of-type(5){
display: inline-block;
height: 30px;
width: 40%;
margin: 16px 0;
}
</style>
</head>
<body>
<!--
标签： 网页的估计 通过标签嵌套搭建网页结构
标签样式都可以可以替换的
display:
none：不显示
inline:行内元素 不能给与宽高
block：块元素 可以给与宽高
inline-block:行内块
-->
<span>span</span>
<p>p</p>
<p>p</p>
<p>p</p>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
</html>
本文档展示了HTML和CSS如何嵌套构建网页结构，介绍了不同标签如`<span>`和`<p>`的使用，以及`display`属性在控制元素显示方式中的作用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
