div和span标签
程序员文章站
2022-04-19 21:26:00
...
div和span标签
用于网页的基本布局
div作用
配合css基本布局网页
span作用
配合css修改局部样式
div,span区别
div独占一行
span不会占一行
- div是容器级别的
- 容器级别的可以嵌套其他任何的标签
- div h ul ol dl li…
- span是文本级的标签
- 文本级别的只能嵌套文字、超链接、图片
- span/p/buis/strong/em/ins/del…
使用演示
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>div and span</title>
</head>
<body>
<div class="header">
<div class="logo"><span class="span1">logo</span></div>
<div class="guide"><span class="span1">guide</span></div>
</div>
<div class="content">
<div class="content1"><span class="span2">content1</span></div>
<div class="content2"><span class="span2">content2</span></div>
</div>
<div class="tail">
<div class="copyright"><span class="span3">© copyright Design by Samu</span></div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.header {
width:1000px;
height:100px;
background-color:red;
margin:0 260px;
}
.logo {
width:100px;
height:60px;
margin:20px;
background-color:yellow;
float:left;
line-height:60px;
text-align:center;
}
.guide {
width:600px;
height:60px;
margin:20px;
background-color:orange;
float:right;
line-height:60px;
text-align:center;
}
.span1 {
color:pink;
font-size:30px;
}
.content {
width:1000px;
height:400px;
margin:0 260px;
background-color:green;
}
.content1 {
width:300px;
height:300px;
margin:50px 20px;
background-color:pink;
line-height:300px;
text-align:center;
float:left;
}
.content2 {
width:640px;
height:300px;
margin-right:20px;
margin-top:50px;
background-color:black;
line-height:300px;
text-align:center;
float:left;
}
.span2 {
color:white;
font-size:40px;
font-weight:bold;
}
.tail {
width:1000px;
height:100px;
margin:0 260px;
background-color:blue;
}
.copyright {
width:960px;
height:60px;
margin:20px;
background-color:white;
text-align:center;
line-height:60px;
float:left;
}
.span3 {
color:black;
font-size:20px;
}
通过div配合css实现网页的基本布局
通过span配合css实现局部信息的修改
达成效果：
上一篇： php类自动装载和php链式操作的原理
下一篇： JS中常见的Bom对象