首页 > 其他分享 >CSS 中的图像、媒体和表单元素——WEB开发系列23

CSS 中的图像、媒体和表单元素——WEB开发系列23

时间：2024-09-01 14:52:39浏览次数：15  
标签：WEB 示例 23 元素 表单 图像 border CSS

Web开发中，图像、媒体和表单元素是构建用户界面的重要组成部分。正确地使用 CSS 来处理这些元素可以大幅提高用户体验，增强页面的美观性和功能性。

CSS 中的图像、媒体和表单元素——WEB开发系列23_web

一、什么是替换元素？

图像和视频被描述为“替换元素”。这意味着 CSS 不能影响它们的内部布局——而仅影响它们在页面上相对于其他元素的位置。但是，正如我们将看到的，CSS 可以对图像执行多种操作。

某些替换元素（例如图像和视频）也具有宽高比。这意味着它在水平（x）和垂直（y）方向上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。

在 CSS 中，替换元素是指那些其内容由外部资源提供的元素，例如 <img>、<input> 和 <video>。这些元素的显示取决于其替换内容，而不是其内部内容。也就是说，替换元素的高度和宽度通常是由其外部内容来决定的。

示例 : 替换元素的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>替换元素示例</title>
    <style>
        img {
            border: 2px solid #333;
            display: block; /* 使图像成为块级元素 */
            max-width: 100%; /* 使图像响应式 */
            height: auto; /* 保持图像比例 */
        }
    </style>
</head>
<body>
    <h1>替换元素示例</h1>
    <img src="01.jpg" alt="示例图像">
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_css3_02

图像是一个替换元素，使用 CSS 设置了边框、使其成为块级元素、并确保其宽度适应容器。这些样式使得图像在不同设备上都能良好显示。

二、图像的尺寸控制

在 CSS 中，我们可以通过设置宽度和高度属性来调整图像的大小。为了确保图像在不同分辨率下保持良好的显示效果，通常建议使用相对单位（如百分比）来定义图像的大小。

示例 : 图像大小调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像大小调整示例</title>
    <style>
        .responsive-image {
            width: 50%; /* 容器宽度的 50% */
            height: auto; /* 自适应高度 */
        }
    </style>
</head>
<body>
    <h1>图像大小调整示例</h1>
    <img src="01.jpg" class="responsive-image" alt="响应式图像">
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_前端_03

.responsive-image 类将图像宽度设置为其父容器的 50%，这使得图像在不同设备上都能保持良好的比例和布局。

三、布局中的替换元素

网页布局中，替换元素的使用非常普遍。无论是图像、视频还是其他媒体元素，合理安排这些元素的位置能够提升页面的可读性和美观性。

示例 : 布局中的替换元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局中的替换元素</title>
    <style>
        .container {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: space-between; /* 在主轴上均匀分布元素 */
            align-items: center; /* 在交叉轴上居中对齐 */
        }

        .image {
            flex: 1; /* 图像占据可用空间 */
            margin: 10px; /* 设置外边距 */
        }
    </style>
</head>
<body>
    <h1>布局中的替换元素</h1>
    <div class="container">
        <img src="02.jpg" class="image" alt="图像1">
        <img src="01.jpg" class="image" alt="图像2">
        <img src="03.jpg" class="image" alt="图像3">
    </div>
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_css_04

使用 Flexbox 布局将多个图像水平排列，每个图像的宽度都设置为相等，且具有外边距，使布局更加美观。

四、form 元素

表单是用户与网页交互的主要方式之一，CSS 在样式化表单元素方面起着重要作用，可以提升用户体验和界面美观。

示例 : form 元素的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
    <style>
        form {
            max-width: 400px; /* 表单最大宽度 */
            margin: 20px auto; /* 居中对齐 */
            padding: 20px; /* 内边距 */
            border: 1px solid #ccc; /* 边框 */
            border-radius: 5px; /* 圆角边框 */
            background-color: #f9f9f9; /* 背景色 */
        }

        input, textarea {
            width: 100%; /* 输入框宽度为100% */
            padding: 10px; /* 内边距 */
            margin: 10px 0; /* 外边距 */
            border: 1px solid #ccc; /* 边框 */
            border-radius: 4px; /* 圆角 */
        }

        button {
            background-color: #3498db; /* 按钮背景色 */
            color: white; /* 字体颜色 */
            padding: 10px; /* 内边距 */
            border: none; /* 去掉边框 */
            border-radius: 5px; /* 圆角边框 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
        }
    </style>
</head>
<body>
    <h1>表单示例</h1>
    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">电子邮件：</label>
        <input type="email" id="email" name="email" required>
        
        <label for="message">消息：</label>
        <textarea id="message" name="message" rows="4" required></textarea>
        
        <button type="submit">提交</button>
    </form>
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_css3_05

创建了一个简单的表单，其中包含姓名、电子邮件和消息输入字段。通过 CSS，我们对表单的布局和样式进行了美化，使其更具吸引力。

五、样式化输入元素

文本输入元素是表单中最常见的元素之一，通过 CSS，可以调整其外观，使其与网页整体设计相一致。

示例 : 样式化文本输入元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式化文本输入元素</title>
    <style>
        input[type="text"], input[type="email"] {
            border: 2px solid #3498db; /* 边框颜色 */
            border-radius: 4px; /* 圆角边框 */
            padding: 10px; /* 内边距 */
            outline: none; /* 去掉聚焦时的轮廓 */
            transition: border-color 0.3s; /* 平滑过渡效果 */
        }

        input[type="text"]:focus, input[type="email"]:focus {
            border-color: #2ecc71; /* 聚焦时边框颜色变化 */
        }
    </style>
</head>
<body>
    <h1>样式化文本输入元素示例</h1>
    <form>
        <input type="text" placeholder="输入您的姓名">
        <input type="email" placeholder="输入您的电子邮件">
    </form>
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_css3_06

当用户聚焦到输入框时，边框颜色会平滑地变化。这样的效果不仅美观，也能提升用户体验。

六、继承和表单元素

在 CSS 中，某些属性是可以被继承的，而表单元素的某些样式也会影响其子元素的样式。了解这一点对设计复杂的表单非常重要。

示例 : 继承样式的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承与表单元素</title>
    <style>
        form {
            font-family: Arial, sans-serif; /* 字体继承 */
            color: #333; /* 文字颜色 */
        }

        label {
            font-weight: bold; /* 标签加粗 */
        }
    </style>
</head>
<body>
    <h1>继承样式示例</h1>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
    </form>
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_web_07

整个表单使用了相同的字体和颜色，所有标签和输入元素都继承了这些样式，从而保持了一致的视觉效果。

七、form 元素与 box-sizing

box-sizing 属性在 CSS 中非常重要，它定义了元素的盒模型计算方式。对于表单元素来说，合理的 box-sizing 设置能够避免布局问题。

示例 : 使用 box-sizing 的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing 示例</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box; /* 包含边框和内边距 */
        }

        input {
            width: 100%; /* 输入框宽度 */
            padding: 10px; /* 内边距 */
            margin: 10px 0; /* 外边距 */
            border: 1px solid #ccc; /* 边框 */
        }
    </style>
</head>
<body>
    <h1>box-sizing 示例</h1>
    <form>
        <input type="text" placeholder="输入内容">
        <input type="email" placeholder="输入电子邮件">
    </form>
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_web_08

通过设置 box-sizing: border-box;，我们确保输入框的总宽度不会超过其父容器，从而避免布局问题。

八、其他有用的设置

在处理图像、媒体和表单元素时，还有许多其他的 CSS 属性可以用来提升用户体验和界面美观。

示例 : 其他有用的 CSS 设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他有用的设置示例</title>
    <style>
        .image {
            transition: transform 0.3s; /* 平滑变换效果 */
        }

        .image:hover {
            transform: scale(1.05); /* 鼠标悬停时放大 */
        }

        button {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
        }
    </style>
</head>
<body>
    <h1>其他有用的 CSS 设置</h1>
    <img src="example.jpg" class="image" alt="示例图像">
    <button>肘击我</button>
</body>
</html>

CSS 中的图像、媒体和表单元素——WEB开发系列23_css_09

为图像添加了鼠标悬停时的放大效果，并为按钮增加了阴影，使得界面更加生动和具有层次感。

九、将一切都放在一起——“重置”

在开始样式化一个页面之前，通常需要对浏览器默认样式进行重置，以确保跨浏览器的兼容性。CSS 重置通常是指将所有元素的样式设置为统一的基准样式。

示例 : CSS 重置示例

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 包含边框和内边距 */
}

body {
    font-family: Arial, sans-serif; /* 默认字体 */
    line-height: 1.5; /* 行高 */
    background-color: #f4f4f4; /* 背景色 */
}

h1 {
    margin-bottom: 20px; /* 标题下方间距 */
}

/* 其他样式可以在此添加 */

在重置样式中，设置了所有元素的外边距和内边距为 0，并统一了 box-sizing 的计算方式。这将为后续的样式设置打下良好的基础。

CSS 中的图像、媒体和表单元素——WEB开发系列23_web_10

（所有表情包素材来源网络，仅供学习使用，侵权私删）

如有表述错误及欠缺之处敬请批评指正。

标签：WEB,示例,23,元素,表单,图像,border,CSS
From： https://blog.51cto.com/wamtar/11889147

相关文章

  • 白骑士的CSS高级篇之CSS Grid布局进阶 4.1.2 网格模板与区域
            CSSGrid布局是CSS中强大的布局系统之一，它提供了更灵活和更高效的方式来创建复杂的网页布局。通过Grid布局，你可以将网页划分为多个网格区域，并在这些区域中放置内容，这使得布局更加直观和易于维护。本文将深入探讨Grid布局中的网格模板和区域的概念，帮助你掌握如......
  • 打卡信奥刷题（676）用Scratch图形化工具信奥B3867[普及组/提高组] [GESP202309 三级] 小
    [GESP202309三级]小杨的储蓄题目描述小杨共有NNN个储蓄罐，编号从00......
  • ctfhub-web-SSRF通关攻略
    一、内网访问1.打开ctfhub给的环境地址2.观察题目发现让我们访问127.0.0.1下的flag.php在地址栏后面有一个url参数 ?url=http://127.0.0.1/flag.php 提交即可二、伪协议读取文件1.打开ctfhub给的环境2.观察题目发现让我们读取flag.php文件读取文件用到的协议是......
  • “事事通”校园事务通知小程序的设计与实现-计算机毕业设计源码23598
    摘要 校园事务是大学生日常生活中不可或缺的一部分，包括课程查询、教务管理、校园活动信息等。然而，目前大多数学校在校园事务的通知发布和信息查询方面还依赖传统的官方网站和邮件通知，这种方式存在信息不及时、查找不方便等问题。本文旨在通过引入SpringBoot和Vue框架，结合云......
  • 前端PWA（Progressive Web App）技术（二）
    三、PWA的优势相对于原生应用和传统Web应用，PWA具有以下显著优势：四、PWA的应用场景PWA技术因其独特的优势，在多个领域得到了广泛的应用，包括但不限于：五、结论PWA技术作为一种结合了Web应用和原生应用优点的新型应用开发模式，具有跨平台兼容性、可安装性、离线访问、快速加载......
  • 240723 边缘检测
    原图索贝尔拉普拉斯和canny#-*-coding:utf-8-*-importsysimportcv2importnumpyasnp#加载图片#转换灰度图input_file=sys.argv[1]img=cv2.imread(input_file,cv2.IMREAD_GRAYSCALE)h,w=img.shape#索贝尔边缘检测-水平sobel_horizontal=cv2.Sobe......
  • 240723 knn电影推荐
    通过前面两篇，所以对某一个人A推荐电影，就是找到这个人最类似的人B已经看过的电影，然后将电影推荐A#-*-coding:utf-8-*-importjsonimportnumpyasnpfrompearson_scoreimportpearson_score#找到相似用户deffind_similar_users(dataset,user,num_users):ifu......
  • 前端必知必会-CSS 渐变Gradients(下)
    文章目录CSS圆锥渐变圆锥渐变：三种颜色圆锥渐变：五种颜色圆锥渐变：三种颜色和度数创建饼图具有指定起始角的圆锥渐变具有指定中心位置的圆锥渐变重复圆锥渐变CSS渐变函数总结CSS圆锥渐变CSS圆锥渐变圆锥渐变是围绕中心点旋转的颜色过渡渐变。要创建圆锥渐变，您必......
  • 前端必知必会-CSS阴影效果Shadow
    文章目录CSS阴影效果CSS文本阴影多个阴影CSSbox-shadow属性卡片总结CSS阴影效果使用CSS，您可以为文本和元素添加阴影。CSS文本阴影CSStext-shadow属性将阴影应用于文本。最简单的用法是，您只指定水平阴影(2px)和垂直阴影(2px)：示例h1{text-shado......
  • 一个操作系统的设计与实现——第23章 快速系统调用
    23.1什么是快速系统调用系统调用是操作系统为3特权级任务提供服务的一种手段。在32位操作系统中，我们通过中断实现了系统调用。由于系统调用是一个使用非常频繁的机制，且中断也不是专门为系统调用设计的，因此，64位CPU提供了系统调用的专用机制：快速系统调用。快速系统调用由专用的sy......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99