当前位置：首页 > news >正文

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计

news 来源：原创 2025/7/21 1:12:20

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计

简介

在前端开发的世界里，HTML5和CSS3是构建现代网页的基石。本文将通过一个简单的HTML5页面模板，展示如何使用HTML5的结构化元素和CSS3的样式特性，来创建一个既美观又功能齐全的个性化网页。这个模板适合用作教学示例，也适用于任何想要快速搭建一个基本网站的人。

HTML5结构化元素

HTML5引入了许多新的结构化元素，使得页面内容的语义更加清晰。以下是我们在模板中使用的一些关键元素：

<header>：定义页面的头部区域，通常包含网站的标题和导航链接。
<nav>：定义导航链接，用于页面内的跳转或链接到其他页面。
<section>：定义文档中的一个独立部分，用于组织内容。
<article>：定义独立的文章内容，可以独立于页面的其他内容。
<aside>：定义侧边栏内容，通常用于额外的信息或广告。
<footer>：定义页面的底部区域，通常包含版权信息。

CSS3样式设计

CSS3为我们提供了强大的样式设计能力，包括渐变背景、圆角边框、阴影效果等。以下是我们为模板添加的一些个性化样式：

渐变背景：为页面背景添加了从浅蓝色到深蓝色的渐变效果，使页面看起来更加生动。
圆角边框：为所有区块元素添加了圆角边框，使页面看起来更加柔和。
半透明背景：为区块元素添加了半透明白色背景，使其在渐变背景上更突出。
阴影效果：为区块元素添加了轻微的阴影效果，增加立体感。
导航样式：导航链接去除了下划线，增加了鼠标悬停时的下划线效果。
表格样式：为表格单元格添加了背景色和边框，表头添加了绿色背景。
底部版权信息：底部版权信息居中显示，背景透明，文字颜色为白色。

完整代码

以下是完整的HTML和CSS代码，展示了如何结合HTML5的结构化元素和CSS3的样式特性，创建一个个性化的网页。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计</title><style>body {font-family: 'Microsoft YaHei', Arial, sans-serif;background: linear-gradient(to right, #6dd5ed, #2193b0); /* 渐变背景 */color: #333; /* 文本颜色 */margin: 0;padding: 20px;line-height: 1.6;}header, nav, section, article, aside, footer {border: 1px solid #ccc;padding: 20px;margin: 10px 0;border-radius: 8px; /* 圆角边框 */background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */}nav ul {list-style: none;padding: 0;}nav ul li {display: inline;margin-right: 10px;font-weight: bold;}nav a {text-decoration: none;color: #333;}nav a:hover {text-decoration: underline;}table, th, td {border: 1px solid #ccc;border-collapse: collapse;}th, td {padding: 10px;text-align: left;background-color: #f9f9f9;}th {background-color: #5cb85c;color: white;}figcaption {font-size: 0.9em;color: #666;}footer {text-align: center;padding: 10px 0;font-size: 0.9em;background-color: transparent;color: #fff;}footer p {margin: 0;}</style>
</head>
<body><header><h1>风尚云网前端学习：</h1><p>一个简易前端新手友好的HTML5页面布局与样式设计</p></header><nav><ul><li><a href="#section1">第一节</a></li><li><a href="#section2">第二节</a></li><li><a href="#section3">第三节</a></li></ul></nav><section id="section1"><h2>第一节</h2><p>这是第一节中的一个段落。</p><article><h3>文章标题</h3><p>这是第一节中的一篇文章。</p></article><aside><h3>侧边栏标题</h3><p>这是第一节中的侧边栏内容。</p></aside></section><section id="section2"><h2>第二节</h2><p>这是第二节中的一个段落。</p><figure><img src="https://g.csdnimg.cn/static/logo/favicon32.ico" alt="占位图像"><figcaption>图1：这是一个占位图像。</figcaption></figure></section><section id="section3"><h2>第三节</h2><p>这是第三节中的一个段落。</p><table><tr><th>表头1</th><th>表头2</th></tr><tr><td>行1，单元格1</td><td>行1，单元格2</td></tr><tr><td>行2，单元格1</td><td>行2，单元格2</td></tr></table></section><footer><p>版权所有 &copy; 2024 风尚云网前端学习</p></footer>
</body>
</html>

结论

通过这个简单的示例，我们可以看到HTML5和CSS3如何协同工作，创建出既美观又功能齐全的网页。

这个模板可以作为任何前端开发者学习HTML5和CSS3的起点，也可以作为构建更复杂网站的基石。

希望这篇文章能够帮助你更好地理解HTML5和CSS3的基本概念，并激发你创建自己的个性化网页。

我是风尚，梦想是带十万人创建一个风尚云网全能圈子！

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计简介在前端开发的世界里，HTML5和CSS3是构建现代网页的基石。本文将通过一个简单的HTML5页面模板，展示如何使用HTML5的结构化元素和CSS3的样式特性，来创建一个…...

编程日记 2025/7/21 1:12:20

论文阅读：A fast, scalable and versatile tool for analysis of single-cell omics data

Zhang, K., Zemke, N.R., Armand, E.J. et al. A fast, scalable and versatile tool for analysis of single-cell omics data. Nat Methods 21, 217–227 (2024). 论文地址：https://doi.org/10.1038/s41592-023-02139-9 代码地址：https://github.com…...

编程日记 2025/7/20 14:38:58

【从零开始的LeetCode-算法】43. 网络延迟时间

有 n 个网络节点，标记为 1 到 n。给你一个列表 times，表示信号经过有向边的传递时间。 times[i] (ui, vi, wi)，其中 ui 是源节点，vi 是目标节点， wi 是一个信号从源节点传递到目标节点的时间。现在，…...

编程日记 2025/7/20 14:37:56

一文理解 Python 编程语言中的 .strip() 方法

🍉 CSDN 叶庭云：https://yetingyun.blog.csdn.net/ Python 中的 strip() 方法：初学者友好指南在 Python 中，strip() 是一个极为实用的字符串方法，主要用于移除字符串首尾的特定字符。默认情况下，它会清除…...

编程日记 2025/7/19 23:26:03

solr 远程命令执行 (CVE-2019-17558)

漏洞描述 Apache Velocity是一个基于Java的模板引擎，它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开源软件项目，旨在确保Web应用程序在表示层和业务逻辑层之间的隔离（即MVC设计模式）。 Apa…...

编程日记 2025/7/20 13:44:12

【cocos creator】下拉框

https://download.csdn.net/download/K86338236/90038176 const { ccclass, property } cc._decorator;type DropDownOptionData {optionString?: string,optionSf?: cc.SpriteFrame } type DropDownItemData {label: cc.Label,sprite: cc.Sprite,toggle: cc.Toggle }cccl…...

编程日记 2025/7/20 14:36:49

从 Llama 1 到 3.1：Llama 模型架构演进详解

编者按： 面对 Llama 模型家族的持续更新，您是否想要了解它们之间的关键区别和实际性能表现？本文将探讨 Llama 系列模型的架构演变，梳理了 Llama 模型从 1.0 到 3.1 的完整演进历程，深入剖析了每个版本的技术创新&#…...

编程日记 2025/7/20 11:01:37

电话机器人的最佳应用

电话机器人的最佳应用作者：开源呼叫中心系统 FreeIPCC，Github地址：https://github.com/lihaiya/freeipcc 电话机器人在多个领域中都展现出了其独特的优势和广泛的应用前景。以下是对电话机器人最佳应用的详细归纳： 一、销售与营…...

编程日记 2025/7/20 13:56:43

[面试]-golang基础面试题总结

文章目录 panic 和 recover**注意事项**使用 pprof、trace 和 race 进行性能调试。**Go Module**：Go中new和make的区别 Channel什么是 Channel 的方向性？如何对 Channel 进行方向限制？Channel 的缓冲区大小对于 Channel 和 Goroutine 的通信有…...

编程日记 2025/7/19 14:27:37

Fakelocation Server服务器/专业版 ubuntu

前言:需要Ubuntu系统 Fakelocation开源文件系统需求 Ubuntu | Fakelocation | 任务一任务一更新Ubuntu（安装下载不再赘述） sudo -i # 提权 sudo apt update # 更新软件包列表 sudo apt upgrade # 升级已安装的软…...

编程日记 2025/7/15 19:22:19

Node.js的http模块：创建HTTP服务器、客户端示例

新书速览|Vue.jsNode.js全栈开发实战-CSDN博客《Vue.jsNode.js全栈开发实战（第2版）（Web前端技术丛书）》(王金柱)【摘要书评试读】- 京东图书 (jd.com) 要使用http模块，只需要在文件中通过require(http)引入即可。…...

编程日记 2025/7/20 14:07:49

Jackson 对象与json数据互转工具类JacksonUtil

下面是一个基于 Jackson 的工具类 JacksonUtil，用于在 Java 项目中实现对象与 JSON 数据之间的互相转换。该工具类具有简洁、易用、通用的特点。 package com.fy.common.util;import com.fasterxml.jackson.core.JsonGenerator; import com.fasterxml.jackson.core…...

编程日记 2025/7/20 14:22:31

【ArcGISPro】根据yaml构建原始Pro的conda环境

使用场景我们不小心把原始arcgispro-py3的conda环境破坏了，我们就可以使用以下方法进行修复查找文件在arcgis目录下找到yaml文件如果没找到请复制以下内容到新的yaml文件 channels: - esri - defaults dependencies: - anyio=4.2.0=py311haa95532_0 - appdirs=1.4.4=p…...

编程日记 2025/7/19 19:49:01

对撞双指针（七）三数之和

15. 三数之和给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三元组…...

编程日记 2025/7/20 14:36:49

反向代理服务器的用途

代理服务器在网络中扮演着重要的角色，它们可以优化流量、保护服务器以及提高安全性。在代理服务器中，反向代理服务器是一种特殊类型，常用于Web服务器前，它具备多种功能，能够确保网络流量的顺畅传输。那么，让…...

编程日记 2025/7/20 13:44:12

一些好的AI技术学习平台和资料（动态更新）

1. 大模型 1.1 提示词（Prompt） 目前，大模型技术已经深入到工作生活的方方面面，各技术大厂的大模型也层出不穷，从开始的OpenAI一家独大，到当今世界的“百模大战”。从一些日常使用的角度来说，模…...

编程日记 2025/7/20 13:55:37

wireshark抓包分析HTTP协议，HTTP协议执行流程，

「作者主页」：士别三日wyx 「作者简介」：CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者「推荐专栏」：对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》使用WireShark工具抓取「HTTP协议」的数据包&#…...

编程日记 2025/7/19 20:00:26

路由缓存后跳转到新路由时，上一路由中的tip信息框不销毁问题解决

上一路由tip信息框不销毁问题解决路由缓存篇问题描述及截图解决思路关键代码路由缓存篇传送门问题描述及截图路由缓存后跳转新路由时，上一个路由的tip信息框没销毁。解决思路在全局路由守卫中获取DOM元素，通过css去控制关键代码修改文…...

编程日记 2025/7/20 14:15:06

【Angular】async详解

在 Angular 中，async 关键字用于定义异步函数，通常与 await 一起使用来处理 Promise。这使得异步代码看起来更像同步代码，从而更容易理解和维护。基本用法定义异步函数：使用 async 关键字。等待 Promise 解析：使用…...

编程日记 2025/7/20 14:27:20

springboot/ssm综合小区管理系统Java社区物业停车缴费系统web物业源码

springboot/ssm综合小区管理系统Java社区物业停车缴费系统web物业源码基于springboot(可改ssm)htmlvue项目开发语言：Java 框架：springboot/可改ssm vue JDK版本：JDK1.8（或11） 服务器：tomcat 数据库&…...

编程日记 2025/7/20 14:12:32

【51单片机】程序实验56.独立按键-矩阵按键

主要参考学习资料：B站【普中官方】51单片机手把手教学视频前置知识：C语言单片机套装：普中STC51单片机开发板A4标准版套餐7 码字不易，求点赞收藏加关注(•ω•̥) 有问题欢迎评论区讨论~ 目录独立按键按键介绍实验5 独立按键矩…...

编程日记 2025/7/20 14:11:19

SAP 零售方案 CAR 系统的介绍与研究

前言当今时代，零售业务是充满活力和活力的业务领域之一。每天，由于销售运营和客户行为，它都会生成大量数据。因此，公司迫切需要管理数据并从中检索见解。它将帮助公司朝着正确的方向发展他们的业务。这就是为什么公司用来处理…...

编程日记 2025/7/20 14:35:34

2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略完整参考论文（2）

5.2 问题一模型的建立与求解 5.2.1 分析发展情况为了更好地理解数据的变化趋势，利用matlab通过六个子图对宠物行业中的关键变量进行了可视化展示。图 1. 宠物数量变化展示了猫数量、狗数量和总宠物数量在 2019-2023 年间的变化趋势。结果显示：猫的数量呈逐年上升的趋…...

编程日记 2025/7/20 11:05:18

嵌入式的C/C++：深入理解 static、const 与 volatile 的用法与特点

目录一、static 1、static 修饰局部变量 2、 static 修饰全局变量 3、static 修饰函数 4、static 修饰类成员 5、小结二、const 1、const 修饰普通变量 2、const 修饰指针 3、const 修饰函数参数 4. const 修饰函数返回值 5. const 修饰类成员 6. const 与 #defi…...

编程日记 2025/7/20 14:01:11

【数据库设计】软件系统需要同时设计注册日志表和登录日志表吗

是的，通常情况下，注册日志表和登录日志表是分别设计的，分别记录不同类型的事件信息。注册日志表记录用户的注册信息、注册方式以及是否成功等内容。登录日志表记录用户每次登录的时间、IP 地址、设备信息、登录状态等内容。尽管这两者看…...

编程日记 2025/7/20 13:44:11

vim 一次注释多行的几种方法

在 Vim 中一次注释多行是一个常见操作。可以使用以下方法根据你的具体需求选择合适的方式： 方法 1：手动插入注释符进入正常模式： 按 Esc 确保进入正常模式。选择需要注释的多行： 移动到第一行，按下 Ctrlv 进入可视块…...

编程日记 2025/7/20 14:04:40

手机无法连接服务器1302什么意思？

你有没有遇到过手机无法连接服务器，屏幕上显示“1302”这样的错误代码？尤其是在急需使用手机进行工作或联系朋友时，突然出现的连接问题无疑会带来不少麻烦。那么，什么是1302错误，它又意味着什么呢？ 1302错…...

编程日记 2025/7/20 5:35:31

Git（一）基本使用

目录一、使用git -v 查看安装git版本二、使用mkdir 创建一个文件，并使用 git init 在该目录下创建一个本地仓库， 三、通过git clone命令接入线上仓库四、使用git status查看仓库状态信息五、利用echo写入一个文件并使用cat进行查看【Linux】e…...

编程日记 2025/7/20 14:40:00

sklearn中常用数据集简介

scikit-learn库中提供了包括分类、回归、聚类、降维等多种机器学习任务所需的常用数据集，方便进行实验和研究，它们主要被封装在sklearn.datasets中，本文对其中一些常用的数据集进行简单的介绍。 1.Iris（鸢尾花）数据集…...

编程日记 2025/7/20 15:09:38

LRU缓存

什么是LRU缓存? LRU（Least Recently Used）是最近最少使用算法，是操作系统中用于分页置换的算法，如果要向内存中添加分页，并且内存分页已满的情况下，就选出最近一段时间最不常用的分页进行置换（…...

编程日记 2025/7/20 15:26:16

.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署

FreeSpire.XLS && Aspose.Cells包都可以实现。实现过程中发现如下问题： 本地测试通过， docker部署服务器后报错： The type initializer for Spire.Xls.Core.Spreadsheet.XlsPageSetupBase threw an exception. 由于缺少依赖&#xf…...

编程日记 2025/7/20 15:03:07

HttpServletRequest req和前端的关系，req.getParameter详细解释，req.getParameter和前端的关系

HttpServletRequest 对象在后端和前端之间起到了桥梁的作用，它包含了来自客户端的所有请求信息。通过 HttpServletRequest 对象，后端可以获取前端发送的请求参数、请求头、请求方法等信息，并根据这些信息进行相应的处理。以下是对 HttpServle…...

编程日记 2025/7/20 15:33:49

[Python3] Sanic 框架构建高并发的 Web 服务

在 Python3 中使用 Sanic 框架来构建高并发的 Web 服务时，Sanic 因其异步和基于事件驱动的架构能够很好地处理高并发请求。下面是如何使用 Sanic 的一些要点和示例代码。 1. 安装 Sanic 首先确保你安装了 Sanic，可以通过以下命令安装： pip…...

编程日记 2025/7/20 15:22:03

5.5 W5500 TCP服务端与客户端

文章目录 1、TCP介绍2、W5500简介2.1 关键函数socketlistensendgetSn_RX_RSRrecv自动心跳包检测getSn_SR 1、TCP介绍 TCP 服务端： 创建套接字[socket]：服务器首先创建一个套接字，这是网络通信的端点。绑定套接字[bind]：服务器将…...

编程日记 2025/7/20 15:15:34

【Flutter】搭建Flutter开发环境，安卓开发

Flutter是谷歌开源的一个跨平台开发的框架，方便好用，这里以Windows 上构建 Flutter Android 应用为例，记录下我搭建环境时碰到的一些问题以及解决。第一步：参考官网：开发 Android 应用 | Flutter 中文文档 - Flutter …...

编程日记 2025/7/20 15:34:43

【机器学习】——朴素贝叶斯模型

💻博主现有专栏： C51单片机（STC89C516），c语言，c，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux&#xf…...

编程日记 2025/7/20 15:28:10

k8s rainbond centos7/win10 -20241124

参考 https://www.rainbond.com/ 国内一站式云原生平台对centos7环境支持不太行 [lighthouseVM-16-5-centos ~]$ curl -o install.sh https://get.rainbond.com && bash ./install.sh 2024-11-24 09:56:57 ERROR: Ops! Docker daemon is not running. Start docke…...

编程日记 2025/7/20 7:50:58

ctfshow单身杯2024wp

文章目录 ctfshow单身杯2024wp签到好玩的PHPezzz_sstiez_inject ctfshow单身杯2024wp 签到好玩的PHP 考点：序列化反序列化 <?phperror_reporting(0);highlight_file(__FILE__);class ctfshow {private $d ;private $s ;private $b ;private $ctf ;public …...

编程日记 2025/7/19 19:13:44

深入解密 K 均值聚类：从理论基础到 Python 实践

1. 引言在机器学习领域，聚类是一种无监督学习的技术，用于将数据集分组成若干个类别，使得同组数据之间具有更高的相似性。这种技术在各个领域都有广泛的应用，比如客户细分、图像压缩和市场分析等。聚类的目标是使得同类样本之间的…...

编程日记 2025/7/20 14:47:33

【代码pycharm】动手学深度学习v2-08 线性回归 + 基础优化算法

课程链接线性回归的从零开始实现 import random import torch from d2l import torch as d2l# 人造数据集 def synthetic_data(w,b,num_examples):Xtorch.normal(0,1,(num_examples,len(w)))ytorch.matmul(X,w)bytorch.normal(0,0.01,y.shape) # 加入噪声return X,y.reshape…...

编程日记 2025/7/20 14:57:31

Python绘制太极八卦

文章目录系列目录写在前面技术需求1. 图形绘制库的支持2. 图形绘制功能3. 参数化设计4. 绘制控制5. 数据处理6. 用户界面完整代码代码分析1. rset() 函数2. offset() 函数3. taiji() 函数4. bagua() 函数5. 绘制过程6. 技术亮点写在后面系列目录序号直达链接爱心系列1Pyth…...

编程日记 2025/7/20 14:40:00

sklearn学习

介绍：scaler：换算的意思 1. 归一化MinMaxScaler() 归一化的意思是将一堆数，如果比较离散，为了让数据更适合模型训练，将离散的数据压缩到0到1之间，以方便模型更高效优质的学习，而对数据的预处理…...

编程日记 2025/7/20 14:50:12

# [Unity] 【游戏开发】Unity开发基础2-Unity脚本编程基础详解

Unity脚本编程是创建互动式游戏体验的核心技能之一。本文将详细讲解Unity脚本编程的基础知识，包括变量和数据类型、程序逻辑、方法等方面，并通过实例展示如何使用这些基本知识完成简单功能的实现。 1. 新建Unity脚本的基本结构当在Unity中创建一个脚本时，Unity会生成如下基…...

编程日记 2025/7/20 14:46:21

【强化学习的数学原理】第02课-贝尔曼公式-笔记

学习资料：bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接：强化学习的数学原理西湖大学赵世钰文章目录一、为什么return重要？如何计算return？二、state value的定义三、Bellman公式的详细推导四、公式向量形式…...

编程日记 2025/7/20 14:48:36

C语言-数学基础问题

一.奇数、偶数问题 1.从键盘上输入一个整数，判断并输出它是奇数还是偶数。 //从键盘上输入一个整数，判断并输出它是奇数还是偶数。 main() {int i;printf("输入一个整数:\n");scanf("%d",&i);if(i%20)printf("它是偶数\n…...

编程日记 2025/7/20 15:31:12

2024算法基础公选课练习四（综合2）

一、前言最后几个题确实有难度，这次有两题没整出来二、题目总览三、具体题目 3.1 问题 A: 水题系列1-B(班级排位) 思路最暴力的思路是写线段树，然后暴力枚举两个端点，总体时间复杂度为O(n^2*logn)最坏会到1e9的数量级，可能…...

编程日记 2025/7/20 1:19:20

小程序-使用 iconfont 图标库报错：Failed to load font

官方默认可以忽略此错误，在清除缓存后首次刷新会显示此错误，重新渲染错误消失解决方法： 在 iconfont 图标库选择项目设置选中 Base64 保存，重新点击链接 -> 复制代码到项目中操作步骤：...

编程日记 2025/7/20 18:34:41

鲸鱼机器人和乐高机器人的比较

鲸鱼机器人和乐高机器人各有其独特的优势和特点，家长在选择时可以根据孩子的年龄、兴趣、经济能力等因素进行综合考虑，选择最适合孩子的教育机器人产品。优势鲸鱼机器人 1）价格亲民：鲸鱼机器人的产品价格相对乐高更为亲民&…...

编程日记 2025/7/20 17:42:32

解决单元测试时找不到类名

场景： springboot单元测试mockito对mapper进行mock时： tk.mybatis.mapper.mapperexception: 无法获取实体类 XX.xx 对应的表名分析： 使用了一个方法：Example examplenew Example(User.class); 进入源码后发现Entityhelper没…...

编程日记 2025/7/20 18:34:41

簡單易懂：如何在Windows系統中修改IP地址？

無論是為了連接到一個新的網路，還是為了解決網路連接問題，修改IP地址都是一個常見的操作。本文將詳細介紹如何在Windows系統中修改IP地址，包括靜態IP地址的設置和動態IP地址的獲取。 IP地址是什麼？ IP地址是互聯網協議地址的簡稱…...

编程日记 2025/7/20 18:06:55

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计

简介

HTML5结构化元素

CSS3样式设计

完整代码

结论

我是风尚，梦想是带十万人创建一个风尚云网全能圈子！

相关文章：