在head的style标签中直接添加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>
          /* 全局样式 */
          body {
               font-family: 'Arial', sans-serif;
               line-height: 1.6;
               margin: 0;
               padding: 0;
               background-color: #f4f4f4;
          }

          /* 头部样式 */
          header {
               background-color: #333;
               color: #fff;
               padding: 20px 0;
               text-align: center;
          }

          header h1 {
               margin: 0;
          }

          nav ul {
               list-style: none;
               padding: 0;
          }

          nav ul li {
               display: inline;
               margin-right: 10px;
          }

          nav ul li a {
               color: #fff;
               text-decoration: none;
          }

          nav ul li a.active {
               font-weight: bold;
          }

          /* 内容区域样式 */
          .content-section {
               padding: 20px;
               margin: 15px 0;
               background-color: #fff;
          }

          /* 页脚样式 */
          footer {
               background-color: #333;
               color: #fff;
               text-align: center;
               padding: 10px 0;
               position: absolute;
               bottom: 0;
               width: 100%;
          }

          /* 图片样式 */
          img {
               max-width: 100%;
               height: auto;
               border-radius: 5px;
          }

          /* 链接悬停效果 */
          a:hover {
               color: #007bff;
          }

          /* 响应式设计 */
          @media (max-width: 768px) {
               header, nav, section, footer {
                    padding: 10px;
               }
          }
     </style>
</head>
<body>
    <header>
          <h1>我的网站</h1>
          <nav>
               <ul>
                    <li><a href="#home" class="active">首页</a></li>
                    <li><a href="#about">关于我们</a></li>
                    <li><a href="#contact">联系我们</a></li>
               </ul>
          </nav>
     </header>

    <section id="home" class="content-section">
          <h2>欢迎来到我的网站</h2>
          <p>这是一个复杂的样式示例页面,展示了如何使用CSS来美化网页。</p>
          <img src="666.jpg" alt="示例图片">
     </section>

    <section id="about" class="content-section">
          <h2>关于我们</h2>
          <p>这里可以放置关于我们的信息。</p>
     </section>

    <section id="contact" class="content-section">
          <h2>联系我们</h2>
          <p>如果您有任何问题,请通过以下方式联系我们。</p>
     </section>

    <footer>
          <p>版权所有 &copy; 2023 我的网站</p>
     </footer>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/412387.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无人机校企合作:组装、维修、研发全面提升学生技能方好就业

无人机校企合作在组装、维修、研发等方面全面提升学生技能&#xff0c;进而促进学生就业&#xff0c;是一个具有前瞻性和实践性的教育模式。以下是对该合作模式的详细分析&#xff1a; 一、合作背景与意义 随着无人机技术的快速发展和广泛应用&#xff0c;市场对无人机专业人…

用Python在PDF文档中创建动作

PDF格式因其跨平台兼容性和丰富的功能集而成为许多行业中的首选文件格式。其中&#xff0c;PDF中的动作&#xff08;Action&#xff09; 功能尤为突出&#xff0c;它允许开发者嵌入交互式元素&#xff0c;如链接、按钮或是更复杂的脚本&#xff0c;从而显著提升文档的互动性和功…

Apache RocketMQ 中文社区全新升级丨阿里云云原生 7 月产品月报

云原生月度动态 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 趋势热点 &#x1f947; 通义灵码入选 2024 世界人工智能大会最高荣誉「镇…

SprinBoot+Vue超市管理系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

Golang学习笔记-Golang中的锁

同步原语和锁 Golang作为一个原生支持用户态的语言&#xff0c;当提到并发进程&#xff0c;多线程的时候&#xff0c;是离不开锁的&#xff0c;锁是一种并发编程中的同步原语&#xff08;Synchronization Primitives&#xff09;&#xff0c;它能保证多个 Goroutine 在访问同一…

4. kafka消息监控客户端工具

KafkaKing官网地址 : https://github.com/Bronya0/Kafka-King github下载地址 : Releases Bronya0/Kafka-King (github.com) (windows、macos、linux版本) 云盘下载地址 : https://pan.baidu.com/s/1dzxTPYBcNjCTSsLuHc1TZw?pwd276i (仅windows版本) 连接kafka 输入本地地址…

数据分析及应用:如何对试卷得分做min-max归一化处理?

目录 0 问题描述 1 数据准备 2 问题分析 3 小结 0 问题描述 现有试卷信息表examination_info(exam_id试卷ID, tag试卷类别, difficulty试卷难度, duration考试时长, release_time发布时间): 试卷作答记录表exam_record(uid用户ID, exam_id试卷ID, start_time开始作答时…

H5手机端调起支付宝app支付

1.调起APP页面如下 步骤 1.让后端对接一下以下文档&#xff08;手机网站支付通过alipays协议唤起支付宝APP&#xff09; https://opendocs.alipay.com/open/203/107091?pathHash45006f4f&refapi 2.后端接口会返回一个form提交表单 html&#xff1a;在页面中定义一个d…

【FRP 内网穿透】

文章目录 一、什么叫内网穿透1、内网穿透技术的描述2、内网穿透技术的工作方式通常包括以下几个步骤 二、用内网穿透解决了什么问题三、常见的内网穿透解决方式1、FRP &#xff08;开源&#xff09;2、花生壳&#xff08;商业&#xff09;3、ZeroTier&#xff08;开源 商业&…

用Python绘制历史K线数据

历史K线数据是指股票或指数在特定时间段内的价格变化记录&#xff0c;通常包括开盘价、最高价、最低价、收盘价以及成交量等信息。K线图是一种常用的图形表示方法&#xff0c;用于描述股票市场的价格波动&#xff0c;它由一系列的柱状图组成&#xff0c;每个柱状图&#xff08;…

[ACP云计算]易错题(原题)

ECS 1、 2、 3、 4、 5、 6、 7、 8、 9、 10、 11、 12、 13、 14、 15、 16、 17、 18、 19、 20、 21、 22、 23、 24、 25、 26、 27、 28、 29、 30、 31、 32、 33、 34、 35、 36、 37、 对象存储OSS 1、 2、 3、 4、 5、 6、 重点&#xff01;&#xff01;&#xff…

本地部署一个WordPress博客结合内网穿透实现异地远程访问本地站点

文章目录 前言1. 安装WordPress2. 创建WordPress数据库3. 安装相对URL插件4. 安装内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 配置WordPress固定公网地址 前言 本文主要介绍如何在Linux Ubuntu系统上使用WordPress搭建一个本地网站&#xff0c…

.NET Razor类库-热加载 就是运行时编译

1.新建3个项目 1.1 一个.NET Standard2.1项目 IX.Sdk.SvnCICD4NuGet 1.2 一个.NET Razor类库项目 IX.Sdk.SvnCICD4NuGet.RazorWeb 1.3 一个.NET6 Web项目 IX.Sdk.SvnCICD4NuGet.Web 这3个项目的引用关系 Web引用 Razor类库 和 .NET Standard2.1 Razor类库引用.NET Standard2.1…

[LLM][Prompt Engineering]:大语言模型上下文学习-What、How、Why?

上下文学习 上下文学习什么是上下文学习2. 示例的选择2.1 相关度排序2.2 集合多样性2.3 大语言模型 3. 示例格式3.1 人工标注3.2 利用大语言模型自动生成 4. 示例顺序5. 上下文学习为什么可以work5.1 能力来源5.2 ICL的能力 Reference 在GPT-3的论文中&#xff0c;OpenAI 研究团…

【Tomcat+MySQL+Redis源码安装三件套】

TomcatMySQLRedis源码安装三件套 Tomcat部分概念Tomcat的作用Tomcat的原理Linux运维中的应用场景具体操作示例 基本使用流程实验Tomcat安装tomcat的反向代理及负载均衡源地址hash(不能负载)tomcat负载均衡实现&#xff08;使用cookie&#xff09; memcached 操作命令 理论补充结…

注册免费的vps:infinityfree

首先是注册网址 https://dash.infinityfree.com/login 各位自行注册就好了 注册好后创建账户&#xff0c;选择最左边这个免费的就可以了 然后可以创建一个子域名&#xff0c;各位自行选择后缀和填写前面就好了 然后拉下来选择 I approve 然后创建账户 然后就可以打开控制面…

LRN正则化是什么?

LRN正则化&#xff0c;全称为Local Response Normalization&#xff08;局部响应归一化&#xff09;&#xff0c;是一种在深度学习&#xff0c;特别是在卷积神经网络&#xff08;CNN&#xff09;中常用的正则化技术。该技术旨在通过模拟生物视觉系统中的侧抑制现象&#xff0c;…

微深节能 环冷卸灰小车定位远程控制系统 格雷母线

微深节能环冷卸灰小车定位远程控制系统中的格雷母线&#xff0c;作为一种高精度位移测量系统&#xff0c;在系统中发挥着关键作用。 一、格雷母线概述 格雷母线系统主要由格雷母线、天线箱、地址解码器、地址编码器四个核心部分组成。其核心部件包括扁平状的尼龙加纤合成材质外…

华为大咖说丨企业数字化转型如何开展顶层设计?

本文作者&#xff1a;李克武&#xff08;华为交通智慧化军团 首席数字化转型专家&#xff09;全文约1787字&#xff0c;阅读约需6分钟 近期&#xff0c;我与朋友探讨了有关企业数字化转型顶层设计这一话题。探讨结束后&#xff0c;我认为有必要详述一番&#xff0c;由此才有了这…

更改文件路径时出现The location is not writable.Please choose a new location问题解决方案

The location is not writable.Please choose a new location问题解决方案 1.问题如下图&#xff1a; 在当前盘里面试着删除一个文件夹&#xff0c;发现需要管理员的权限才可删除 主要原因&#xff1a;当前盘没有修改/写入权限 2.解决方案 在需要写入的盘符上右键–>点击属…