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

风尚云网前端学习:一个简易前端新手友好的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的基本概念,并激发你创建自己的个性化网页。

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

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

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

相关文章

返回流类型接口的错误信息处理

返回流类型接口的错误信息处理 前言axios拦截器src/utils/request.ts对应接口 前言 返回流类型接口需要在响应成功回调里拦截&#xff0c;且该接口的status始终是200&#xff0c;尽管后端返回的code可能是非2xx&#xff0c;因此返回流类型的接口&#xff0c;其错误信息需要单独…

SMMU软件指南操作之翻译过程概述

安全之安全(security)博客目录导读 下图展示了每个传入事务&#xff08;transaction&#xff09;所经过的简化过程。本节描述了顶层翻译过程。 一个传入事务遵循以下步骤&#xff1a; 1. 如果 SMMU 被全局禁用&#xff0c;事务将直接通过 SMMU 而不进行任何地址改变。全局属性…

特征交叉-MaskNet文章总结代码实现

MaskNet 这个模型是微博21年提出的&#xff0c;23年twitter(X)开源的推荐系统排序模块使用的backbone结构。 核心思想是认为DNN为主的特征交叉是addictive&#xff0c;交叉效率不高&#xff1b;所以设计了一种multiplicatvie的特征交叉 如何设计muliplicative特征交叉呢&#x…

QT 实现仿制 网络调试器(未实现连接唯一性) QT5.12.3环境 C++实现

网络调试助手&#xff1a; 提前准备&#xff1a;在编写代码前&#xff0c;要在.pro工程文件中&#xff0c;添加network模块。 服务端&#xff1a; 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QtWidgets> #inclu…

Vscode写markdown快速插入python代码

如图当我按下快捷键CRTLSHIFTK 自动出现python代码片段 配置方法shortcuts’ 打开这个json文件 输入 {"key": "ctrlshiftk","command": "editor.action.insertSnippet","when": "editorTextFocus","args&…

【案例】泛微.齐业成助力北京中远大昌汽车实现数电票全流程管理

中远大昌统一发票共享平台上线三个多月以来&#xff0c;实现&#xff1a; 5000份 60000元 发票开具 成本节约 客户简介及需求分析 北京中远大昌汽车服务有限公司&#xff08;以下简称“中远大昌”&#xff09;成立于2002年&#xff0c;是中远海运集团所属香远&#xff08;北…

使用docker快速部署Nginx、Redis、MySQL、Tomcat以及制作镜像

文章目录 应用快速部署NginxRedisMySQLTomcat 制作镜像镜像原理基于已有容器创建使用 Dockerfile 创建镜像指令说明构建应用创建 Dockerfile 文件创建镜像 应用快速部署 Nginx docker run -d -p 80:80 nginx使用浏览器访问虚拟机地址 Redis docker pull redis docker run --…

雅思阅读TFNG题型7大解题思路

雅思阅读TFNG题型7大解题思路&#xff0c;全在这了‼️ ⚠️在徘徊在6-6.5的同学有很大的共性就是对题型不够熟悉&#xff0c;我记得我当时卡6.5的时候我有时候分不清NG和F&#xff0c;有时候又分不清NG 和True&#xff0c;也不知道他有哪几种考我的方法&#xff0c;脑子里没有…

家政服务系统开发,智慧家政,便捷生活

近年来&#xff0c;大众对家政服务的需求不断增加&#xff0c;家政服务种类也逐渐多样化&#xff0c;涵盖了日常生活中的各个方面&#xff0c;为大众带来更急优质的服务&#xff0c;进一步提升了家政市场的发展。 在数字化发展的推动下&#xff0c;互联网家政服务的模式应运而…

重生之我在学环境变量

环境变量 基本概念 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我们的所链接的动态静态库在哪里&#xff0c;但 是照样可以链接成功&#…

Failed to start Docker Application Container Engine

说明&#xff1a; 1&#xff09;访问应用业务&#xff0c;读取不到数据&#xff0c;show databases;查看数据库报错 2&#xff09;重启docker服务&#xff0c;服务启动失败&#xff0c;查看日志报错如下图所示 3&#xff09;报错信息&#xff1a;chmod /data/docker: read-only…

SQL 语句执行计划中的连接方式

SQL 语句执行计划中的连接方式 join操作 join操作基本分为3大类&#xff1a;外连接&#xff08;细分为&#xff1a;左连接&#xff08;Left outer join/ left join&#xff09;、右连接&#xff08;right outer join/ right join&#xff09;、全连接&#xff08;full outer …

FileProvider高版本使用,跨进程传输文件

高版本的android对文件权限的管控抓的很严格,理论上两个应用之间的文件传递现在都应该是用FileProvider去实现,这篇博客来一起了解下它的实现原理。 首先我们要明确一点,FileProvider就是一个ContentProvider,所以需要在AndroidManifest.xml里面对它进行声明: <provideran…

golang 嵌入式armv7l压缩编译打包

编译 Go 应用程序 go build -ldflags"-s -w" -o myapp.exe . 使用 UPX 压缩可执行文件&#xff08;window下载并设置环境变量&#xff09; upx --best --lzma myapp.exe 可从10M压缩到1M 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 …

45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题

点赞收藏加关注&#xff0c;你也能主打别墅&#xff01; 一、问题描述 Mac上终端运行如下命令&#xff1a; sudo npm install typescript -g //全局安装ts提示成功安装后&#xff0c;我测试tsc -v这个命令时出现如下错误&#xff1a; 也就是说找不到 tsc 命令。 二、解决方…

【图像检测】深度学习与传统算法的区别(识别逻辑、学习能力、泛化能力)

识别逻辑 深度学习 使用了端到端的学习策略&#xff0c;直接学习从图像到检测结果的映射关系&#xff0c;自动提取特征&#xff0c;并且根据特征与特征之间的关系&#xff0c;计算出检测结果。 传统算法 则是人工提取特征&#xff0c;比如边缘特征&#xff0c;直线特征&#x…

sysbench压测DM的高可用切换测试

一、配置集群 1. 配置svc.conf [rootlocalhost dm]# cat /etc/dm_svc.conf TIME_ZONE(480) LANGUAGE(CN)DM(192.168.112.139:5236,192.168.112.140:5236) [DM] LOGIN_MODE(1) SWITCH_TIME(300) SWITCH_INTERVAL(200)二、编译sysbench 2.1 配置环境变量 [dmdba~]# vi ~/.bas…

【网络】网络抓包与协议分析

网络抓包与协议分析 一. 以太网帧格式分析 这是以太网数据帧的基本格式&#xff0c;包含目的地址(6 Byte)、源地址(6 Byte)、类型(2 Byte)、数据(46~1500 Byte)、FCS(4 Byte)。 Mac 地址类型 分为单播地址、组播地址、广播地址。 单播地址&#xff1a;是指第一个字节的最低位…

安宝特方案 | AR助力紧急救援,科技守卫生命每一刻!

在生死时速的紧急救援战场上&#xff0c;每一秒都至关重要&#xff01;随着科技的发展&#xff0c;增强现实&#xff08;AR&#xff09;技术正在逐步渗透到医疗健康领域&#xff0c;改变着传统的医疗服务模式。 安宝特AR远程协助解决方案&#xff0c;凭借其先进的技术支持和创新…

2025职业院校技能大赛信息安全管理与评估(河北省) 任务书

2025职业院校技能大赛信息安全管理与评估--河北省 任务书 模块一网络平台搭建与设备安全防护任务1&#xff1a;网络平台搭建 &#xff08;50分&#xff09;任务2&#xff1a;网络安全设备配置与防护&#xff08;250分&#xff09; 模块二网络安全事件响应、数字取证调查、应用程…