风尚云网前端学习:一个简易前端新手友好的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.rhkb.cn/news/478720.html

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

相关文章

django authentication 登录注册

文章目录 前言一、django配置二、后端实现1.新建app2.编写view3.配置路由 三、前端编写1、index.html2、register.html3、 login.html 总结 前言 之前&#xff0c;写了django制作简易登录系统&#xff0c;这次利用django内置的authentication功能实现注册、登录 提示&#xff…

ctfshow单身杯2024wp

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

ISUP协议视频平台EasyCVR萤石设备视频接入平台银行营业网点安全防范系统解决方案

在金融行业&#xff0c;银行营业厅的安全保卫工作至关重要&#xff0c;它不仅关系到客户资金的安全&#xff0c;也关系到整个银行的信誉和运营效率。随着科技的发展&#xff0c;传统的安全防护措施已经无法满足现代银行对于高效、智能化安全管理的需求。 EasyCVR视频汇聚平台以…

【代码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…

zotero安卓测试版下载和使用

2023年年底&#xff0c;Zotero官方就已经推出了安卓版的测试版Zotero for Android (beta),&#xff0c;但名额有限且只能通过Google商店下载。此外&#xff0c;还有一些第三方开发的安卓应用&#xff0c;如Zoo for Zotero、ZotDroid等。 在首次使用Zotero安卓版时&#xff0c;用…

基于FPGA的2FSK调制-串口收发-带tb仿真文件-实际上板验证成功

基于FPGA的2FSK调制 前言一、2FSK储备知识二、代码分析1.模块分析2.波形分析 总结 前言 设计实现连续相位 2FSK 调制器&#xff0c;2FSK 的两个频率为:fI15KHz&#xff0c;f23KHz&#xff0c;波特率为 1500 bps,比特0映射为f 载波&#xff0c;比特1映射为 载波。 1&#xff09…

Matlab 深度学习 PINN测试与学习

PINN 与传统神经网络的区别 与传统神经网络的不同之处在于&#xff0c;PINN 能够以微分方程形式纳入有关问题的先验专业知识。这些附加信息使 PINN 能够在给定的测量数据之外作出更准确的预测。此外&#xff0c;额外的物理知识还能在存在含噪测量数据的情况下对预测解进行正则…

【JavaScript】JavaScript开篇基础(7)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

JavaScript的基础数据类型

一、JavaScript中的数组 定义 数组是一种特殊的对象&#xff0c;用于存储多个值。在JavaScript中&#xff0c;数组可以包含不同的数据类型&#xff0c;如数字、字符串、对象、甚至其他数组。数组的创建有两种常见方式&#xff1a; 字面量表示法&#xff1a;let fruits [apple…

WebSocket详解、WebSocket入门案例

目录 1.1 WebSocket介绍 http协议&#xff1a; webSocket协议&#xff1a; 1.2WebSocket协议&#xff1a; 1.3客户端&#xff08;浏览器&#xff09;实现 1.3.2 WebSocket对象的相关事宜&#xff1a; 1.3.3 WebSOcket方法 1.4 服务端实现 服务端如何接收客户端发送的请…

周志华深度森林deep forest(deep-forest)最新可安装教程,仅需在pycharm中完成,超简单安装教程

1、打开pycharm 没有pycharm的&#xff0c;在站内搜索安装教程即可。 2、点击“文件”“新建项目” 3、创建项目&#xff0c;Python版本中选择Python39。如果没有该版本&#xff0c;选择下面的Python 3.9下载并安装。 4、打开软件包&#xff0c;搜索“deep-forest”软件包&am…

ES 和Kibana-v2 带用户登录验证

1. 前言 ElasticSearch、可视化操作工具Kibana。如果你是Linux centos系统的话&#xff0c;下面的指令可以一路CV完成服务的部署。 2. 服务搭建 2.1. 部署ElasticSearch 拉取docker镜像 docker pull elasticsearch:7.17.21 创建挂载卷目录 mkdir /**/es-data -p mkdir /**/…

分布式kettle调度平台v6.4.0新功能介绍

介绍 Kettle&#xff08;也称为Pentaho Data Integration&#xff09;是一款开源的ETL&#xff08;Extract, Transform, Load&#xff09;工具&#xff0c;由Pentaho&#xff08;现为Hitachi Vantara&#xff09;开发和维护。它提供了一套强大的数据集成和转换功能&#xff0c…

力扣hot100-->排序

排序 1. 56. 合并区间 中等 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输…

.net 8使用hangfire实现库存同步任务

C# 使用HangFire 第一章:.net Framework 4.6 WebAPI 使用Hangfire 第二章:net 8使用hangfire实现库存同步任务 文章目录 C# 使用HangFire前言项目源码一、项目架构二、项目服务介绍HangFire服务结构解析HangfireCollectionExtensions 类ModelHangfireSettingsHttpAuthInfoUs…

滑动窗口最大值(java)

题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a;nums [1,3,-1,-3,5,3,6,7]…

springboot项目使用maven打包,第三方jar问题

springboot项目使用maven package打包为可执行jar后&#xff0c;第三方jar会被打包进去吗&#xff1f; 答案是肯定的。做了实验如下&#xff1a; 第三方jar的项目结构及jar包结构如下&#xff1a;&#xff08;该第三方jar采用的是maven工程&#xff0c;打包为普通jar&#xf…

常用Rust日志处理工具教程

在本文中&#xff0c;我想讨论Rust中的日志。通过一些背景信息&#xff0c;我将带您了解两个日志库&#xff1a;env_logger和log4rs。最后&#xff0c;我将分享我的建议和github的片段。 Rust log介绍 log包是Rust中日志API的事实标准&#xff0c;共有五个日志级别&#xff1…

嵌入式的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…

时间请求参数、响应

&#xff08;7&#xff09;时间请求参数 1.默认格式转换 控制器 RequestMapping("/commonDate") ResponseBody public String commonDate(Date date){System.out.println("默认格式时间参数 date > "date);return "{module : commonDate}"; }…