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

web前端--网页练习

news 2026/2/7 20:08:37

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="../reset.css"><!-- 引入样式 --><link rel="stylesheet" href="./index.css"></head>
<body><!-- 顶部导航条 --><!--版心 --><div class="container" clearfix><!-- 左侧的小米logo --><div class="logo leftfix"><img src="./image/mi.png" alt="logo"></div><!-- 中间的导航条 --><div class="topbar-nav"><ul class="list clearfix"><li><a href="#">小米官网</a></li><li><a href="#">小米商城</a></li><li><a href="#">小米澎湃OS</a></li><li><a href="#">小米汽车</a></li><li><a href="#">小米影像</a></li><li><a href="#">云服务</a></li><li><a href="#">IoT</a></li><li><a href="#">有品</a></li><li><a href="#">小爱开放平台</a></li><li><a href="#">Location</a></li></ul></div><!-- 右侧的登录区 --><div class="topbar-login  "><a href="#" class="login">登录</a> <span class="ge">|</span><a href="#" class="reset">注册</a></div></body>
</html>

css代码：

/* 基础设置 */
.container{width: 1440px;height: 65px;margin: 0 auto;background-color:black;display: flex;position:relative
}
/* 顶部导航条stare */.container.logo{width: 32px;height: 32px;position: absolute; 
}
.container .logo img {width: 32px;height: 32px;margin-left: 12px;margin-top:14px;
}
.topbar-nav{width: 938px;height: 65px;margin: 0 auto;}
.topbar-nav .list{width: 938px;height: 65px;line-height: 65px;
}
.topbar-nav .list li a {float: left;font-family: MiSans, serif;font-weight: 600;line-height: 65px;font-size: 15px;color: #fff;margin: 0 20px; }
.topbar-nav .list li a:hover {color:#ff6900;
}
.topbar-nav .list li:first-child a {margin-left: 0px;color: #ff6900;
}
.topbar-nav .list li:last-child a {margin-right: 0px;
}.topbar-login a:hover{color:#ff6900;
}
.topbar-login {height: 65 px;width: 100px;margin-right: 10px;}
.topbar-login>a {color: #fff;position: relative;height: 65px;font-size: 16px;line-height: 65px;align-items: center;cursor: pointer;font-family: MiSans, serif;font-weight: 600;}.ge{color: #fff;font-size: 16px;font-weight: 500;margin: 0px 10px;
}/* 顶部导航条end */

运行结果：

相关文章：

web前端--网页练习

html代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>小米</title><!-- 引…...

编程日记 2024/10/27 13:36:55

信息安全入门——网络安全控制

目录 前言信息安全入门&#xff1a;网络安全控制基础1. 用户识别技术&#xff1a;确认你是谁2. 访问控制技术&#xff1a;定义你能做什么3. 访问控制列表&#xff08;ACL&#xff09;&#xff1a;精细的权限管理4. 漏洞控制&#xff1a;防范未然5. 入侵检测系统&#xff08;IDS…...

编程日记 2024/10/27 13:35:54

跟着鸟儿学飞行？扑翼机器人的感知秘籍

大家好&#xff01;今天来了解一篇扑翼机器人的研究——《Avian-inspired embodied perception in biohybrid flapping-wing robotics》发表于《Nature Communications》。在广阔天空中&#xff0c;鸟类凭借精妙翅膀结构与敏锐感知自由翱翔&#xff0c;这一直吸引着科学家探索其…...

编程日记 2024/10/27 13:33:52

Python画笔案例-093 绘制 彩虹图

1、绘制 彩虹图 通过 python 的turtle 库绘制 彩虹图，如下图： 2、实现代码 绘制 彩虹图，以下为实现代码： """彩虹图.py """ import turtledef draw_semi_circle(radius):"""画半圆函数"""turtle...

编程日记 2024/10/27 13:32:51

【数据结构】贪心算法：决策的艺术

贪心算法&#xff08;Greedy Algorithm&#xff09;是一类在每一步选择中都采取局部最优解的方法&#xff0c;希望最终能够达到全局最优解。通俗地说&#xff0c;贪心算法的思想就是“每一步都尽量做出最好的选择”&#xff0c;以期望整个过程的最终结果也达到最优状态。贪心算…...

编程日记 2024/10/27 13:30:47

Linux LVS详解

LVS&#xff08;Linux Virtual Server&#xff09;即Linux虚拟服务器&#xff0c;是一个基于Linux操作系统的高性能、可扩展的负载均衡器。以下是对LVS的详细介绍&#xff1a; 一、简介 LVS项目由章文嵩博士在1998年5月发起&#xff0c;是中国国内最早出现的自由软件项目之一…...

编程日记 2024/10/27 13:29:45

LabVIEW显微镜自动对焦系统

在生物医学研究中&#xff0c;显微镜图像的清晰度对于细胞分析非常重要。传统的手动对焦方法容易受到人为因素的影响&#xff0c;因此开发了一种自动对焦技术&#xff0c;以提高图像采集的准确性和效率。 自动对焦方法概述 该系统结合了图像清晰度评估和一维功能优化&#xff…...

编程日记 2024/10/27 13:28:43

基于IP的真实地址生成器

ip-geoaddress-generator 是一个基于 Web 的在线应用程序&#xff0c;能够根据 IP 地址生成真实的随机地址信息。通过多个 API 获取位置数据和随机用户信息&#xff0c;该工具为用户提供了完整的虚拟身份。它由 Next.js 和 Radix UI 构建&#xff0c;具备自动检测当前 IP 地址和…...

编程日记 2024/10/27 13:26:42

下面程序头的三个import语句可以合并或简化么？

下面程序头的三个import语句可以合并或简化么&#xff1f; from tkinter.simpledialog import askinteger from tkinter import * from tkinter import messagebox ——是的&#xff0c;三个import语句可以合并为一个。 合并后的import语句如下所示&#xff1a; from tkinte…...

编程日记 2024/10/27 13:23:38

深度学习--CNN实现猫狗识别二分类(附带下载链接, 长期有效)

1. 代码实现(包含流程解释) 样本量: 8005 # # 1.导入数据集(加载图片)数据预处理# 进行图像增强, 通过对图像的旋转 ,缩放,剪切变换, 翻转, 平移等一系列操作来生成新样本, 进而增加样本容量, # 同时对图片数值进行归一化[0:1] from tensorflow.keras.preprocessing.image …...

编程日记 2024/10/27 13:21:36

Depcheck——专门用于检测 JavaScript 和 Node.js 项目中未使用依赖项的工具

文章目录 Depcheck 是什麽核心功能&#x1f4da;检测未使用的依赖&#x1f41b;检测缺失的依赖✨支持多种文件类型&#x1f30d;可扩展性 安装与使用1. 安装 Depcheck2. 使用 Depcheck Depcheck 的应用总结项目源码&#xff1a; Depcheck 是什麽 来看一个常见错误场景&#x1…...

编程日记 2024/10/27 13:16:30

前端构建工具vite的优势

1. 极速冷启动 Vite 使用原生 ES 模块 (ESM) 在开发环境下进行工作。相比于传统构建工具需要打包所有的文件&#xff0c;Vite 只在浏览器请求模块时动态加载所需的文件。无打包冷启动&#xff1a;无需预先打包&#xff0c;项目启动非常快&#xff0c;尤其对于大型项目效果更明…...

编程日记 2024/10/27 13:15:29

hive查询语句

1.基本语法 SELECT [ALL | DISTINCT]select_expr, select_expr, ... FROM table_reference [WHERE where_condition] [GROUP BYcol_list] [HAVING where_condition] [ORDER BYcol_list] [CLUSTER BYcol_list | [DISTRIBUTE BY col_list] [SORT BY col_list] ] [LIMIT number] …...

编程日记 2024/10/27 13:14:28

【AIGC】2024-ECCV-ControlNet++：通过有效的一致性反馈改进条件控制

2024-ECCV-ControlNet: Improving Conditional Controls with Efficient Consistency Feedback ControlNet&#xff1a;通过有效的一致性反馈改进条件控制摘要1. 引言2. 相关工作2.1 基于扩散的生成模型2.2 可控的文本到图像扩散模型2.3 语言和视觉奖励模型 3. 方法3.1. 初步3.…...

编程日记 2024/10/27 13:13:26

Mysql5.7变为GreatSQL 8.0.32-25过程中，SQL语句报错及解决方案

考虑兼容国产化数据库&#xff0c;现需要将Mysql5.7变为GreatSQL&#xff0c;在执行部分sql时&#xff0c;发现在Mysql5.7无报错&#xff0c;在GreatSQL有报错&#xff0c;在此记录一下遇到的几个错误。 1.ERROR 1231 (NO_AUTO_CREATE_USER) 1.1.报错提示 ERROR 1231 (42000…...

编程日记 2024/10/27 13:12:25

Qt 使用QAxObject将QTableView数据导出到Excel表格

这是我记录Qt学习过程的第6篇心得文章&#xff0c;主要是方便自己编写的应用程序导出Excel数据的&#xff0c;走了不少弯路直接上代码。 实现代码&#xff1a; //人员信息导出 ui->pbtn2->setEnabled(false); // 打开文件对话框&#xff0c;选择 excel文件 QString fil…...

编程日记 2024/10/27 13:09:23

fastGpt

参考本地部署FastGPT使用在线大语言模型 1 rockylinx 1 ollama安装 在rockylinux中安装的&#xff0c;ollama由1.5G&#xff0c;还是比较大&#xff0c;所有采用在windows下下载&#xff0c;然后安装的方式&#xff0c;linux安装 tar -C /usr -xzf ollama-linux-amd64.tgz #…...

编程日记 2024/10/27 13:07:19

如何全方位应对服务可用性的挑战

在数字化转型的浪潮中&#xff0c;运维团队正站在企业IT架构的核心位置&#xff0c;面对着前所未有的挑战。服务响应时间和失败率&#xff0c;作为衡量服务质量的重要指标&#xff0c;一直备受关注。然而&#xff0c;在追求这两项指标优化的同时&#xff0c;运维团队还需关注其…...

编程日记 2024/10/27 13:04:17

二进制方式部署k8s集群

目标任务： 1、Kubernetes集群部署架构规划 2、部署Etcd数据库集群 3、在Node节点安装Docker 4、部署Flannel网络插件 5、在Master节点部署组件（api-server,schduler,controller-manager） 6、在Node节点部署组件（kubelet,kube-proxy） 7、查看集群状态 8、运行⼀个测…...

编程日记 2024/10/27 13:03:16

Vivado时序报告七：Report Clock NetworkReport Clock Interaction详解

目录 一、前言 二、Report Clock Network 2.1 Report Clock Network流程 2.2 Report Clock Network报告 三、Report Clock Interaction 3.1 示例设计 3.2 配置选项 3.2.1 Options 3.2.2 Timer_Settings 3.3 Clock Interaction报告 3.3.1 Clock Pair Classification …...

编程日记 2024/10/27 13:02:15

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2026/2/6 19:29:20

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2026/2/4 10:28:25

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35