「前端+鸿蒙」核心技术HTML5+CSS3(九)

以一个产品网站为例,以下是每个部分的HTML结构和CSS样式的完整代码示例。

1、顶部导航条

顶部导航条通常包含网站的联系信息或者一些导航链接。

HTML:

<div id="top-nav"><ul><li><a href="#">联系方式</a></li><li><a href="#">帮助中心</a></li><li><a href="#">登录</a></li></ul>
</div>

CSS:

#top-nav {background-color: #333;color: #fff;text-align: right;padding: 10px 20px;
}
#top-nav ul {list-style: none;padding: 0;margin: 0;
}
#top-nav li {display: inline;margin-left: 20px;
}
#top-nav a {color: #fff;text-decoration: none;
}

2、头部

头部包含网站的Logo和可能的标语。

HTML:

<header><div class="logo">产品网站Logo</div><div class="tagline">优质产品,尽在这里</div>
</header>

CSS:

header {background-color: #444;color: #fff;padding: 20px 0;text-align: center;
}
.logo {font-size: 2em;
}
.tagline {font-size: 1em;
}

3、主导航

主导航是网站的导航栏,包含指向网站主要部分的链接。

HTML:

<nav id="main-nav"><ul><li><a href="#">首页

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

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

相关文章

国产操作系统上Vim的详解01--vim基础篇 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;国产操作系统上Vim的详解01–vim基础篇 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在国产操作系统上使用Vim的详解文章。Vim是一款功能强大且高度可定制的文本编辑器&#xff0c;广泛应用于编程和日常文本编辑中。…

记一次cms代码审计

000&#xff1a;前言 记录一次小型cms代码审计 001&#xff1a;任意文件删除 由于代码繁杂&#xff0c;不再一一展示 /app/controller/kindeditor.class.php 关键漏洞代码 public function delete() {$path ROOT_PATH.$_GET[pic];unlink($path);$flash M("flash&qu…

Postgre数据库初探

一、PostgreSQL介绍 PostgreSQL是以加州大学伯克利分校计算机系开发的POSTGRES&#xff0c; 版本 4.2为基础的对象关系型数据库管理系统&#xff08;ORDBMS&#xff09;。POSTGRES 领先的许多概念在很久以后才出现在一些商业数据库系统中。 PostgreSQL是最初的伯克利代码的开…

vscode编译c/c++找不到jni.h文件

解决办法: 一、下载JDK 访问Oracle官网的Java下载页面&#xff1a;Java Downloads | Oracle 选择适合您操作系统的JDK版本&#xff1a; 对于Windows&#xff0c;选择“Windows x64”或“Windows x86”&#xff08;取决于您的系统是64位还是32位&#xff09;。对于Linux&#…

代码随想录-算法训练营day59【单调栈02:下一个更大元素II、接雨水】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第十章 单调栈part02● 503.下一个更大元素II ● 42. 接雨水 详细布置 503.下一个更大元素II 这道题和 739. 每日温度 几乎如出一辙,可以自己尝试做一做https://programmercarl.com/0503.%E4%B8%8B%E4%B8%80%E4%B8%…

Linux文件操作(二)

目录 1、Linux下文件查找命令 2、Linux下文件压缩工具 3、Linux下文件打包工具 一、Linux下文件查找命令 命令查找 Linux下一切皆文件&#xff01; which 命令&#xff1a;找出命令的绝对路径 whereis 命令&#xff1a;找出命令的路径以及文档手册信息 [rootlocalhost ~]…

筑牢科技与人才“护城河”,泸州老窖构建创新新生态

执笔 | 姜 姜 编辑 | 扬 灵 5月30日&#xff0c;以“‘数智’启新篇 ‘新质’酿未来”为主题的泸州老窖2024年科技和人才工作大会在泸州召开&#xff0c;再次让行业看到了近十年来泸州老窖科技人才布局与培养的显著成果&#xff0c;以及泸州老窖传承700年的人才力量。 表彰创新…

【接金币game】

接金币游戏是一种常见的简单游戏&#xff0c;玩家通过移动一个角色&#xff08;比如一个篮子或者人物&#xff09;来接住屏幕上方掉落的金币。以下是一个简单的接金币游戏程序的编写思路&#xff0c;我们将使用Python语言&#xff0c;并假设您使用的是Pygame库&#xff0c;这是…

RPM包方式离线部署gitlab

下载安装包 要求&#xff1a;可以联网&#xff0c;系统及版本与目标服务器一致。配置gitlab yum仓库 curl -s https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.rpm.sh | sudo bash 新建包存放目录 mkdir /root/gitlab 下载gitlab及相关安装包 …

【TB作品】MSP430G2553 单片机口袋板,DAC波形发生器

功能 DAC波形发生器 按键切换波形&#xff0c;正弦波、三角波、锯齿波、方波。 部分代码 const unsigned int zhengxian[101] { 32767, 34824, 36874, 38907, 40916, 42893,44830, 46719, 48553, 50325, 52027, 53654, 55198, 56653, 58015, 59276,60434, 61481, 62416, 63…

移动端input输入时底部按钮被虚拟键盘顶上解决办法

前言 遇到了在输入框输入时底部按钮被虚拟键盘上去的问题&#xff0c;把解决办法分享一下 解决办法 文本通过监听页面高度的变化对按钮进行隐藏控制 代码实现 import React, {useState } from "react";const BottomView ({ children, ...props }: any) > {c…

记录遇见的小问题

1&#xff0c;angularjs 使用bootstrap时&#xff0c;遇见模态框怎么点击空白处不关闭&#xff1b; <div id"dialog-modal" data-backdrop"static" data-keyboard"false"> 但是在实际使用过程中调用了一个html 需要在 js里加 $scope.Up…

老赛棍版端口,扫别人没扫到的资产

0x001 获取目标信息 因为某些敏感原因&#xff0c;这部分干脆以长沙为例&#xff0c;仅做查询方式参考。首先FOFA搜&#xff1a;region"Hunan" && city"Changsha"&#xff0c;全部转换为C段后去重&#xff0c;就得到该城市的大致网段&#xff1a;…

MR混合现实情景实训教学系统在消防课堂上的应用

MR混合现实情景实训教学系统在消防课堂上的应用具有很大的优势。它能够为学生提供一种沉浸式的体验&#xff0c;让他们更好地理解和掌握消防知识和技能。 1、模拟火灾现场&#xff1a;通过MR技术&#xff0c;可以创建逼真的火灾现场&#xff0c;让学生亲身体验火灾的危害和紧急…

Android O Camera深度研究

目录 Adnroid O之前的Android camera软件框架 Adnroid O camera软件框架 Passthrough Mode Binderized mode Wrapper shim for libhardware HALs Wrapper shim for libhardware HALs Customized Treble Camera HAL/framework Camera HAL transition and removal plan …

Android精通值Fragment的使用 —— 不含底层逻辑(五)

1. Fragment 使用Fragment的目标&#xff1a;根据列表动态显示内容&#xff0c;更简洁显示界面、查找界面 eg. 使用新闻列表动态显示新闻 1.1 Fragment的特性 具备生命周期 —— 可以动态地移除一些Fragment必须委托在Activity中使用可以在Activity中进行复用 1.2 Fragmen…

新鲜速递:图解新颖LLM的CoPE位置编码

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提供了大模型领域最新技…

基于docker的oracle12.2.0.1部署及oracle使用与docker镜像容器制作迁移方法

基于docker的oracle12.2.0.1部署及oracle使用与docker镜像容器制作迁移方法 本文介绍了基于docker的oracle12.2.0.1部署&#xff0c;包含了oracle基本配置、监听器和实例启动方法、PDB和CDB操作方法、表空间建立和用户数据库建立、常见启动问题解决等&#xff0c;并介绍了镜像制…

二、go微服务项目“商城项目实战开发”第二步grpc和gin的直连调用

文章目录 商城项目实战开发-GRPC和GIN的直连调用01、本次课程微服务的技术栈02、用户服务接口定义和实现登录1、密码问题01、MD5的方式02、加盐的方式03、动态盐04、使用加盐框架passwordEncoder2、用户服务接口的暴露3、Grpc的实现步骤1.定义暴露接口2.编写user的调用文件3.编…

YOLOv8_obb预测流程-原理解析[旋转目标检测理论篇]

YOLOv8_obb的预测流程,主要分预处理模块、推理模块和后处理模块。这里面有很多内容是和目标检测预测流程是重合的,主要区别在于Angle分支、NMS后处理以及regularize_rboxes部分。本文也主要介绍一下这三个模块,其他模块可以结合YOLOv8预测流程-原理解析[目标检测理论篇]一起…