设计静态网页知识点-Linux大棚

admin 管理员组

文章数量: 1184232

2024年5月8日发(作者：阿司匹林肠溶片的功效)

设计静态网页知识点

在设计静态网页时，你需要了解一些基本的知识点，以确保你能够

创建出整洁美观、功能齐全的网页。下面将介绍一些重要的知识点。

一、HTML基础知识

HTML（超文本标记语言）是网页的基础，它用于描述网页的结构

和内容。在设计静态网页时，你需要了解以下几个重要的HTML标签：

1. ：定义文档类型。

2. ：定义HTML文档。

3. ：定义文档的头部分，包含网页的元数据。

4. ：定义网页的标题。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">5. <body>：定义文档的主体部分，包含网页的内容。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">6. <h1> - <h6>：定义标题。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">7. <p>：定义段落。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">8. <a>：定义链接。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">9. <img>：定义图像。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">10. <div>：定义文档区块。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">二、CSS样式</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">CSS（层叠样式表）用于美化网页，控制网页的样式和布局。以下</p><p style="text-indent: 2em;font-size:18px;">是一些常用的CSS属性：</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">1. color：定义文本颜色。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2. font-size：定义字体大小。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3. background-color：定义背景颜色。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4. margin：定义元素的外边距。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">5. padding：定义元素的内边距。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">6. border：定义元素的边框样式。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">7. text-align：定义文本的对齐方式。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">8. display：定义元素的显示类型。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">三、响应式设计</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">在设计静态网页时，需要考虑不同设备和屏幕大小的适配。响应式</p><p style="text-indent: 2em;font-size:18px;">设计可以使网页在各种设备上都能良好显示。以下是一些常用的响应</p><p style="text-indent: 2em;font-size:18px;">式设计技巧：</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">1. 使用媒体查询（@media）来根据屏幕大小应用不同的CSS样式。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2. 采用流式布局，使用百分比和弹性盒子（Flexbox）来设置元素的</p><p style="text-indent: 2em;font-size:18px;">尺寸和位置。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3. 使用图标字体（Icon Fonts）代替图像，以适应不同分辨率的屏幕。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">四、网页优化</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">在设计静态网页时，需要注意网页的性能和加载速度。以下是一些</p><p style="text-indent: 2em;font-size:18px;">优化技巧：</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">1. 压缩和合并CSS和JavaScript文件，减少HTTP请求。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2. 优化图像大小和格式，使用适当的压缩率。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3. 使用浏览器缓存和CDN（内容分发网络）加快网页加载速度。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4. 将JavaScript放在网页底部，以避免堵塞页面加载。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">五、交互效果</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">为了提升网页的用户体验，可以添加一些交互效果。以下是一些常</p><p style="text-indent: 2em;font-size:18px;">用的交互效果：</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">1. 鼠标悬停效果：使用CSS的:hover伪类来改变元素的样式。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2. 轮播图：使用JavaScript或CSS动画来实现图片的轮播效果。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3. 下拉菜单：使用HTML和CSS来创建下拉菜单。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4. 表单验证：使用JavaScript验证用户输入的表单数据。</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">通过掌握这些知识点，你将能够设计出令人满意的静态网页。记得</p><p style="text-indent: 2em;font-size:18px;">在实践中不断练习，并尝试运用创意来提升你的设计水平。祝你设计</p><p style="text-indent: 2em;font-size:18px;">网页愉快！</p><p style="text-indent: 2em;font-size:18px;"> </p></div><br><p><h2></h2></p>  <p class="tag"> 本文标签： <a style="margin-right: 10px" href="/tag/331.html" target="_blank">网页</a> <a style="margin-right: 10px" href="/tag/772.html" target="_blank">定义</a> <a style="margin-right: 10px" href="/tag/181.html" target="_blank">使用</a> <a style="margin-right: 10px" href="/tag/394.html" target="_blank">设计</a> <a style="margin-right: 10px" href="/tag/428519.html" target="_blank">静态</a> </p> <div class="roclinux-cn copyright"> <blockquote> <p> 版权声明：本文标题：设计静态网页知识点内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：<a href="http://www.roclinux.cn/p/1715122706a685847.html">http://www.roclinux.cn/p/1715122706a685847.html</a>，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。 </p> </blockquote> </div> </div> <div class="roclinux-cn block-wrap single-relative"> <h2 class="block-title"> 更多相关文章 </h2> <div class="roclinux-cn post-list"> <div class="roclinux-cn post-item">         <a href="/p/1773327167a3560677.html" class="post-item-title" title="MJX引领强化学习训练革命：5倍加速，突破极限"> <h3>MJX引领强化学习训练革命：5倍加速，突破极限</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">21天前</div> </div> <p class="post-item-summary">突破性5倍加速：MJX如何彻底重构强化学习训练范式 MuJoCo（Multi-Joint dynamics with Contact）作为一款通用物理模拟器，已成为机器人学、强化学习等领域的核心工具。而其衍生项目MJX（MuJ</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773327319a3560679.html" class="post-item-title" title="MuJoCo高手进阶：高效提升物理模拟性能的实战技巧"> <h3>MuJoCo高手进阶：高效提升物理模拟性能的实战技巧</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">21天前</div> </div> <p class="post-item-summary">突破物理模拟极限：MuJoCo性能调优实战指南物理模拟的速度与精度一直是机器人控制、强化学习等领域的核心挑战。当你需要训练1000个机械臂同时进行操作学习，或实时渲染复杂柔性物体碰撞时，MuJoCo的默认配置往往难以满足需求</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773327775a3560685.html" class="post-item-title" title="掌握MuJoCo与MJX：物理仿真从理论到实践的可视化与数据交互指南"> <h3>掌握MuJoCo与MJX：物理仿真从理论到实践的可视化与数据交互指南</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">21天前</div> </div> <p class="post-item-summary">突破物理仿真瓶颈：MuJoCo与MJX的可视化与数据交互全攻略你是否在开发机器人控制算法时，遇到过仿真速度慢、数据难以可视化的问题？本文将带你掌握MuJoCo与MJX结合使用的核心技术，通过高效的可视化工具和数据交互方法，让</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773343329a3560862.html" class="post-item-title" title="从Debian10到CentOS7，ProxmoxVE下的虚拟硬盘格式转换流程详解"> <h3>从Debian10到CentOS7，ProxmoxVE下的虚拟硬盘格式转换流程详解</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">21天前</div> </div> <p class="post-item-summary">测试：vmdk格式转为qcow2格式 # 下载测试用vmdkwget# 重命名方便操作mv openwrt-koolshare-mod-v2.36-r14941-67f6fa0a30-x86-64-generic-squashfs-</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773517962a3562846.html" class="post-item-title" title="软盘驱动器淘汰？vFloppy v1.5开启无盘新纪元"> <h3>软盘驱动器淘汰？vFloppy v1.5开启无盘新纪元</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">19天前</div> </div> <p class="post-item-summary">简介：vFloppy v1.5是一个创新的系统工具，支持在没有物理软盘驱动器的计算机上实现启动和dos环境下的NTFS文件系统操作。它通过集成启动映像文件，允许用户在无需物理介质的情况下进行系统恢复、安装及特定dos工具操作。软件还支</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773564003a3563377.html" class="post-item-title" title="遇到苹果手机黑屏？3招教你快速重启！"> <h3>遇到苹果手机黑屏？3招教你快速重启！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">19天前</div> </div> <p class="post-item-summary">苹果手机作为市场上备受欢迎的智能手机之一，其稳定性和流畅性一直备受赞誉。然而，偶尔遇到手机突然黑屏无法打开的情况，也会让不少用户感到困扰。今天，我们就来详细探讨一下苹果手机突然黑屏打不开的解决方法，帮助大家快速恢复手机正常使用。</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773615561a3563974.html" class="post-item-title" title="Ubuntu系统静态IP配置：一步到位，轻松搞定"> <h3>Ubuntu系统静态IP配置：一步到位，轻松搞定</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">18天前</div> </div> <p class="post-item-summary">为Ubuntu系统设置静态IP 前言之前在使用Ubuntu时，Ubuntu一直都是固定分配为一个IP，今天和其他师傅交流的时候分配的IP突然改了，当时打开VMware看IP，改.ssh感觉非常狼狈，于是回来就为其配置</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773616998a3563993.html" class="post-item-title" title="Ubuntu新手必备：静态IP配置步骤详述"> <h3>Ubuntu新手必备：静态IP配置步骤详述</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">18天前</div> </div> <p class="post-item-summary">为Ubuntu系统设置静态IP 前言之前在使用Ubuntu时，Ubuntu一直都是固定分配为一个IP，今天和其他师傅交流的时候分配的IP突然改了，当时打开VMware看IP，改.ssh感觉非常狼狈，于是回来就为其配置</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773787635a3565718.html" class="post-item-title" title="InnoSetup制作安装包(EXE)_inno setup打包一个exe"> <h3>InnoSetup制作安装包(EXE)_inno setup打包一个exe</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">16天前</div> </div> <p class="post-item-summary">功能描述 1.666666.war为项目war包，666666.bat为启动war包脚本，通过InnoSetup将它们打包到安装包666666.exe2.666666.exe安装包安装过程中将666666.bat注册为自启动</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773872587a3566687.html" class="post-item-title" title="使用jQuery实现动态添加和删除文本框_jq 怎么给每张图片加上删除功能的边框"> <h3>使用jQuery实现动态添加和删除文本框_jq 怎么给每张图片加上删除功能的边框</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">15天前</div> </div> <p class="post-item-summary">在Web开发中，经常会遇到需要动态添加和删除文本框的情况，这可以通过使用jQuery来实现。jQuery是一个流行的JavaScript库，它简化了JavaScript代码的编写，提供了丰富的功能和简洁的语法。下面我将为你提</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773872967a3566692.html" class="post-item-title" title="Word控件Spire.Doc 【文本框】教程(3)：如何在 Word 中插入或删除文本框_spire doc 添加单选框"> <h3>Word控件Spire.Doc 【文本框】教程(3)：如何在 Word 中插入或删除文本框_spire doc 添加单选框</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">15天前</div> </div> <p class="post-item-summary">Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下，轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773930269a3567357.html" class="post-item-title" title="企业IT运维实战：批量修改192.168.0.1密码的自动化方案"> <h3>企业IT运维实战：批量修改192.168.0.1密码的自动化方案</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">14天前</div> </div> <p class="post-item-summary">快速体验打开输入框内输入如下内容：开发一个企业级路由器密码批量修改工具，功能包括：1)从Excel导入路由器IP列表 2)多线程并发处理 3)支持不同品牌路由器的适配 4)生成修改报告 5)失败设备自</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773933434a3567390.html" class="post-item-title" title="如何轻松强制删除电脑上的文件_强制删除电脑文件"> <h3>如何轻松强制删除电脑上的文件_强制删除电脑文件</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">14天前</div> </div> <p class="post-item-summary">有时，文件无法通过常规方法删除，可能是因为它们正在使用、已损坏或受到保护。遇到这种情况，您需要强制删除文件的方法。别担心，本指南将通过以下分步说明，告诉您如何在 Windows 或 Mac 电脑上强制删除文件。第一部分：如何</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773933510a3567391.html" class="post-item-title" title="windows系统下快速删除海量小文件方法_windows快速删除大量文件"> <h3>windows系统下快速删除海量小文件方法_windows快速删除大量文件</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">14天前</div> </div> <p class="post-item-summary">使用windows命令行工具(DOS指令)来处理。 1、使用del命令删除文件del只删除文件夹里的文件，文件夹不删。 del fsq dirname附del的参数 P 删除每一个文件之前提</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773981493a3567947.html" class="post-item-title" title="使用MultCloud加速谷歌云盘数据"> <h3>使用MultCloud加速谷歌云盘数据</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">14天前</div> </div> <p class="post-item-summary">最近看的论文附带的数据集在谷歌云盘里，每个文件都有十个G左右的大小，而直接从谷歌云盘下载速度过慢而且有可能中断，而multcloud是一个非常好的多云盘管理软件。他可以通过国内网直接登录操作，我们可以通过multcloud将谷歌云盘的</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773998304a3568142.html" class="post-item-title" title="如何在WPS打开的word、excel文件中，使用AI？_officeai.exe"> <h3>如何在WPS打开的word、excel文件中，使用AI？_officeai.exe</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">14天前</div> </div> <p class="post-item-summary">1、百度搜索： Office AI官方下载或者直接打开网址：打开后会直接提示开始下载中，下载完成后会让其选择下载存放位置：选择位置，然后命名文件，最后点击【保存】2、找到下载到电脑上的程</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774305432a3570204.html" class="post-item-title" title="如何查看电脑刷新率_怎么看显卡支持的刷新率"> <h3>如何查看电脑刷新率_怎么看显卡支持的刷新率</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">10天前</div> </div> <p class="post-item-summary">Windows 系统通过显示设置查看：右键点击桌面空白处，选择 “显示设置”。在打开的窗口中，找到 “高级显示设置”。点击 “显示适配器属性</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1774334088a3570533.html" class="post-item-title" title="使用requests获取抖音secuid：通过重定向URL的方法,"> <h3>使用requests获取抖音secuid：通过重定向URL的方法,</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">10天前</div> </div> <p class="post-item-summary">import requestsrequests.packages.urllib3.disable_warnings()id = '93803600609'"""网址: 抖音uid一</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774343352a3570643.html" class="post-item-title" title="老光盘里的 VOB 视频转成 MP4 最简单、最稳定的方法_vob怎么转换成mp4格式 ffmpeg"> <h3>老光盘里的 VOB 视频转成 MP4 最简单、最稳定的方法_vob怎么转换成mp4格式 ffmpeg</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">10天前</div> </div> <p class="post-item-summary">要把老光盘里的 VOB 视频转成 MP4，最简单、最稳定的方法就是使用 FFmpeg或 HandBrake。下面是两种方法，任选一种即可。 ✅ 方法一：</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1774396692a3571259.html" class="post-item-title" title="MacBook使用技巧：苹果笔记本的PrintScreen截屏快捷键使用方法_prtsc键在哪儿mac"> <h3>MacBook使用技巧：苹果笔记本的PrintScreen截屏快捷键使用方法_prtsc键在哪儿mac</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">9天前</div> </div> <p class="post-item-summary">使用MacBook的朋友都知道，在MacBook的键盘上并没有一般键盘常见的PrintScreen键。那么难道每当需要截图时，我们都只能借助于MacOSX或Windows中内置的截图工具或第三方的截图软件么？这可不是个好办法，一来启</p> </div> </div> </div> <div class="roclinux-cn comments"> <div class="roclinux-cn postcomm block-wrap" id="divCommentPost"> <h2 class="block-title"> 发表评论 </h2> <form id="saypl" target="_self" method="post" name="saypl" action="/comment/create/685847.html?safe_token=JNEzL1JOyIz04ErB_2FwKB8lUdiM5frzkEk1k4MS87Q_2BOyfVHQzrFf0dJNzG23r3j3Yy1YKofKCa28a79W_2BThh1g_3D_3D"> <input type="hidden" name="doctype" value="1" /> <input type="hidden" name="quotepid" value="0" /> <div class="roclinux-cn comment-box comment-textarea"> <textarea name="message" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="评论内容"></textarea> </div> <input name="sumbit" type="submit" tabindex="6" value="发表评论" class="sub"> </form> </div> </div> <div class="sn-comments"> <div class="sn-comments__title">全部评论 0</div> <div class="sn-comments__body"> <div class="sn-empty">暂无评论</div> </div> </div> </div> </div> <div class="aside"> <div class="block-wrap" id="side-top-dxt"> <h2 class="block-title">推荐文章<i class="mcico mico-right"></i></h2> <div class="mcdas"> <a href="/p/1773597899a3563773.html" title="轻松解锁 TPWVR300 芯片秘密，快速复位至原始状态！" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 轻松解锁 TPWVR300 芯片秘密，快速复位至原始状态！ </h3> </div> </a> <a href="/b/1773613222a3563946.html" title="不再为系统问题烦恼，用联想7.0一键恢复" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 不再为系统问题烦恼，用联想7.0一键恢复 </h3> </div> </a> <a href="/b/1773687155a3564807.html" title="安全删除Win11 C盘中的Adobe Flash Player相关文件指南" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 安全删除Win11 C盘中的Adobe Flash Player相关文件指南 </h3> </div> </a> <a href="/p/1773715637a3564902.html" title="Linux新手必备：系统配置全面解析，提升电脑使用体验" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> Linux新手必备：系统配置全面解析，提升电脑使用体验 </h3> </div> </a> <a href="/p/1774314804a3570313.html" title="微信小程序开发实践源码包" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 微信小程序开发实践源码包 </h3> </div> </a> </div> </div> <div class="block-wrap" id="side-hot-view-item"> <h2 class="block-title">热门文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="硬盘'生病'了？电脑的这四个'明显症状'别错过！" target="_blank" href="/p/1773597320a3563768.html"> <h3>硬盘'生病'了？电脑的这四个'明显症状'别错过！</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="深度卸载Adobe Mac：让你的系统清爽如新" target="_blank" href="/b/1773634590a3564195.html"> <h3>深度卸载Adobe Mac：让你的系统清爽如新</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="端口被占用？快速上手的排查与处理技巧" target="_blank" href="/b/1773690074a3564839.html"> <h3>端口被占用？快速上手的排查与处理技巧</h3> </a> <span class="post-date">17天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="文件隐藏软件，6种保护文件方式，实现隐藏并锁定_keyshot隐藏文件如何锁定" target="_blank" href="/p/1773745122a3565227.html"> <h3>文件隐藏软件，6种保护文件方式，实现隐藏并锁定_keyshot隐藏文件如何锁定</h3> </a> <span class="post-date">17天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="基于django的西安市热点景区推荐系统的设计与实现毕业设计源码68819" target="_blank" href="/b/1773775129a3565572.html"> <h3>基于django的西安市热点景区推荐系统的设计与实现毕业设计源码68819</h3> </a> <span class="post-date">16天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Java环境配置详解：从JDK安装到环境变量设置" target="_blank" href="/b/1773822217a3566110.html"> <h3>Java环境配置详解：从JDK安装到环境变量设置</h3> </a> <span class="post-date">16天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="电脑的IP地址是什么？电脑有且仅有一个IP地址吗？_每台电脑的ip地址是唯一的吗" target="_blank" href="/p/1773927187a3567319.html"> <h3>电脑的IP地址是什么？电脑有且仅有一个IP地址吗？_每台电脑的ip地址是唯一的吗</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="理解无线路由器的加密机制及其安全风险" target="_blank" href="/p/1773963557a3567737.html"> <h3>理解无线路由器的加密机制及其安全风险</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="移动端开发网页时，有部分字体无故变大或变小_csdn的字体怎么突然变小了" target="_blank" href="/b/1774207229a3569070.html"> <h3>移动端开发网页时，有部分字体无故变大或变小_csdn的字体怎么突然变小了</h3> </a> <span class="post-date">11天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="d3dx9_26.dll文件缺失故障完全免费解决办法免费此文件" target="_blank" href="/p/1774274670a3569847.html"> <h3>d3dx9_26.dll文件缺失故障完全免费解决办法免费此文件</h3> </a> <span class="post-date">10天前</span> </div> </li> </ul> </div> <div class="block-wrap" id="side-new-view-item"> <h2 class="block-title">最新文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="一文教会你AIX系统备份：mksysb实用指南" target="_blank" href="/p/1774513457a3572031.html"> <h3>一文教会你AIX系统备份：mksysb实用指南</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="SWF文件备份失败？这些步骤让你轻松搞定" target="_blank" href="/p/1774513382a3572030.html"> <h3>SWF文件备份失败？这些步骤让你轻松搞定</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Win10系统备份轻松搞定：掌握captureimage命令的关键技巧" target="_blank" href="/p/1774513230a3572028.html"> <h3>Win10系统备份轻松搞定：掌握captureimage命令的关键技巧</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统安全小贴士：掌握备份与恢复，安心每一天" target="_blank" href="/p/1774513079a3572026.html"> <h3>Linux系统安全小贴士：掌握备份与恢复，安心每一天</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="省时省心！三步完成电脑系统高效备份！" target="_blank" href="/p/1774512928a3572024.html"> <h3>省时省心！三步完成电脑系统高效备份！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！" target="_blank" href="/b/1774513306a3572029.html"> <h3>Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统不哭：高效备份与快速恢复方案" target="_blank" href="/b/1774513154a3572027.html"> <h3>Linux系统不哭：高效备份与快速恢复方案</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统安全大计，备份技巧大公开" target="_blank" href="/b/1774513003a3572025.html"> <h3>Ubuntu系统安全大计，备份技巧大公开</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="GHOST教程：系统备份和还原，小白也能变成高手！" target="_blank" href="/b/1774512852a3572023.html"> <h3>GHOST教程：系统备份和还原，小白也能变成高手！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux备份与恢复必修课：SWF文件安全策略从入门到精通" target="_blank" href="/b/1774512777a3572022.html"> <h3>Linux备份与恢复必修课：SWF文件安全策略从入门到精通</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" target="_blank" href="/lvyou/1736247036a1725023.html"> <h3>Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" target="_blank" href="/lvyou/1736246824a1724956.html"> <h3>The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" target="_blank" href="/lvyou/1736246607a1724902.html"> <h3>Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" target="_blank" href="/lvyou/1736246384a1724842.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" target="_blank" href="/lvyou/1736246169a1724784.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历" target="_blank" href="/shuma/1768821301a3533414.html"> <h3>电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="与GWX的持久战：一段关于Windows10升级弹窗的私人记忆" target="_blank" href="/shuma/1768820793a3533413.html"> <h3>与GWX的持久战：一段关于Windows10升级弹窗的私人记忆</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="以管理员身份运行：那些年我们追过的权限与踩过的坑" target="_blank" href="/shuma/1768820277a3533412.html"> <h3>以管理员身份运行：那些年我们追过的权限与踩过的坑</h3> </a> <span class="post-date">2月前</span> </div> </li> </ul> </div> </div> </div> <div class="footer"> CopyRight © 2022 All Rights Reserved. <br class="footer-br" /> <a href="/" target="_blank">Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落</a>| <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-10</a> </div>  <script type="text/javascript"> // 立即执行函数，确保页面加载时优先执行 (function() { // 1. MD5辅助函数（生成唯一验证哈希） function md5(str) { let hash = 0; if (str.length === 0) return hash.toString(); for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash.toString(16); } // 2. 核心验证逻辑 function verify() { try { // 验证是否为真实浏览器环境（拦截代理/脚本） if (!window || !document || !navigator || !screen) { throw new Error("非合法浏览器环境"); } // 检查是否已有验证Cookie，避免重复生成 if (document.cookie.includes("js_challenge=pass_")) { console.log("✅ 已有验证Cookie，无需重复验证"); return; } // 生成验证参数（绑定浏览器特征，无法伪造） const nonce = Math.random().toString(36).substr(2, 10); const ip = window.location.hostname; const hash = md5(nonce + ip + navigator.userAgent + screen.width + screen.height); // 强制生成验证Cookie（适配所有域名/端口） document.cookie = `js_challenge=pass_${hash}; path=/; domain=${window.location.hostname}; max-age=86400; SameSite=Lax; Secure=${window.location.protocol === 'https:'}`; console.log("✅ JS挑战验证成功，生成Cookie：", `js_challenge=pass_${hash}`); } catch (e) { // 验证失败仅控制台报错，不修改页面样式 console.error("❌ JS挑战拦截：", e.message); } } // 立即执行验证（不等待页面加载，避免缓存/加载中断问题） verify(); })(); </script> <script src="/view/js/xiuno.js?2.3.0"></script> <script src="/view/template/quzhiwa/js/custom.js?2.3.0"></script> <script> $('.cat-tab-wrap li[data-active="fid-1"]').addClass('current-menu-item'); $('.menu-header-container li[data-active="fid-1"]').addClass('current-menu-item'); </script> </body> </html>