当前位置: 首页 > 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;主要刊登机械工程、仪器科学与光电工程、材料科学与工程、电气与自动化工程、计算机与信息工程、电子科学与应用物理、土木与水利工程、资源与环境工程、汽车与交通工程、化学…...

Ai2Psd:告别矢量丢失!Illustrator到PSD无损转换的终极解决方案

Ai2Psd&#xff1a;告别矢量丢失&#xff01;Illustrator到PSD无损转换的终极解决方案 【免费下载链接】ai-to-psd A script for prepare export of vector objects from Adobe Illustrator to Photoshop 项目地址: https://gitcode.com/gh_mirrors/ai/ai-to-psd 还在为…...

window 10 主机安装ubuntu22 系统

准备工作 下载ubuntu22镜像 使用ubuntu_server_220405时&#xff0c;当在/etc/netplan/50-cloud-init.yaml文件里编辑网卡信息 network:version: 2renderer: networkdethernets:eth0:dhcp4: noaddresses: - 172.20.10.2/24routes:- to: defaultvia: 172.20.10.1nameservers:ad…...

IoT设备渗透测试实战:从命令注入到流量监控的完整流程(附避坑指南)

IoT设备渗透测试实战&#xff1a;从命令注入到流量监控的完整流程&#xff08;附避坑指南&#xff09; 1. IoT渗透测试的特殊性 IoT设备的渗透测试与传统PC环境存在显著差异&#xff0c;这些差异直接影响着测试策略的选择和工具的使用。首先&#xff0c;IoT设备通常运行精简版的…...

拼多多商品价格监控实战:用Python爬虫+Excel自动生成竞品分析报告

拼多多竞品价格监控系统&#xff1a;从数据采集到商业决策的全链路实战 在电商行业&#xff0c;价格策略往往是决定销量的关键因素。想象一下这样的场景&#xff1a;你负责运营一家数码配件店铺&#xff0c;某天突然发现竞品的蓝牙耳机价格下调了15%&#xff0c;而你的库存还保…...

nsenter 与现代容器调试:为什么它仍然是重要工具

nsenter 与现代容器调试&#xff1a;为什么它仍然是重要工具 【免费下载链接】nsenter 项目地址: https://gitcode.com/gh_mirrors/ns/nsenter 在容器化技术飞速发展的今天&#xff0c;Docker 和 Kubernetes 已成为现代应用部署的标准。然而&#xff0c;当容器出现问题…...

Nucleus Co-Op:突破式本地多人游戏革新工具

Nucleus Co-Op&#xff1a;突破式本地多人游戏革新工具 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop Nucleus Co-Op是一款开源Windows工具&#…...

百度网盘提取码智能解析:5秒获取加密资源的3种高效方法

百度网盘提取码智能解析&#xff1a;5秒获取加密资源的3种高效方法 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 还在为百度网盘加密资源而烦恼吗&#xff1f;当你满怀期待打开分享链接&#xff0c;却被"请输入提取码&…...

告别广告骚扰:硬件狗狗绿色单文件版本体验

在当今的软件市场中&#xff0c;广告似乎已经成为了很多软件的标配。 用户在使用软件的过程中&#xff0c;不得不面对各种弹窗广告和界面广告的骚扰。 这不仅影响了用户的使用体验&#xff0c;也可能带来一些安全隐患。 而硬件狗狗的出现&#xff0c;为用户提供了一个全新的…...

计算机组成原理视角:解析GTE-Base-ZH在GPU上的计算与存储

计算机组成原理视角&#xff1a;解析GTE-Base-ZH在GPU上的计算与存储 最近在折腾一些文本嵌入模型&#xff0c;发现大家讨论模型效果的多&#xff0c;但聊它背后在硬件上怎么“跑”起来的少。这就像开车只关心能跑多快&#xff0c;却不看发动机是怎么工作的。今天&#xff0c;…...

如何快速去除Unity游戏马赛克:BepInEx插件终极指南

如何快速去除Unity游戏马赛克&#xff1a;BepInEx插件终极指南 【免费下载链接】UniversalUnityDemosaics A collection of universal demosaic BepInEx plugins for games made in Unity3D engine 项目地址: https://gitcode.com/gh_mirrors/un/UniversalUnityDemosaics …...