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

模仿百度-基础版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度案例</title><style>*{margin: 0;padding: 0;font-size: 14px;font-family: '微软雅黑';box-sizing: border-box;}a{color: dimgray;/* 去掉超链接的下划线 */text-decoration: dashed;/* 设置每个a标签的外间距 */margin: 10px;}li{color:dimgray;/* 去掉列表的默认样式 */list-style: none;padding-left: 80px;line-height: 40px;font-size: 18px;}/* nav tagName start */nav>div:first-child{/* background: pink; */position: absolute;left: 80px;top: 15px;}nav>div:last-child{/* background:yellow; */position: absolute;right:80px;top: 15px;}nav a:hover{color: blue;}/* nav tagName end */.picture{/* text-align: center;   */position: absolute;   top: 120px;   left:650px; }/* search tagName start */.search{position: absolute;width: 600px;height: 300px;/* background: pink; */left: calc(50% - 250px);top: 250px;}.text input{width: 450px;height: 50px;/* background: red; */float: left;box-sizing: border-box;border-bottom: 2px solid #acb1c0;border-left: 2px solid #acb1c0;border-top: 2px solid #acb1c0;border-right: 0px solid #acb1c0;/* 设置边框的拐角弧度 */border-top-left-radius: 10px;border-bottom-left-radius: 5px;}.button input{width: 145px;height: 50px;color: #fff;background: #4E6EF2;;display: flex;justify-content: center;/* 按钮内的字居中 */align-items: center;/* 设置边框宽度 */border: 0;/* 设置边框的拐角弧度 */border-top-right-radius: 10px;border-bottom-right-radius: 5px;}.list{width: 595px;height: 230px;border: 1px solid #ccc;border-radius: 5px;}.list>ul:first-child{width: 280px;/* height: 200px; *//* background: blue; */position: absolute;left: 5px;top: 60px;}.list>ul:last-child{width: 280px;/* height: 200px; *//* background: peru; */position: absolute;right: 5px;top: 100px;}/* search tagName end *//* aside tagName start */aside{width: 50px;height: 100px;/* background: skyblue; */border:1px solid dimgray;position: absolute;bottom: 100px;right: 20px;padding:20px;border-radius: 10px;}/* asid tagName end *//* footer tagName start */footer{height: 30px;width: 100%;/* background: aqua; */position: absolute;bottom: 5px;left: 100px;}footer a,span{color: #ccc;font-size: 12px;}footer a:hover{color: black;}/* footer tagName end */</style>
</head>
<body><header class="top"><nav><!-- 左边导航 --><div><a href="">新闻</a><a href="">hao123</a><a href="">地图</a><a href="">贴吧</a><a href="">视频</a><a href="">图片</a><a href="">网盘</a><a href="">更多</a></div><!-- 右边导航 --><div><a href="">文心一言</a><a href="">设置</a><a href="">用户</a></div></nav></header><!-- 搜索框上的图片 --><div class="picture"><img src="../image/baidulogo.png" alt=""></div><!-- 搜素框 --><div class="search"><div class="text"><input type="text"></div><div class="button"><input type="button" value="百度一下"></div><!-- 热搜 --><div class="list"><!-- 左边 --><ul><li>百度热搜</li><li>1.床前明月光</li><li>2.疑是地上霜</li><li>3.举头望明月</li><li>4.低头思故乡</li></ul><!-- 右边 --><ul><li>5.锄禾日当午</li><li>6.汗滴禾下土</li><li>7.谁知盘中餐</li><li>8.粒粒皆辛苦</li></ul></div></div><!-- 侧边导航栏 --><aside>侧边栏</aside><!-- 尾部导航栏 --><footer><a href="">关于百度</a><a href="">About baidu</a><a href="">使用百度前必读</a><a href="">帮助中心</a><a href="">企业推广</a><a href="">京公网安备11000002000001</a><a href="">京ICP证030173号</a><span>互联网新闻信息服务许可证666666666</span><span>网络文化经营许可证666666号</span><a href="">信息网络传播视听节目许可证0110516</a><img src="" alt=""><span></span></footer>
</body>
</html>

在这里插入图片描述

相关文章:

模仿百度-基础版

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>百度案例</title><style>*{margin: 0;p…...

c++贴瓷砖

题目描述 有一块大小是 2 * n 的墙面&#xff0c;现在需要用2种规格的瓷砖铺满&#xff0c;瓷砖规格分别是 2 * 1 和 2 * 2&#xff0c;请计算一共有多少种铺设的方法。 输入 输入的第一行包含一个正整数T&#xff08;T<20&#xff09;&#xff0c;表示一共有T组数据&…...

用 Python 构建高级配对交易策略

作者&#xff1a;老余捞鱼 原创不易&#xff0c;转载请标明出处及原作者。 写在前面的话&#xff1a; 本文阐述通过分析加密货币和传统金融工具之间的相关性和协整性&#xff0c;以及实施 Z-score 方法来生成交易信号&#xff0c;然后介绍如何使用 Python 构建配对交易策…...

Java 引用数据类型详解、字符串的不可变性、如何处理字符串的内存管理、String Pool 及其优化

文章目录 1. 引用数据类型1.1 常见引用数据类型 2. 字符串的不可变性2.1 不可变性的优点2.2 不可变性示例 3. 如何处理字符串的内存管理3.1 String Pool3.2 String 内存优化 4. String Pool 及其优化4.1 String Pool的工作原理4.2 String Pool的优化4.3 使用 intern() 进一步优…...

Babel使用

初始化项目 npm init -y 创建文件 // 转码前 // 定义数据 let input [1, 2, 3] // 将数组的每个元素 1 input input.map(item > item 1) console.log(input)配置.babelrc Babel的配置文件是.babelrc&#xff0c;presets字段设定转码规则&#xff0c;将es2015规则加入…...

自动机器学习(AutoML)

utoML是PAI的提供的自动寻找超参组合的机器学习增强型服务。您在训练模型时&#xff0c;如果超参组合复杂度过高&#xff0c;需大量训练资源和手工调试工作&#xff0c;可以使用AutoML来节省模型调参时间&#xff0c;提升模型调优效率和模型质量。 基础概念 超参数&#xff1a;…...

Vivado时序报告六:Report Timing详解

目录 一、前言 二、配置选项概览图 三、配置选项详解 3.1 Targets 3.2 Options 3.1.1 Report 3.1.2 Path limits 3.1.3 Path display 3.2 Advanced 3.2.1 Report 3.2.2 File Output 3.2.3 miscellaneous 3.3 Timer Settings 3.4 共有部分 四、 设计示例 4.1 设…...

java基础:数据类型的总结

一、Java 常用数据类型 1.数据类型分为:(1)基本数据类型 &#xff08;2&#xff09;引用数据类型 2.基本数据类型分类&#xff1a;数值型&#xff0c;非数值型。 3.数值型:&#xff08;1&#xff09; 整数类型&#xff08;byte,short,int,long) &#xff08;2&#xff09; …...

【目标检测论文解读复现NO.39】基于改进 YOLOv8 的轻量级复杂环境苹果叶片病害检测方法

前言 此前出了目标改进算法专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读最新目标检测算法论文&#xff0c…...

python 基础笔记 2(函数, 类)

起因, 目的: 把很久以前,自己写的笔记发布出来。 现在粉丝多了,也不觉得丢人了。 为什么这些序号不连贯,因为有些很熟悉的东西,我都删了。 内建函数, 函数 zip()函数,利用 * 号操作符,可以将元组解压为列表。 我怀疑是zip的解包只能用一次。在内存中解开一次之后就销…...

LeetCode 2090.半径为K的子数组平均值

题目&#xff1a; 给你一个下标从 0 开始的数组 nums &#xff0c;数组中有 n 个整数&#xff0c;另给你一个整数 k 。 半径为 k 的子数组平均值 是指&#xff1a;nums 中一个以下标 i 为 中心 且 半径 为 k 的子数组中所有元素的平均值&#xff0c;即下标在 i - k 和 i k 范…...

Qt C++ 编程中定义了一个槽函数(slot)deleteLater的作用

这行代码是在 Qt C编程中定义了一个槽函数&#xff08;slot&#xff09;deleteLater。 在 Qt 框架中&#xff0c;Q_SLOTS关键字用于声明类中的槽函数。deleteLater是一个非常有用的函数&#xff0c;它会安排接收对象在事件循环返回后被删除。 通常在以下情况下会使用deleteLa…...

【Hive】8-Hive性能优化及Hive3新特性

Hive性能优化及Hive3新特性 Hive表设计优化 Hive查询基本原理 Hive的设计思想是通过元数据解析描述将HDFS上的文件映射成表 基本的查询原理是当用户通过HQL语句对Hive中的表进行复杂数据处理和计算时&#xff0c;默认将其转换为分布式计算 MapReduce程序对HDFS中的数据进行…...

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-18

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-18 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-18目录1. On the Reliability of Large Language Models to Misinformed and Demographically-Informed Prompts2. SafeLLM: Dom…...

CTF(四)

导言&#xff1a; 本文主要讲述在CTF竞赛中&#xff0c;web类题目file_include。 靶场链接&#xff1a;攻防世界 (xctf.org.cn) 一&#xff0c;观察页面。 可以看到一段php代码。从则段代码中我们可以知道&#xff1a; 1&#xff0c;使用include引入check.php文件&#xff…...

智慧商城项目1-项目初始化创建

这是一个面向移动端的项目&#xff0c;先看看做了这个项目能收获什么&#xff0c;注意这是vue2的项目&#xff0c; 是个经典项目&#xff0c;能为未来学习vue3项目打下基础。 首先来说一下为啥是vue2&#xff0c;因为vue3还没有大范围普及&#xff0c;目前大部分企业还在用vue2…...

Java集合(四)--treeset/treemap/章节练习题目/去重原理的解读和应用

文章目录 1.treeset结构2.treemap结构3.集合去重辨析总结4.对于arraylist的练习题目5.对于HashMap的练习题目6.第三点的去重运用7.HashSe练习题目 1.treeset结构 下面的这个就是对于这个treeset结构进行测试的一个程序&#xff0c;在这个里面&#xff0c;add表示的就是对于这个…...

如何开启华为交换机 http

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…...

SpringBoot中的RedisTemplate对象中的setIfAbsent()方法有什么作用?

文章目录 原子性操作用于分布式锁可选的过期时间 setIfAbsent() 方法是 Redis 中用于设置一个键值对的命令&#xff0c;只有在该键不存在时才会设置成功。它通常用于实现分布式锁的逻辑 主要功能: 原子性操作 setIfAbsent() 是一个原子性操作&#xff0c;意味着在执行该操作的…...

《合肥工业大学学报(自然科学版)》

《合肥工业大学学报(自然科学版)》以基础理论、应用科学和工程技术为主的综合性学术刊物&#xff0c;主要刊登机械工程、仪器科学与光电工程、材料科学与工程、电气与自动化工程、计算机与信息工程、电子科学与应用物理、土木与水利工程、资源与环境工程、汽车与交通工程、化学…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...

加密通信 + 行为分析:运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II(Linked List Cycle II)详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

linux设备重启后时间与网络时间不同步怎么解决?

linux设备重启后时间与网络时间不同步怎么解决&#xff1f; 设备只要一重启&#xff0c;时间又错了/偏了&#xff0c;明明刚刚对时还是对的&#xff01; 这在物联网、嵌入式开发环境特别常见&#xff0c;尤其是开发板、树莓派、rk3588 这类设备。 解决方法&#xff1a; 加硬件…...

Heygem50系显卡合成的视频声音杂音模糊解决方案

如果你在使用50系显卡有杂音的情况&#xff0c;可能还是官方适配问题&#xff0c;可以使用以下方案进行解决&#xff1a; 方案一&#xff1a;剪映替换音色&#xff08;简单适合普通玩家&#xff09; 使用剪映换音色即可&#xff0c;口型还是对上的&#xff0c;没有剪映vip的&…...