网页设计基础第十七讲：Div与Span的妙用——打造精美网页布局

TechLearn
2,245 阅读7分钟

在网页开发中，div和span是最基础也是最常用的HTML标签。它们在布局和样式的应用中占据着重要的位置。通过本次实践，我们将理解这两个标签的区别以及它们在实际项目中的应用场景，从而提升我们的网页布局能力。

知识回顾

<div>详解

一、定义

<div>是一个块级元素，主要用于对其他HTML元素进行分组。它不具有任何语义意义，主要是为了方便布局、样式和JavaScript的操作。

二、特性
  1. 块级元素：<div>标签是块级元素，这意味着它会占据整行空间，任何下一个元素都会在其下方显示。
  2. 无语义：虽然<div>可以用来进行布局，但它不表示任何特定的内容，具有完全的中立性。为了改进网页的可访问性，建议在合适的情况下使用更多的语义标签，如<header>、<section>、<article>等。
  3. 可嵌套：可以在<div>元素内部嵌套其他的<div>或任何其他元素，这使得布局非常灵活。
  4. 可配合CSS使用：通过class或id属性，可以对<div>元素进行样式化，使得网页设计更具层次感和美观性。
  5. 可以被JavaScript操作：可以通过Javascript对<div>元素进行操作，如显示、隐藏、修改内容、改变样式等。
三、用法

  1. 布局：在网页中使用<div>标签创建不同的区域。

    <div class="header">网站头部</div>
<div class="content">网站内容</div>
<div class="footer">网站底部</div>

  2. 样式化：通过CSS为不同的<div>添加不同的样式。

    .header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}
.content {
    padding: 20px;
}
.footer {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
}

  3. 响应式设计：结合CSS Flexbox或Grid布局，与div元素一起使用，可以实现响应式网页设计，有效适应不同屏幕尺寸。

  4. div的style属性说明

div的style属性总结

属性描述示例
background-color设置背景颜色background-color: #f4f4f4;
width设置元素的宽度width: 300px;
height设置元素的高度height: 150px;
border设置边框border: 1px solid #000;
border-radius设置圆角边框border-radius: 10px;
margin设置外边距margin: 20px;
padding设置内边距padding: 15px;
display设置元素显示方式（如块级、行内等）display: flex;
flex设置弹性布局属性flex: 1;
align-items设置弹性容器内子项的对齐方式align-items: center;
justify-content设置弹性容器内项目的对齐方式justify-content: space-between;
color设置文本颜色color: #333;
font-size设置字体大小font-size: 16px;
text-align设置文本对齐方式text-align: center;
overflow设置溢出内容的处理方式overflow: hidden;
box-shadow设置阴影效果box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
opacity设置透明度（0到1之间的值）opacity: 0.8;
cursor设置鼠标悬停时的指针样式cursor: pointer;
position设置定位方式（如absolute、relative、fixed等）position: relative;
top设置相对定位的偏移量top: 10px;
left设置相对定位的偏移量left: 20px;
z-index设置堆叠顺序z-index: 100;

使用示例

<div style="background-color: #f4f4f4; width: 300px; height: 150px; border: 1px solid #333; border-radius: 10px; margin: 20px; padding: 15px; text-align: center;">
    这里是一个用style属性定义的div。
</div>

<span>详解

<span>是HTML中一个行内元素，通常用于对文档中的小块文本或其他元素进行分组。以下是对span标签的详细介绍，包括其定义、用法、特性及实践案例。

一、定义

<span>标签是一个行内元素，主要用于对文本或文档中的某一部分进行标记，以便在CSS样式或JavaScript操作中使用。它与<div>标签不同，<span>不在新行中开始，因此它不会打断元素的流。

二、特性
  1. 行内元素：<span>是行内元素，在容器内不会创建换行。它的宽度和高度由其内容决定。
  2. 无语义：<span>标签不具有任何特定的语义，主要用作方便的标记工具。为了提高网页的可访问性，建议在适当的情况下使用具有语义的标签。
  3. 可嵌套：可以在<span>内嵌套其他的<span>或行内元素，如<a>、<strong>等。
  4. 可配合CSS使用：可以通过class或id属性为特定的<span>元素添加样式，使其与周围文本区分开来。
  5. 可以被JavaScript操作：可以通过JavaScript对<span>标签进行操作，例如修改内容、样式等。
三、用法

  1. 样式化文本：使用<span>标签对文本进行样式处理，例如改变颜色、字体等。

    <p>这是一个<span style="color: red;">重要的</span>提示。</p>

  2. 文本高亮：在文本中使用<span>来高亮显示某些关键字。

    <p>HTML是<span style="background-color: yellow;">标记语言</span>。</p>

  3. 结合JavaScript：使用<span>标签巧妙控制网页内容的交互行为。

div和span区别

div与span的区别

特征<div><span>
元素类型块级元素行内元素
布局行为从新的一行开始，独占一行不会打断行，允许与其他元素在同一行中展示
语义性无语义，仅用于结构化和布局无语义，主要用于对文本进行样式化
常用场景用于分组和布局（如容器、卡片等）用于样式化文本的一部分（如高亮、链接等）
可缩放性可以设置宽度和高度不可以直接设置宽度和高度，宽高由内容决定
应用CSS样式通常适用于属性如flex、grid等适用于文本相关的样式（如字体、颜色等）

示例

使用<div>：

<div style="background-color: lightgray; margin: 10px; padding: 20px;">
    这是一个使用<div>的示例
</div>

任务描述

设计一个基于div和span标签的简洁美观的个人简介卡片，旨在展示开发者的基本信息及其社交链接。

image.png

任务实施

页面结构设计

  1. 外部容器：

    • 使用<div class="card">作为整个卡片的容器。
    • 应具有背景色、边框和阴影效果。

  2. 头像区域：

    • 使用<div class="avatar">包裹头像图像。
    • 形状：圆形，使用CSS设置border-radius: 50%。
    • 尺寸：固定宽高，例如100x100像素。

  3. 信息区域：

    • 使用<div class="info">作为信息区域的容器。

    • 包含以下子元素：

      • 名称：使用<h1 class="name">张三</h1>，加粗并增大字体。
      • 简介：使用<span class="description">热爱编程与旅游的Web开发者。</span>，采用常规字体样式。
      • 社交链接：使用<span class="social">包裹社交链接，使用多个<a>标签来实现链接。

颜色和字体

  • 背景颜色：使用白色作为卡片背景，页面背景为浅灰色。
  • 文字颜色：主要文字为黑色，社交链接为蓝色。
  • 字体：使用常规网页安全字体，如Arial或Helvetica。

布局

  • 显示方式：使用CSS Flexbox布局以确保在不同屏幕下的对齐和间距。
  • 内边距：为.card类设置适当的内边距（例如，20像素）。
  • 外边距：卡片周围保留足够的外边距（例如，20像素）以避免拥挤。

交互设计

  • 社交链接：

    • 超链接文本在鼠标悬停时显示下划线或颜色变化，提示可点击。
    • 点击后在新标签页打开链接。

响应式设计

  • 确保在手机、平板及桌面设备上的良好显示效果。
  • 头像和文本需根据屏幕大小适当缩放和重新排列。
<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介卡片</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .card {
            display: flex;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 20px 0;
        }
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }
        .avatar img {
            width: 100%;
            height: auto;
        }
        .info {
            display: flex;
            flex-direction: column;
        }
        .name {
            margin: 0;
            font-size: 24px;
        }
        .description {
            color: #555;
        }
        .social {
            margin-top: 10px;
        }
        .social a {
            color: #007bff;
            text-decoration: none;
            margin-right: 10px;
        }
        .social a:hover {
            text-decoration: underline;
        }
    </style>


    <div class="card">
        <div class="avatar">
            <img src="转存失败，建议直接上传图片文件 img/defaulthead.png" alt="头像转存失败，建议直接上传图片文件">
        </div>
        <div class="info">
            <h1 class="name">张三</h1>
            <span class="description">热爱编程与旅游的Web开发者。</span>
            <span class="social">
                <a href="#" target="_blank">GitHub</a>
                <a href="#" target="_blank">Gitee</a>
            </span>
        </div>
    </div>

实验实训

实验一：会议议程卡片

image.png

实验二：旅游目的地介绍卡片

image.png

实验三：牌匾设计

设计要求：

  • 1.页面内容为一个图层中嵌入一个段落，段落的内容为"海内百川, 有容乃大"；
  • 2.段落的样式为"斜体、特粗、70px大小、行高1.5倍、隶书"；
  • 3.图层div的#div0的样式为"宽度800px、高度100px、边框宽度20px、线形outset、颜色#090909、填充20px、有边距（上下20px、左右自动）；
  • 4.图层div的#div1的样式为"宽度800px、高度80px、颜色rgb(216, 211, 211)）；

image.png

avatar
文章
阅读
粉丝