HTML + CSS 实践1

news2024/11/19 17:34:21

Hello,小伙伴们

这是一个十分精美的网站,可以拿着它去制作一些个人网站
index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>首页</title>
</head>
<style type="text/css">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

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

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

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
<body>
<header>
    <h1>欢迎来到精美の网站!</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="aboutus.html">关于我们</a></li>
      <li><a href="tellus.html">联系我们</a></li>
    </ul>
  </nav>

  <section>
    <h2>欢迎</h2>
    <p>这是一个精美的网站</p>
  </section>

  <footer>
    <p>版权所有 &copy; 2023 Python_enjoy</p>
  </footer>
</body>
</html>

在这里插入图片描述

tellus.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>联系我们</title>
</head>
<style type="text/css">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

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

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

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
<body>
<header>
    <h1>联系我们</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="aboutus.html">关于我们</a></li>
      <li><a href="tellus.html">联系我们</a></li>
    </ul>
  </nav>

  <section>
    <span id="a">邮箱 <a id="a" href="mailto:51gcode@51gcode.cn">51gcode@51gcode.cn</a></span>
  </section>

  <footer>
    <p>版权所有 &copy; 2023 Python_enjoy</p>
  </footer>
</body>
</html>

在这里插入图片描述

aboutus.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>关于我们</title>
</head>
<style type="text/css">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

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

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

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
<body>
<header>
    <h1>关于我们</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="aboutus.html">关于我们</a></li>
      <li><a href="tellus.html">联系我们</a></li>
    </ul>
  </nav>

  <section>
    <p>我是 Python_enjoy</p>
  </section>

  <footer>
    <p>版权所有 &copy; 2023 Python_enjoy</p>
  </footer>
</body>
</html>

在这里插入图片描述

如有不足,请指出在评论区 \color{red} 如有不足,请指出在评论区 如有不足,请指出在评论区

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【业务功能篇105】 微服务-springcloud-springboot-电商订单模块--秒杀服务-定时任务【上篇】

秒杀服务 一、商品上架 秒杀活动的结构图 通过定时任务触发&#xff1a; 定时任务由spring提供&#xff0c;需要通过注解开启&#xff0c;这里通过定义一个配置类&#xff0c;注入spring,对其配置类进行相应的注解&#xff0c;当然也可以注解放在我们的服务启动类上cron表达…

linux系统移植到开发板简要过程(移植bootloader引导加载程序---移植linux内核---制作根文件系统)

一.标准linux启动过程图 对于linux启动流程分析&#xff0c;我们需要移植bootloader引导加载程序---移植linux内核---制作根文件系统镜像文件&#xff1b; 二.为什么进行系统移植&#xff1f; 对于不同的硬件平台&#xff0c;linux系统启动流程大体相同&#xff0c;但是资源需求…

多线程的创建

一、基本概念 1 cpu CPU的中文名称是中央处理器&#xff0c;是进行逻辑运算用的&#xff0c;主要由运算器、控制器、寄存器三部分组成&#xff0c;从字面意思看就是运算就是起着运算的作用&#xff0c;控制器就是负责发出cpu每条指令所需要的信息&#xff0c;寄存器就是保存运…

spaCy库的实体链接踩坑,以及spaCy-entity-linker的knowledge_base下载问题

问题1. spacy Can’t find factory for ‘entityLinker’ 1&#xff09;问题 写了一个实体链接类&#xff0c;代码如下&#xff1a; nlp spacy.load("en_core_web_md")class entieyLink:def __init__(self, doc, nlp):self.nlp nlpself.doc self.nlp(doc)# Che…

MATLAB入门-矩阵的运算

MATLAB入门-矩阵的运算 本篇文章为学习笔记&#xff0c;课程链接为&#xff1a;头歌 相关知识 常见的矩阵运算有算术运算、关系运算和逻辑运算。MATLAB中的所有变量都是以矩阵的形式存储的&#xff0c;单个变量就相当于一个1*1的矩阵。 算术运算 下面展示的是常见的矩阵之…

云负载均衡

华为云&#xff1a;弹性负载均衡&#xff08;ELB&#xff09; 服务列表----弹性负载均衡 腾讯云&#xff1a;负载均衡 阿里云&#xff1a;弹性负载均衡&#xff08;SLB&#xff09;【ALB NLB CLB】 云服务&#xff1a; 云弹性负载均衡&#xff08;ELB/SLB&#xff09; 云服务…

Unity3D之简单溶解特效制作

文章目录 新建Shader Graph设置参数新建Step节点新建Simple Noise节点查看效果 新建Shader Graph 这里选择 Shader Graph -> URP -> Unlit Shader Graph 创建 设置参数 把 Surface Type 改成 Transparent 新建Step节点 创建一个Step的节点 把 Step 的 Out 连接到 Frag…

Java8-17 --- idea2022

目录 一、idea官网 二、使用idea编写hello world 三、查看工程中的JDK配置信息 四、详细设置 4.1、显示工具栏 4.2、默认启动项目配置 4.3、取消自动更新 4.4、选择整体主体与背景图 4.5、设置编辑器主题样式 4.5.1、编辑器主题 4.5.2、字体大小 4.5.3、修改注…

JS看板:bryntum taskboard 5.5.2 Crack

Bryntum 任务板是一个灵活的看板 Web 组件&#xff0c;可帮助您可视化和管理您的工作。 任务板非常灵活&#xff0c;允许您完全自定义卡片、列和泳道的渲染和样式。借助丰富的 API&#xff0c;您甚至可以在运行时打开或关闭功能。 在繁忙的团队中跟踪任务可能会令人畏惧。任务…

AMD GPU 内核驱动架构分析(一)

在Linux系统中&#xff0c;GPU驱动是集成在DRM框架中的&#xff0c;AMD GPU的内核驱动结构是一个复杂的软件堆栈&#xff0c;负责管理和控制AMD图形硬件&#xff0c;以便应用程序可以与GPU进行通信并利用其图形处理能力。以下是AMD GPU内核驱动的主要组成部分&#xff1a; 硬件…

【操作系统】聊聊进程、线程、协程

进程内部有那些数据 为什么创建进程的成本高 进程和线程 进程是资源分配的基本单位&#xff0c;而线程是程序执行的基本单位&#xff0c;一个是从资源分配的角度看&#xff0c;另一个是执行角度。 那么进程和程序的区别是什么&#xff1f; 程序&#xff0c;一段代码&#xff…

Linux 6.6 初步支持AMD 新一代 Zen 5 处理器

AMD 下一代 Zen 5 CPU 现已开始为 Linux 6.6 支持提交相关代码&#xff0c;最新补丁包括提供温度监控和 EDAC 报告等。 最新的 Linux 6.6 代码中已经加入了包括支持硬件监视器温度监控和 EDAC 报告的补丁。此外&#xff0c;新版本还加入了 x86 / misc 补丁&#xff0c;Phoronix…

9.11C高级day4

实现一个对数组求和的函数&#xff0c;数组通过实参传递给函数 sum0 function add() {for i in $*  #$*接收传来的所有参数do((sumi))doneecho $sum }#定义一个数组 arr(1 2 3 4 5 7 9)#向函数传参 add ${arr[*]}写一个函数&#xff0c;输出当前用户的uid和gid&#xff0c;并…

shell中分支语句,循环语句,函数

实现对一个数组求和的函数&#xff0c;将数组作为实参传给函数 #!/bin/bash sum() {for i in $do((sumi))doneecho $sum} read -p "请输入一组数字: " -a arr sum ${arr[*]}2 调用函数&#xff0c;输出当前用户的uid gid 并使用变量接收结果 #!/bin/bashget() {uid…

R语言发送邮件丨blastula包使用教程

R语言自动发送邮件 今天分享一个小技巧&#xff0c;用R语言脚本实现STMP邮件自动发送功能。 生信分析实际操作过程中&#xff0c;可能会偶尔会遇到耗时比较久的计算&#xff0c;比如基因组上游分析GATK标准流程往往耗时几天时间。 使用R语言自动发送邮件&#xff0c;在关键节点…

【性能测试】Jmeter —— jmeter计数器

jmeter计数器 如果需要引用的数据量较大&#xff0c;且要求不能重复或者需要递增&#xff0c;那么可以使用计数器来实现 如&#xff1a;新增功能&#xff0c;要求名称不能重复 1&#xff0c;新增计数器 计数器&#xff1a;允许用户创建一个在线程组之内都可以被引用的计数器…

LeGo-LOAM 源码解析

文章目录 0、整体框架1、imageProjection —— 点云分割0. main()1. cloudHandler()2. copyPointCloud()3. findStartEndAngle()4. projectPointCloud()5. groundRemoval()6. cloudSegmentation()7. labelComponents()8. publishCloud()9. resetParameters() 2、featureAssocia…

宠物互联网医院|宠物互联网医院掌上宠物的健康助手

宠物互联网医院依托于互联网技术&#xff0c;将宠物健康管理与现代科技相结合&#xff0c;为宠物主人们提供了全方位、便捷的养宠服务。通过智能手机APP&#xff0c;宠物主人不仅能够快速轻松地了解自己宠物的健康状况&#xff0c;还能够与兽医进行实时的在线咨询、预约就诊。不…

迷你无人车 Navigation 导航(3)

迷你无人车 Navigation 导航&#xff08;3&#xff09; 自己实现了对于迷你无人车关节的控制&#xff0c;由于原本的关节布置仅支持阿克曼转向&#xff0c;因此先进行阿克曼转向的控制 修改 URDF 文件 添加 transmission 标签&#xff0c;定义关节的驱动 <transmission …

MySQL Oracle区别

由于SQL Server不常用&#xff0c;所以这里只针对MySQL数据库和Oracle数据库的区别 (1) 对事务的提交 MySQL默认是自动提交&#xff0c;而Oracle默认不自动提交&#xff0c;需要用户手动提交&#xff0c;需要在写commit;指令或者点击commit按钮 (2) 分页查询 MySQL是直接在SQL语…