码迷,mamicode.com
首页 > 其他好文 > 详细

span简单理解

时间:2021-06-16 17:44:25      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:port   图片   列表   load   mic   不同的   music   png   com   

span简单的学习

span和div可以说是异曲同工,但是他们还有区别。

span和div的默认样式都是看不出任何变换的。

如果一想在一行文字实现两种不同的效果就要用到span

这样他们不会换行,因为每新增一个div都会换一次行。

例子

技术图片

变成在一个无需列表里面增加两种样式

歌曲名字事斜体,演唱者是粗体

html

<ul>
      <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
      <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
      <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
      <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
      <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
    </ul>

css

.cd{
	font-style: italic;
}
.artist{
	font-weight: bold;
}

span简单理解

标签:port   图片   列表   load   mic   不同的   music   png   com   

原文地址:https://www.cnblogs.com/tallish/p/14887138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!