列表
无序列表
用 ul, 每一个小内容用 li
<ul>
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ul>
效果如下:
那么前面的实心圆点可以改变吗?
可以!
在 type 中,“disc” 表示实心圆点,“circle” 表示空心圆,“square” 表示实心方块
<ul type = "disc">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ul>
<ul type = "circle">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ul>
<ul type = "square">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ul>
效果如下:
有序列表
用 ol, 每一个小内容用 li
<ol>
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ol>
效果如下:
那么前面的数字可以改变吗?
可以!
在 type 中,“1” 表示数字排序,“i”, “I” 表示罗马字母排序, “a”, “A” 表示字母排序
<ol type = "1">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ol>
<ol type = "i">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ol>
<ol type = "I">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ol>
<ol type = "a">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ol>
<ol type = "A">
<li>一个内容</li>
<li>另一个内容</li>
<li>另另个内容</li>
</ol>
效果如下:
图片
图片导入
-
如果电脑中有图片,就在 src 里写文件所在的路径位置,这种路径叫做绝对路径;
-
如果图片在项目中,同级别可以直接使用,这叫相对路径;
- / 表示取下级目录
- ./ 表示同级目录
- …/ 表示返回上级目录
- …/…/ 表示返回上上级目录
-
针对 img 标签
- width 可调节宽度,同时高度也会同比例改变;若想同时定义宽度和高度,会使图片变形
- title 里设置鼠标放在图片上时显示的文字
- alt 里设置图片加载失败时显示的文字
<img src="./images/wenjianjia.jpg" width="60px" title="鼠标放在图片上" alt="图片加载失败">
图片超链接
那么怎么点击图片进入链接呢?
还记得上篇文章中的超链接应用吗?同理,将图片替换文字的位置就可以啦!还可以在图片后面加上文字,他们都在点击的范围内。
上篇文章链接:
https://blog.csdn.net/Web_blingbling/article/details/107415408
<a href="http://www.baidu.com">
<img src="./images/wenjianjia.jpg" width="60px">百度
</a>
效果如下:(这里的文件夹是个图片哦)