模仿百度-基础版
<!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 的墙面，现在需要用2种规格的瓷砖铺满，瓷砖规格分别是 2 * 1 和 2 * 2，请计算一共有多少种铺设的方法。 输入 输入的第一行包含一个正整数T（T<20），表示一共有T组数据&…...
用 Python 构建高级配对交易策略
作者：老余捞鱼 原创不易，转载请标明出处及原作者。 写在前面的话： 本文阐述通过分析加密货币和传统金融工具之间的相关性和协整性，以及实施 Z-score 方法来生成交易信号，然后介绍如何使用 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，presets字段设定转码规则，将es2015规则加入…...
自动机器学习（AutoML）
utoML是PAI的提供的自动寻找超参组合的机器学习增强型服务。您在训练模型时，如果超参组合复杂度过高，需大量训练资源和手工调试工作，可以使用AutoML来节省模型调参时间，提升模型调优效率和模型质量。 基础概念 超参数：…...
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)基本数据类型 （2）引用数据类型 2.基本数据类型分类：数值型，非数值型。 3.数值型:（1） 整数类型（byte,short,int,long) （2） …...
【目标检测论文解读复现NO.39】基于改进 YOLOv8 的轻量级复杂环境苹果叶片病害检测方法
前言 此前出了目标改进算法专栏，但是对于应用于什么场景，需要什么改进方法对应与自己的应用场景有效果，并且多少改进点能发什么水平的文章，为解决大家的困惑，此系列文章旨在给大家解读最新目标检测算法论文，…...
python 基础笔记 2（函数， 类）
起因， 目的: 把很久以前，自己写的笔记发布出来。 现在粉丝多了，也不觉得丢人了。 为什么这些序号不连贯，因为有些很熟悉的东西，我都删了。 内建函数， 函数 zip()函数，利用 * 号操作符，可以将元组解压为列表。 我怀疑是zip的解包只能用一次。在内存中解开一次之后就销…...
LeetCode 2090.半径为K的子数组平均值
题目： 给你一个下标从 0 开始的数组 nums ，数组中有 n 个整数，另给你一个整数 k 。 半径为 k 的子数组平均值 是指：nums 中一个以下标 i 为 中心 且 半径 为 k 的子数组中所有元素的平均值，即下标在 i - k 和 i k 范…...
Qt C++ 编程中定义了一个槽函数（slot）deleteLater的作用
这行代码是在 Qt C编程中定义了一个槽函数（slot）deleteLater。 在 Qt 框架中，Q_SLOTS关键字用于声明类中的槽函数。deleteLater是一个非常有用的函数，它会安排接收对象在事件循环返回后被删除。 通常在以下情况下会使用deleteLa…...
【Hive】8-Hive性能优化及Hive3新特性
Hive性能优化及Hive3新特性 Hive表设计优化 Hive查询基本原理 Hive的设计思想是通过元数据解析描述将HDFS上的文件映射成表 基本的查询原理是当用户通过HQL语句对Hive中的表进行复杂数据处理和计算时，默认将其转换为分布式计算 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(四)
导言： 本文主要讲述在CTF竞赛中，web类题目file_include。 靶场链接：攻防世界 (xctf.org.cn) 一，观察页面。 可以看到一段php代码。从则段代码中我们可以知道： 1，使用include引入check.php文件ÿ…...
智慧商城项目1-项目初始化创建
这是一个面向移动端的项目，先看看做了这个项目能收获什么，注意这是vue2的项目， 是个经典项目，能为未来学习vue3项目打下基础。 首先来说一下为啥是vue2，因为vue3还没有大范围普及，目前大部分企业还在用vue2…...
Java集合（四）--treeset/treemap/章节练习题目/去重原理的解读和应用
文章目录 1.treeset结构2.treemap结构3.集合去重辨析总结4.对于arraylist的练习题目5.对于HashMap的练习题目6.第三点的去重运用7.HashSe练习题目 1.treeset结构 下面的这个就是对于这个treeset结构进行测试的一个程序，在这个里面，add表示的就是对于这个…...
如何开启华为交换机 http
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目…...
方法有什么作用?)
SpringBoot中的RedisTemplate对象中的setIfAbsent()方法有什么作用?
文章目录 原子性操作用于分布式锁可选的过期时间 setIfAbsent() 方法是 Redis 中用于设置一个键值对的命令，只有在该键不存在时才会设置成功。它通常用于实现分布式锁的逻辑 主要功能: 原子性操作 setIfAbsent() 是一个原子性操作，意味着在执行该操作的…...
》)
《合肥工业大学学报(自然科学版)》
《合肥工业大学学报(自然科学版)》以基础理论、应用科学和工程技术为主的综合性学术刊物，主要刊登机械工程、仪器科学与光电工程、材料科学与工程、电气与自动化工程、计算机与信息工程、电子科学与应用物理、土木与水利工程、资源与环境工程、汽车与交通工程、化学…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
云原生安全实战：API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...
【若依】框架项目部署笔记
参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作： 压缩包下载：http://download.redis.io/releases 1. 上传压缩包，并进入压缩包所在目录，解压到目标…...
21-Oracle 23 ai-Automatic SQL Plan Management（SPM)
小伙伴们，有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL， 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始，OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...
WinUI3开发_使用mica效果
简介 Mica(云母)是Windows10/11上的一种现代化效果，是Windows10/11上所使用的Fluent Design(设计语言)里的一个效果，Windows10/11上所使用的Fluent Design皆旨在于打造一个人类、通用和真正感觉与 Windows 一样的设计。 WinUI3就是Windows10/11上的一个…...
Qt/C++学习系列之列表使用记录
Qt/C学习系列之列表使用记录 前言列表的初始化界面初始化设置名称获取简单设置 单元格存储总结 前言 列表的使用主要基于QTableWidget控件，同步使用QTableWidgetItem进行单元格的设置，最后可以使用QAxObject进行单元格的数据读出将数据进行存储。接下来…...
Qt 按钮类控件（Push Button 与 Radio Button）（1）
文章目录 Push Button前提概要API接口给按钮添加图标给按钮添加快捷键 Radio ButtonAPI接口性别选择 Push Button（鼠标点击不放连续移动快捷键） Radio Button Push Button 前提概要 1. 之前文章中所提到的各种跟QWidget有关的各种属性/函数/方法&#…...
【中间件】Web服务、消息队列、缓存与微服务治理：Nginx、Kafka、Redis、Nacos 详解
Nginx 是什么：高性能的HTTP和反向代理Web服务器。怎么用：通过配置文件定义代理规则、负载均衡、静态资源服务等。为什么用：提升Web服务性能、高并发处理、负载均衡和反向代理。优缺点：轻量高效，但动态处理能力较弱&am…...
分布式光纤声振传感技术原理与瑞利散射机制解析
分布式光纤传感技术（Distributed Fiber Optic Sensing，简称DFOS）作为近年来迅速发展的新型感知手段，已广泛应用于边界安防、油气管道监测、结构健康诊断、地震探测等领域。其子类技术——分布式光纤声振传感（Distribut…...
【设计模式】1.简单工厂、工厂、抽象工厂模式
every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 以下是 简单工厂模式、工厂方法模式 和 抽象工厂模式 的 Python 实现与对比，结合代码示例和实际应用场景说明： 1. 简单工厂模式&a…...