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

web前端--网页练习

news 文章来源：https://blog.csdn.net/W111115_/article/details/143203513 2024/11/2 22:40:17

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

HarmonyOS 组件样式@Style 、 @Extend、自定义扩展（AttributeModifier、AttributeUpdater）

1. HarmonyOS Style 、 Extend、自定义扩展&#xff08;AttributeModifier、AttributeUpdater&#xff09; Styles装饰器&#xff1a;定义组件重用样式   ;Extend装饰器&#xff1a;定义扩展组件样式   自定义扩展&#xff1a;AttributeModifier、AttributeUpdater 1.1. 区…...

编程日记 2024/10/27 12:57:07

信息安全工程师（73）网络安全风险评估过程

一、确定评估目标 此阶段需要明确评估的范围、目标和要求。评估目标通常包括特定的网络系统、信息系统或网络基础设施&#xff0c;评估范围可能涉及整个组织或仅特定部门。明确评估要求有助于确保评估过程的针对性和有效性。 二、收集信息 在评估开始之前&#xff0c;需要对目标…...

编程日记 2024/10/27 12:56:07

在MacOS玩RPG游戏 - RPGViewerPlus

背景知识 由于我一直使用Mac电脑&#xff0c;所以一直对Mac如何玩RPGMV/RPGMZ游戏的方式有进一步的想法。 网上能给出的方案都是自行启动一个HTTP服务进行&#xff0c;进行服务加载。这个方法有效&#xff0c;但兼容性较差。涉及到自定义功能模块的游戏&#xff0c;都会有报错…...

编程日记 2024/10/27 12:55:06

2024.10.27 直接插入排序 非递归后序遍历（复杂版）

直接插入排序 思路&#xff1a;用temp变量存放需要插入前面有序序列的变量&#xff0c;然后用里面的那个for循环寻找到需要插入的位置。 额外注意的点&#xff1a;arr[j1]temp;这个是因为内置循环每次出来之后所指向的位置是我们要插入的位置的前一个&#xff08;-1或者插入…...

编程日记 2024/10/27 12:54:05

Ubuntu 22.04系统启动时自动运行ROS2节点

在 Ubuntu 启动时自动运行 ROS2 节点的方法 环境&#xff1a;Ubuntu 系统&#xff0c;ROS2 Humble&#xff0c;使用系统自带的 启动应用程序 目标&#xff1a;在系统启动时自动运行指定的 ROS2 节点 效果展示 系统启动后&#xff0c;自动运行小乌龟节点和键盘控制节点。 实践…...

编程日记 2024/10/27 12:50:00

张三进阶之路 | 基于Spring AOP的Log收集

前情提要 &#x1f4cc; 张三对于公司的日志处理系统不满意&#xff0c;认为其性能不佳且功能有限。为了展示自己的能力和技术实力&#xff0c;他决定利用Spring AOP&#xff08;面向切面编程&#xff09;开发一个更高效的日志处理系统&#xff0c;并将其存储在Redis中。 首先…...

编程日记 2024/10/27 12:45:57

ubuntu新装ubuntu，重启黑屏

现象&#xff1a;双系统电脑向移动硬盘安装Ubuntu系统后&#xff0c;重启黑屏并显示Minimal BASH-like line editing is supported. For the first word, TAB lists possible command completions. Anywhere else TAB lists possible device or file completions. 又拔下无法启…...

编程日记 2024/10/27 12:42:51

太极安全监控系统0.8

完善后的代码及功能详细介绍 完善后的代码 python import os import sys import subprocess import re import datetime import threading import tkinter as tk from tkinter import messagebox, simpledialog, ttk import scapy.all as scapy import whois import numpy as …...

编程日记 2024/10/27 12:37:45

E-清楚姐姐的布告规划【01背包】

就当一个01背包写就行&#xff0c;只不过需要保证不交叉&#xff0c;w[i]覆盖i点&#xff0c;用一个if来判断即可 #include<bits/stdc.h> #define int long long using namespace std; int w[5005]; int f[5005]; int t,n,m; signed main() {cin>>t;while(t--){…...

编程日记 2024/10/27 12:32:39

哪款宠物空气净化器噪音低？希喂、美的、安德迈测评分享

今年双11&#xff0c;宠物空气净化器到底应该如何选&#xff1f;在所有的家电品类里&#xff0c;宠物空气净化器算是比较特殊的那个&#xff0c;产品迭代太快&#xff0c;我们把今年双11在售的各大主流品牌的宠物空气净化器统一汇总整理&#xff0c;发现基本一多半都是24年下半…...

编程日记 2024/10/27 12:31:38

有用织梦做的大网站吗/专门用来查找网址的网站

作者&#xff1a;Natasha The Robot&#xff0c;原文链接&#xff0c;原文日期&#xff1a;2016-07-25译者&#xff1a;Lanford3_3&#xff1b;校对&#xff1a;千叶知风&#xff1b;定稿&#xff1a;CMB上周我出席了 iOSDevCampDC&#xff0c;并有幸参加了 ayanonagon 关于测试…...

编程日记 2024/11/2 21:41:51

要维护公司的网站该怎么做/免费注册网址

2019独角兽企业重金招聘Python工程师标准>>> 今天决定看看开源中国安卓版app&#xff0c;并试着重构一下。好的进入主题。 创建MainActivity public class MainActivity extends ActionBarActivity implementsNavigationDrawerFragment.NavigationDrawerCallbacks,O…...

编程日记 2024/11/2 18:59:24

四川省住房和城乡建设厅网站下载/今日头条新闻

前言 某日需要针对某个输入框做自动补全&#xff0c;但是后来发现输入一个汉字输入几个英文字母的时候也会因为敲入每个英文都会触发事件一次&#xff0c;这种方式非常不好&#xff0c;对服务端的压力太大了&#xff0c;于是这里做一下处理。 截图 解决方案 思路&#xff0c…...

编程日记 2024/11/2 17:46:32

wordpress浏览图片失败/百度竞价怎么做效果好

前面一篇文章[Flutter实战1 写一个天气查询的APP]实现了一个显示城市、温度、天气、湿度的界面&#xff0c;但是这个界面只有一个显示的功能&#xff0c;没有任何可交互的地方&#xff0c;本篇文章继续完善查询天气的APP的功能。 先上效果图&#xff1b; 增加两个功能&#xff…...

编程日记 2024/11/2 16:16:25

做网站的诈骗8000块钱犯法吗/合肥网站优化方案

在一个目录下的搜索&#xff0c;即FindElem&#xff08;&#xff09;不分先后出现顺序。 (一) 先讲一下XML中的物殊字符&#xff0c;手动填写时注意一下。 字符 字符实体& &amp;或#38; &apos…...

编程日记 2024/11/2 14:53:53

现在个人做网站还能盈利吗/怎么做推广

前言 太悲伤了啊实在是&#xff0c;T4打错一个地方少了70分&#xff0c;直接从比较稳一点的分数一下子掉到了及格线边缘/kk 比赛过程 先是很草率地看了一眼题 T1直接切&#xff0c;然后就感觉飘了&#xff1f;&#xff1f; T2看了题&#xff0c;然后也是蛮快地就打完了&…...

编程日记 2024/11/2 14:43:35