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

Web前端-设计网站公共header

设计网站公共header

header元素是一个具有引导和导航作用的结构元素,很多企业网站中都有一个非常重要的header元素,一般位于网页的开头,用来显示企业名称、企业logo图片、整个网站的导航条,以及Flash形式的广告条等。

在本网站中,header元素中的内容包括网站的logo图片、网站的导航以及通过jQuery技术来循环显示的特色图片,同时还为这些图片添加了说明性关键字。header元素中的内容在浏览器中的显示结果如图23.9所示。

图23.9 旅游信息网header元素在浏览器中的显示

网站公共部分的header元素的结构示意图如图23.10所示。

图23.10 公共部分header元素的结构示意图

1.header元素中显示网站名称的代码分析

在div中存放网站的名称及logo图片,它在浏览器中的页面显示。

图23.11 网站logo及名称的显示

div元素主要是显示页面左边的logo图片,同时通过<h2></h2>显示网站的名称“我爱长春”,并通过<strong>属性对“长春”两个字进行了加粗。其实现的代码如下。

<div class="logo">

<h2>我爱<strong>长春</strong> </h2>

</div>

接下来看一下对网站logo实现CSS样式的设计,代码如下。

上述的CSS代码的主要作用如下。

 对header元素中logo整体样式的设计,其中包括添加logo的图片、设置补白像素值、设置logo显示的宽度。

 设置网站名称的字体大小、字体风格为斜体、字体加粗、字体颜色等。

https://www.bilibili.com/video/BV1754y1N776/?p=2&spm_id_from=pageDriver&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c

相关文章:

Web前端-设计网站公共header

设计网站公共headerheader元素是一个具有引导和导航作用的结构元素&#xff0c;很多企业网站中都有一个非常重要的header元素&#xff0c;一般位于网页的开头&#xff0c;用来显示企业名称、企业logo图片、整个网站的导航条&#xff0c;以及Flash形式的广告条等。在本网站中&am…...

引用和指针傻傻分不清

&#x1f680;&#x1f680;&#x1f680;大家觉不错的话&#xff0c;就恳求大家点点关注&#xff0c;点点小爱心&#xff0c;指点指点&#x1f680;&#x1f680;&#x1f680; 目录 &#x1f430;引用和指针的区别 &#x1f338;从现象上看 &#x1f338;从编译上看 &am…...

MySQL面试题:关系型数据库SQL和非关系型数据库NoSQL

文章目录一、四大非关系型数据库与关系型数据库的对比1. 关系型数据库2. 基于列的数据库3. 键值对存储4. 文档存储5. 图形数据库参考文章&#xff08;金文&#xff09;&#xff1a;四大非关系型数据库类型&#xff0c;你知道多少 参考文章&#xff1a;“行式存储”和“列式存储…...

1.Redis【介绍与安装】

1.常用数据库介绍 mysql的表类型[表引擎.存储引擎],memory表结构和表数据分开存储的,表结构保存在硬盘中,表数据保存在内存中memcache是一款软件,可以使用键值对的格式保存数据到内存中redis是意大利的工程师开发的开源免费的告诉缓存数据库,需要注意的是作者本身只开发了linu…...

DataStore快速上手1-preference

DataStore 概念 DataStore 可以存储两种类型的数据&#xff0c;一种是 preference&#xff0c;一种是 protobuf 每个进程在同一时间内仅能打开一个 DataStore 实例&#xff08;或者通过其他管理手段来实现多个 DataStore 交替使用&#xff09; 一个 DataStore 可以视为一张数…...

彻底掌握 MySQL InnoDB 的锁机制

本文是对沈剑大佬锁机制十多篇文章的概括总结&#xff0c;文末有全部链接&#xff0c;还参考了 10 多位其他网友的优秀分享。 1、概要 MySQL 中的锁可以按照粒度分为锁定整个表的表级锁(table-level locking)和锁定数据行的行级锁(row-level locking)&#xff1a; 表级锁具有开…...

C++继承

1.继承的概念及定义 1.1继承的概念 继承机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承呈现了面向对象程序设计的层次结构&#x…...

动态代理是基于什么原理?

第6讲 | 动态代理是基于什么原理&#xff1f; 编程语言通常有各种不同的分类角度&#xff0c;动态类型和静态类型就是其中一种分类角度&#xff0c;简单区分就是语言类型信息是在运行时检查&#xff0c;还是编译期检查。 与其近似的还有一个对比&#xff0c;就是所谓强类型和弱…...

YOLO-V4经典物体检测算法介绍

在前文我们介绍了YOLO-V1~V3版本都做了哪些事&#xff0c;本文我们继续介绍YOLO-V4版本。YOLO的作者在发表完V3之后&#xff0c;发现YOLO产品被美国军方应用到了很多军事战争当中&#xff0c;这是他所不希望看见的&#xff0c;因此宣布不再继续研究。但历史和科技总是随时间不断…...

angular相关知识点总结

创建 angualr 组件和传值 angular组件其实就是个xxx.component.ts,本质还是ts文件一个html文件 1.创建组件&#xff1a;在Angular中&#xff0c;可以使用命令行工具ng generate component创建一个新组件。例如&#xff1a; ng generate component my-component这将创建一个名…...

大坝安全监测系统:水库“守坝人”!

一、项目背景 随着社会经济的迅速发展&#xff0c;我国水资源利用率越来越高&#xff0c;各类水利水电工规模进一步扩大。在抗洪救灾、水利发电等方面带来巨大的经济和社会效益。但受多种因素影响&#xff0c;大坝的安全问题日益严重。大量工程实践证明&#xff0c;为保证大坝…...

CentOS7安装配置OpenVNP连接远端服务器

在项目当中需要访问一个三方接口及数据库&#xff0c;但是需要在CentOS7服务器上先配置OpenVPN&#xff0c;然后才能连接&#xff0c;现将整体配置过程记录如下。 安装 yum -y install epel-release yum -y install openvpn 查看版本 openvpn --version 配置客户端证书 打开…...

04- Matplotlib数据可视化详解 (数据库)

Matplotlib的亮点: import matplotlib.pyplot as plt # 导包plt.figure(figsize (9, 6) , 设置图片大小plt. plot(x, y), 画图绘制网格线: 线型, 颜色, 透明度plt.grid(linestyle --, color green, alpha0.75) # linestyle: 样式, color: 颜色, alpha: 透明度plt.axis(…...

高性能MySQL -- 查询性能优化

一般来说一个好的程序&#xff1a;查询优化&#xff0c;索引优化&#xff0c;库表结构要同时进行优化。今天我们来讲一下查询优化。 我们需要对MySQL的架构有基本认知&#xff0c;所以这里贴一张图大家看看&#xff1a; 图片来自于《小林coding》 为什么从查询会慢&#xff1…...

Android Binder机制之一(简介)

目录 前言 一、Android 进程间通信方式 二、Binder架构图 三、Binder涉及角色 3.1 Binder驱动 3.2 Binder实体 3.3 Binder引用 3.4 远程服务 3.5 ServiceManager守护进程 四、涉及源码 前言 这是本人第N次看Binder 相关知识了&#xff0c;其实每次看都有新的收获&…...

《SOC芯片研究框架》深度科普,发展趋势、技术特点、产业链一文看懂

片上系统SoC&#xff08;System on Chip&#xff09;&#xff0c;即在一块芯片上集成一整个信息处理系统&#xff0c;简单来说 SoC芯片是在中央处理器CPU的基础上扩展音视频功能和专用接口的超大规模集成电路&#xff0c;是智能设备的“大脑”。随着半导体工艺的发展&#xff0…...

WebRTC中的ICE

ICE简介 ICE是用于UDP媒体传输的NAT穿透协议&#xff08;适当扩展也可以支持TCP&#xff09;&#xff0c;它需要利用STUN和TURN协议来完成工作。 STUN协议提供了获取一个内网地址对应的公网地址映射关系&#xff08;NAT Binding&#xff09;的机制&#xff0c;并且提供了它们…...

了解webpack

文章目录一、webpack是什么&#xff1f;二、为什么要使用webpack三、webpack的五个核心概念四、安装webpack提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、webpack是什么&#xff1f; 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程…...

NoSQL数据库详细介绍

一、NoSQL发展历史 NoSQL 一词最早出现于 1998 年&#xff0c;是 Carlo Strozzi 开发的一个轻量、开源、不提供 SQL 功能的关系数据库。 2009 年&#xff0c;Last.fm 的 Johan Oskarsson 发起了一次关于分布式开源数据库的讨论&#xff0c;来自 Rackspace 的 Eric Evans 再次…...

【2023】华为OD机试真题Java-题目0210-优秀学员统计

优秀学员统计 题目描述 公司某部门软件教导团正在组织新员工每日打卡学习活动,他们开展这项学习活动已经一个月了,所以想统计下这个月优秀的打卡员工。 每个员工会对应一个id,每天的打卡记录记录当天打卡员工的id集合,一共30天。 请你实现代码帮助统计出打卡次数top5的员…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...