<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{height:100px;
width:100px;
background-color: #f00;
text-align:center;
/*
* inline叫内联，
*即将块标签转换成行内标签。
*/
display:inline;
}
/**
* 背景标签：
*（这里我们要注意的是，
* 不换行的标签叫行内标签。
* 换行的叫块标签。）
*/
span{background-color: #0ff;
width:100px;
height:100px;
/*span不是块标签，
* 我们可以用下面的方式，
* 将其转换成块标签
*/
display:block;}
/**
* 行内块标签：
* 可以改变块与块之间的间距，
* 或在期间做一些装饰，
* 但是并不换行。
*/
a{background-color: #0f0;
color:black;
/*
* 加none 就没有下划线了。
*/
text-decoration:none;
width:100px;
height:100px;
/*
* 对齐
*/
text-align:center;
/*inline-block是行内块，这里不换行。*/
display:inline-block;
}
</style>
</head>
<body>
/**
*然后我们再按下Tab键即可
*/
<div>醒啦</div>
<div>醒啦</div>
<div>醒啦</div>
<div>醒啦</div>
<span>dkdfst</span><br/>
<span>dkdfst</span><br/>
<span>dkdfst</span><br/>
<span>dkdfst</span><br/>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="#">行内块</a>
<a href="#">行内块</a>
<a href="#">行内块</a>
<a href="#">行内块</a>
</body>
</html>
扫一扫
4800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
