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

写静态页面——魅族导航_前端页面练习

news 2026/3/28 14:24:15

0、效果：

在这里插入图片描述

1、html代码：：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航栏</title><link rel="stylesheet" href="./CSS/全局样式.css"><link rel="stylesheet" href="./CSS/魅族导航栏.css">
</head>
<body><div class="BeiJin"><div class="daoHang"><ul><li><a href="">手机</a></li><li><a href="">MYVU</a></li><li><a href="">PANDAER</a></li><li><a href="">Flyme</a></li><li><a href="">无界智行</a></li><li><a href="">服务/门店</a></li><li><a href="">社区</a></li><li><a href="">集团官网</a></li><li><a href="">APP下载</a></li><li><a href=""><table><input type="text"></table></a></li></ul></div></div>
</body>
</html>

2、CSS代码：

  • 魅族导航栏
.BeiJin{height: 680px;background-image: url(../图片/2-4.webp);}
.daoHang{width:796.92px;height: 82px;margin: 0 auto;}
.daoHang li{float: left;padding: 31px 20px 30px;font-size: 14px;font-family: Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti;}
/* 设置字体颜色 */
.daoHang a{color: #fff;}
/* 设置字体悬停时的颜色 */
.daoHang a:hover{color: #008cff;}
  • 全局样式
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,button,p,blockquote,th,td{margin:0;padding:0;}
li{list-style-type:none;}
a{text-decoration:none;}
img,input,button{border:none;vertical-align:middle;}
*{font-weight:400;font-style: normal;}
body{text-align: center;}

相关文章：

写静态页面——魅族导航_前端页面练习

0、效果&#xff1a; 1、html代码&#xff1a;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2024/1/29 8:08:12

Go 命令行解析 flag 包之快速上手

本篇文章是 Go 标准库 flag 包的快速上手篇。 概述 开发一个命令行工具&#xff0c;视复杂程度&#xff0c;一般要选择一个合适的命令行解析库&#xff0c;简单的需求用 Go 标准库 flag 就够了&#xff0c;flag 的使用非常简单。 当然&#xff0c;除了标准库 flag 外&#x…...

编程日记 2024/1/29 8:07:11

React16源码: React中commitAllHostEffects内部的commitDeletion的源码实现

commitDeletion 1 &#xff09;概述 在 react commit 阶段的 commitRoot 第二个while循环中调用了 commitAllHostEffects&#xff0c;这个函数不仅仅处理了新增节点&#xff0c;更新节点最后一个操作&#xff0c;就是删除节点&#xff0c;就需要调用 commitDeletion&#xff0…...

编程日记 2024/1/29 8:05:09

[机器学习]简单线性回归——梯度下降法

一.梯度下降法概念 2.代码实现 # 0. 引入依赖 import numpy as np import matplotlib.pyplot as plt# 1. 导入数据&#xff08;data.csv&#xff09; points np.genfromtxt(data.csv, delimiter,) points[0,0]# 提取points中的两列数据&#xff0c;分别作为x&#xff0c;y …...

编程日记 2024/1/29 8:04:08

2024年搭建幻兽帕鲁服务器价格多少？如何自建Palworld？

自建幻兽帕鲁服务器租用价格表&#xff0c;2024阿里云推出专属幻兽帕鲁Palworld游戏优惠服务器&#xff0c;配置分为4核16G和4核32G服务器&#xff0c;4核16G配置32.25元/1个月、3M带宽96.75元/1个月、8核32G配置10M带宽90.60元/1个月&#xff0c;8核32G配置3个月271.80元。ECS…...

编程日记 2024/1/29 7:56:00

『OpenCV-Python|鼠标作画笔』

Opencv-Python教程链接&#xff1a;https://opencv-python-tutorials.readthedocs.io/ 本文主要介绍OpenCV-Python如何将鼠标作画笔绘制圆或者矩形。 示例一&#xff1a;图片上双击的位置绘制一个圆圈 首先创建一个鼠标事件回调函数&#xff0c;鼠标事件发生时就会被执行。鼠标…...

编程日记 2024/1/29 7:46:52

关于如何利用ChatGPT提高编程效率的

自从去年ChatGPT3.5推出以后&#xff0c;这一年时间在编程过程中我也在慢慢熟悉人工智能的使用&#xff0c;目前来看即使是免费的ChatGPT3.5对于编程效率的提升也是有很大帮助的&#xff0c;虽然在使用过程中确实出现了一些问题&#xff0c;本文记录下我的一些心得体会和用法。…...

编程日记 2024/1/29 7:44:50

Excel VBA ——从MySQL数据库中导出一个报表-笔记

本文主要涉及&#xff1a; VBA中数据库连接参数改成从配置文件获取 VBA连接MySQL数据库 VBA读MySQL数据库 演示两种写入工作簿的代码实现系统环境&#xff1a; Windows 10 64bit Excel 365 64bit WAMP&#xff08;3.2.2.2 64bit&#xff09;集成的MariaDB版本为10.4.10&#…...

编程日记 2024/1/29 7:42:49

金融OCR领域实习日志（一）——OCR技术从0到1全面调研

一、OCR基础 任务要求&#xff1a; 工作原理 OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;是指电子设备&#xff08;例如扫描仪或数码相&#xff09;检查纸上打印的字符&#xff0c;经过检测暗、亮的模式肯定其形状&#xff0c;而后用…...

编程日记 2024/1/29 7:34:41

ELK日志解决方案

ELK日志解决方案 ELK套件日志系统应该是Elasticsearch使用最广泛的场景之一了&#xff0c;Elasticsearch支持海量数据的存储和查询&#xff0c;特别适合日志搜索场景。广泛使用的ELK套件(Elasticsearch、Logstash、Kibana)是日志系统最经典的案例&#xff0c;使用Logstash和Be…...

编程日记 2024/1/29 7:33:40

嵌入式学习-驱动

嵌入式的一些基本概念 CPU与MCU的区别 CPU&#xff08;中央处理器&#xff0c;central processing unit) 指集成了运算器、控制器、寄存器、高速缓存等功能模块的芯片&#xff0c;负责执行计算机程序指令的处理器。MCU&#xff08;单片微型计算机或单片机&#xff0c;microco…...

编程日记 2024/1/29 7:32:39

系统架构17 - 软件工程（5）

软件工程 软件测试测试原则测试方法静态测试动态测试黑盒测试白盒测试灰盒测试自动化测试 测试阶段单元测试集成测试系统测试性能测试验收测试其它测试AB测试Web测试链接测试表单测试 测试用例设计黑盒测试用例白盒测试用例 调试 系统维护遗留系统系统转换转换方式数据转换与迁…...

编程日记 2024/1/29 7:27:33

空气质量预测 | Python实现基于线性回归、Lasso回归、岭回归、决策树回归的空气质量预测模型

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 政府机构使用空气质量指数 (AQI) 向公众传达当前空气污染程度或预测空气污染程度。 随着 AQI 的上升，公共卫生风险也会增加。 不同国家有自己的空气质量指数，对应不同国家的空气质量标准。 对于空气质量预测，…...

编程日记 2024/1/29 7:24:30

MYSQL数据库基本操作-DQL-基本查询

一.概念 数据库管理系统一个重要功能就是数据查询。数据查询不应是简单返回数据库中存储的数据&#xff0c;还应该根据需要对数据进行筛选以及确定数据以什么样的格式显示。 MySQL提供了功能强大&#xff0c;灵活的语句来实现这些操作。 MySQL数据库使用select语句来查询数据…...

编程日记 2024/1/29 7:22:28

gdb 调试 - 在vscode图形化展示在远程的gdb debug过程

前言 本地机器的操作系统是windows&#xff0c;远程机器的操作系统是linux&#xff0c;开发在远程机器完成&#xff0c;本地只能通过ssh登录到远程。现在目的是要在本地进行图形化展示在远程的gdb debug过程。&#xff08;注意这并不是gdb remote &#xff01;&#xff01;&am…...

编程日记 2024/1/29 7:21:27

Android 13.0 SystemUI下拉状态栏定制二 锁屏页面横竖屏时钟都居中功能实现二

1.前言 在13.0的系统rom定制化开发中，在关于systemui的锁屏页面功能定制中，由于在平板横屏锁屏功能中，时钟显示的很大，并且是在左旁边居中显示的， 由于需要和竖屏显示一样，所以就需要用到小时钟显示，然后同样需要居中，所以就来分析下相关的源码，来实现具体的功能 如图…...

编程日记 2024/1/29 7:20:26

docker 部署xxl-job

docker 部署xxl-job XXL-JOB github地址 https://github.com/xuxueli/xxl-job XXL-JOB 文档地址 https://www.xuxueli.com/xxl-job/ XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品…...

编程日记 2024/1/29 7:14:21

Kafka（九）跨集群数据镜像

目录 1 跨集群镜像的应用场景1.1 区域集群和中心集群1.2 高可用(HA)和灾备(DR)1.3 监管与合规1.4 云迁移1.5 聚合边缘集群的数据 2 多集群架构2.1 星型架构2.2 双活架构2.2 主备架构2.2.1 如何实现Kafka集群的故障转移2.2.1.1 故障转移包括的内容1. 灾难恢复计划2. 非计划内的故…...

编程日记 2024/1/29 7:12:19

第3讲 谈谈final、finally、 finalize有什么不同？

参考 三者区别 final final 是 java 关键字可修饰变量&#xff08;类成员变量、类静态变量、局部变量和形参&#xff09;&#xff1a;表示不可修改当前变量的值&#xff08;这里的值可以是地址&#xff0c;也可以是基本类型的值&#xff09;#&#xff08;注意&#xff1a;fi…...

编程日记 2024/1/29 7:09:16

MC3172 串口模块

MC3172 支持12个串口对应关系如下 串口模块初始化 第一个是uart0~11 inpin RX 脚 管脚号 outpin TX脚 管脚号 baud 波特率 read_ptr ,数据读取指针 void uart_init(u32 uart_num,u8 in_pin,u8 out_pin,u32 baud,u8* read_ptr) {INTDEV_SET_CLK_RST(uart_num,(INTDEV_RUN|…...

编程日记 2024/1/29 7:01:09

Meixiong Niannian画图引擎Typora集成：Markdown文档图像生成

Meixiong Niannian画图引擎Typora集成&#xff1a;Markdown文档图像生成 1. 为什么文档作者需要在Typora里直接画图&#xff1f; 你有没有过这样的经历&#xff1a;写技术文档时&#xff0c;突然需要一张示意图来说明某个流程&#xff1b;写产品需求时&#xff0c;想快速画个…...

编程新知 2026/3/28 14:12:36

从“马斯克算法”中学到的 5 个硬核生存准则，如何颠覆平庸的终极护城河

你以为靠类比就能成功&#xff1f;其实马斯克的5条物理算法才是颠覆平庸的终极护城河作为一名深耕代码、产品迭代和系统架构的开发者&#xff0c;我曾经也深陷大多数人的陷阱&#xff1a;面对新需求&#xff0c;第一反应就是翻竞品案例、套行业模板&#xff0c;然后埋头优化流程…...

编程新知 2026/3/28 13:58:33

SillyTavern角色系统全解析：从基础构建到高级定制

SillyTavern角色系统全解析&#xff1a;从基础构建到高级定制 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 引言&#xff1a;当AI角色拥有"灵魂" 想象一下&#xff0c;你正在…...

编程新知 2026/3/28 13:14:07

睿尔曼超轻量仿人机械臂--控制器与末端接口深度解析

1. 睿尔曼机械臂接口设计理念解析 第一次拿到睿尔曼机械臂时&#xff0c;最让我惊讶的是它的极简设计——传统机械臂必备的控制柜、示教器和缠绕的线缆统统不见了&#xff0c;整个系统就只有一个机械臂本体。这种高度集成化的设计背后&#xff0c;其实隐藏着两个关键接口模块&a…...

编程新知 2026/3/28 13:04:05

Spring Boot项目里Redis连接总报错？从配置到调试的完整避坑指南（附Redis 6+密码问题）

Spring Boot项目Redis连接报错全解析&#xff1a;从配置陷阱到高效调试 Redis作为Spring Boot项目中最常用的缓存组件&#xff0c;连接报错却是开发者最常遇到的"拦路虎"。明明按照文档配置了参数&#xff0c;却总是遇到Connection refused、NOAUTH Authentication r…...

编程新知 2026/3/28 11:41:33

AI选型与配置：让快马智能推荐npm包并生成个人博客系统前端代码

最近在尝试用AI辅助开发个人博客系统&#xff0c;发现整个过程比想象中顺畅很多。特别是依赖管理和技术选型这个环节&#xff0c;AI能帮我们省去大量查文档和试错的时间。下面记录下我的实践过程&#xff0c;或许对同样想快速搭建博客的朋友有帮助。 需求明确化阶段 首先需要…...

编程新知 2026/3/28 9:46:31

NVIDIA GPU监控效能深度解析：nvitop如何破解多用户环境资源管理难题

NVIDIA GPU监控效能深度解析&#xff1a;nvitop如何破解多用户环境资源管理难题 【免费下载链接】nvitop An interactive NVIDIA-GPU process viewer and beyond, the one-stop solution for GPU process management. 项目地址: https://gitcode.com/gh_mirrors/nv/nvitop …...

编程新知 2026/3/28 9:38:28

工业通信系统安装：从网络架构到现场落地的完整技术指南

一、什么是工业通信系统安装&#xff1f;为什么它比普通弱电施工要求更高&#xff1f;工业通信系统安装&#xff0c;指的是围绕工业生产场景&#xff0c;对控制层、监控层、管理层之间的数据传输链路进行规划、布线、接线、组网、调试、联动和验收的全过程。它不是单纯的网络工…...

编程新知 2026/3/28 9:20:21

全网薅羊毛新地图”：华莱士套餐实测13.9元起，连锁巨头麦当劳紧随其后！

近期&#xff0c;随着经济压力的加大&#xff0c;餐饮市场的竞争愈发激烈。在原本以低价策略闻名的麦当劳“穷鬼套餐”开始面临严峻挑战之际&#xff0c;一家曾被网友戏称为“穷鬼旗舰”的连锁快餐品牌——华莱士&#xff0c;悄然推出了更具性价比的“超值套餐”&#xff0c;在…...

编程新知 2026/3/28 8:53:58

【latex】探索LaTeX中加粗文本的多种方法及其在表格中的优化应用

1. LaTeX加粗文本的多种方法对比 第一次用LaTeX写论文时&#xff0c;我也以为\textbf{}是唯一的加粗方式。直到在表格里发现加粗后的文字会把单元格撑变形&#xff0c;才意识到LaTeX的文本修饰比想象中复杂得多。经过反复测试&#xff0c;我发现实际有5种常用加粗方法&#xf…...

编程新知 2026/3/28 8:41:55