列表+图片引入

CSS补充+列表+图片引入

    • 一.列表+图片引入
    • 一)内部样式
      • 初识class选择器(类选择器)
    • 二)外部样式
    • 三)无序列表
      • 1)是一个项目的列表,此列项目使用粗体圆点进行标记
    • 四)有序列表
      • 2)有序列表也是一列项目,列表项目使用数字进行标记
    • 五)定义列表
      • 3)定义列表不仅仅是一列项目,而是项目及其注释的组合
    • 三.图片的引入

一.列表+图片引入

一)内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表.使用 标签在文档头部定义内部样式表

初识class选择器(类选择器)

给标签一个类名:<div class='box'></div>

列表+图片引入_第1张图片

二)外部样式

> 当样式需要应用很多页面时,外部样式表是最理想的选择.就是建立一个css文件夹,写我们页面的样式.
> 每个页面使用<link>标签链接到样式表,<link>标签在<head></head>里面

列表+图片引入_第2张图片

三)无序列表

1)是一个项目的列表,此列项目使用粗体圆点进行标记

无序列表始于<ul>标签,每个列表项始于<li>
无序列表<ul>下一级只能是<li>,<li>里面可以放任何标签

列表+图片引入_第3张图片

四)有序列表

2)有序列表也是一列项目,列表项目使用数字进行标记

1. 有序列表始于<ol>标签,每个列表项始于<li>
2. 有序列表<ol>下一级只能是<li>,<li>里面可以放任和标签
3. list-style-type:decimal/lower-roman/loweralpha/upper-roman/upper-alpha;

列表+图片引入_第4张图片

五)定义列表

3)定义列表不仅仅是一列项目,而是项目及其注释的组合

1. 自定义列表始于<dl>标签.每个自定义列表项以<dt>开始.每个
自定义列表项的定义以<dd>开始
2. 自定义列表<dl>下一级只能是<dd><dl>,定义列表项里面可
以放任何标签

列表+图片引入_第5张图片

三.图片的引入

图片的引入路径 图片格式:jpg(常见格式) png(透明图片) gif(动态图)

  1. 相对路径
  2. 相对于当前文档位置出发(推荐使用)
  3. ./ 当前目录
  4. …/ 上一级目录
  5. 每上一级加一个 …/
  6. 绝对路径
  7. 本地绝对路径(从盘出发)
  8. 网络绝对路径(从域名出发) 注意 : 路径不能使用中文命名 图片要素
  9. src / alt / title / width

在这里插入图片描述

你可能感兴趣的:(前端学习)