百度一下首页制作(HTML+CSS)

部分代码展示:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>百度一下,你就知道</title><style type="text/css">/*清除元素默认性质*/body { margin: 0;padding: 0;list-style: none;text-decoration: none;font-size: 1;font-family: "宋体";background-color: white;}/*全部a元素的基础属性*/a {     color: #00c;text-decoration: none;}a:hover{color:red;text-decoration: underline;}/*顶部的行*/#topline {  text-align: right;font-size:20px;margin:10px 10px;}/*百度图标*/#logo {  margin-top: 10px;text-align: center;}/*百度应用*/#apps {  margin-top: 20px;text-align: center;font-size: 30px;font-weight: bold;}/*搜索*/#search {margin-top: 20px;text-align: center;}#search #enter{  /*搜索内容*/width:600px;height:30px;font-size: 20px;font-weight: 400;vertical-align: middle;border: 1px solid black;border-radius: 10px 10px 10px 10px;}#search #submit{  /*搜索按钮*/width:100px;height:37px;font-size: 20px;font-weight: 500; vertical-align: middle;cursor: pointer;color: white;background-color:#3836E0;border: 1px solid black;border-radius: 10px 10px 10px 10px;}/*热搜*/#hotnews #title {margin-top: 50px;}#hotnews #title a{font-size: 20px;font-family: Arial Bold;font-weight: 900;color:black;margin-left: 485px;}#hotnews #hotlist{display: flex;justify-content: center;}#hotnews #hotlist ul {padding-top: 5px;width: 280px;display: inline-block;}#hotnews #hotlist li{height: 36px;line-height: 36px;font-size: 20px;text-align: left;}#hotnews #hotlist a{height: 36px;line-height: 36px;font-size: 20px;padding-left: 20px;}#hotnews ul{list-style-type:none;}#hotnews #top3{font-weight: bold;}#hotnews #top3 #one,#hotnews #top3 #one a{color: #cc061d;}#hotnews #top3 #two,#hotnews #top3 #two a{color: rgb(240, 105, 15);}#hotnews #top3 #three,#hotnews #top3 #three a{color: #f0a923;}#hotnews #else ul li,#hotnews #else ul li a{color:#72747d}/*底部的行*/#bottomline{margin-top: 240px;position: absolute;left: 50%;    transform: translateX(-50%); }</style>
</head>
<body><div id="topline"><a href="https://www.baidu.com/gaoji/advanced.html">设置</a>|<a href="https://passport.baidu.com/">登录</a></div><div id="logo"><a href="https://www.baidu.com/" target="_blank"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="点此进入百度官网" width="370" height="180"></a></div><div id="apps"><a href="http://news.baidu.com/" target="_blank">新闻</a><a href="https://map.baidu.com/" target="_blank">地图</a><a href="http://image.baidu.com/" target="_blank">图片</a><a href="https://haokan.baidu.com/" target="_blank">视频</a><a href="http://tieba.baidu.com/" target="_blank">贴吧</a><a href="https://wenku.baidu.com/" target="_blank">文库</a><a href="https://baike.baidu.com/" target="_blank">百科</a><a href="https://www.baidu.com/more/" target="_blank">更多>></a></div><div id="search"><input id="enter" type="text" maxlength="25" value="最多输入20个字"/><input id="submit" type="submit" value="百度一下"/></div><div id="hotnews"><div id="title"><a href="https://top.baidu.com/" target="_blank">百度热搜></a></div>

界面展示: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/30582.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端传进来的单选值是0,到了后端加了个逗号

如上图所示&#xff0c;标记的var的值org和id的值orgOrNot不能一样&#xff0c;如果一样&#xff0c;通过id获取&#xff08;#(“#orgOrNot”).find(“option:selected”).val()&#xff09;时候就会出现这种情况 改成如下情况&#xff0c;区别开id

java基础·小白入门(三)

目录 类的继承基本概念方法覆盖Object类 抽象类接口枚举和包枚举 包 类的继承 基本概念 继承是一种由已有的类创建新类的机制。在Java中&#xff0c;通过关键字extends继承一个已有的类&#xff0c;被继承的类称为父类&#xff08;超类&#xff0c;基类&#xff09;&#xff…

C++语法17 利用for循环进行求和与求积

语法阶段已经更新到第17章了&#xff0c;前面的知识你都学会了吗&#xff1f;如果还没有学习前面的知识&#xff0c;请点击语法专栏进行[http://t.csdnimg.cn/7EcJm]学习哦&#xff01; 目录 循环求和 整数求和 解析 参考代码 分数求和 解析 参考代码 偶数求和 解析 参…

opencv学习笔记(1)

图像&视频的加载与展示 如何通过OpenCV创建显示窗口 namedWindow():创建一个窗口&#xff0c;并给窗口起一个名字&#xff0c;当起好名字后&#xff0c;可以选择显示哪个窗口 imshow()&#xff1a;显示窗口 &#xff0c;第一个参数是窗口的名字&#xff0c;如果没有会自动…

代码随想录训练营第十四天 226翻转二叉树 101对称二叉树 104二叉树的最大深度 111二叉树的最小深度

第一题&#xff1a; 原题链接&#xff1a;226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 递归法&#xff1a;使用中序遍历的操作&#xff0c;中左右&#xff0c;在遍历到中间节点的时候对它左右节点进行交换。 代码如下&#xff1a; /*** Def…

BC-Linux 8.6最小化安装的服务器启用GNOME图形化界面

本文记录了BC-Linux 8.6最小化安装的服务器如何启用GNOME图形化界面的过程。 一、服务器环境 1、系统版本 [rootlocalhost ~]# cat /etc/os-release NAME"BigCloud Enterprise Linux" VERSION"8.6 (Core)" ID"bclinux" ID_LIKE"rhel fe…

在VScode中创建PHP环境

一、下载PHP Server 和 PHP Debug这两个扩展 二、下载完成之后&#xff0c;在VScode中&#xff0c;打开我们写代码的文件 这里是我事先创建好的一些文件&#xff0c;本次环境搭建只需要创建一个.php后缀的文件即可。 先选中.php文件&#xff0c;再点击文件。 点击首选项&#x…

AI之Lambda index

简介 Lambda index 是一个用于衡量语言模型性能的指标,它主要评估模型在生成文本时的语言连贯性和逻辑性。它是由 OpenAI 在发布 GPT-3 模型时提出的。 具体来说,lambda index 反映了模型生成的文本中单词与上下文的关联程度。它的计算方式如下: 1、给定一个文本序列 X (x1…

使用npm发布自己的插件包

文章目录 1. 准备工作1.1 拥有一个npm账号1.2 准备你的插件代码1.3 编写package.json文件 2. 本地测试3. 发布到npm3.1 登录npm3.2 发布插件3.3 更新插件 4. 注意事项 在JavaScript和Node.js的生态系统中&#xff0c;npm&#xff08;Node Package Manager&#xff09;是一个非常…

游戏中的寻路算法研究

1)Unity NavMesh研究 思考&#xff1a;毫无疑问&#xff0c;unity中自带的navmesh寻路是比较健全的&#xff0c;无奈在服务器中无法使用&#xff0c;这样子我们没办法做怪的导航&#xff0c;但是可以先体验下都有哪些api&#xff0c;并且可以可视化的看效果。 1)打开导航网格…

【课程系列05】某心科技AI大模型微调实战营-应用篇

网盘链接 链接: https://pan.baidu.com/s/1oARULXsXn8frkqq4ZKHBLA --来自百度网盘超级会员v6的分享 课程收获 课程内容涉及大模型的介绍、Transformer、Encoder、高级微调技术、Alpaca、AdaLoRA、QLoRA、Prefix Tuning和Quantization等主题 课程截图

龙芯LS2K0300久久派上手体验

介绍 芯片 龙芯2K0300芯片是一款基于LA264处理器核的多功能SoC芯片&#xff0c;可广泛适用于工业控制、通信设备、信息家电和物联网等领域&#xff1b;该芯片采用高集成度设计&#xff0c;可提供丰富的功能接口&#xff0c;满足多场景应用需求&#xff0c;同时支持低功耗技术…

VMware 虚拟机共享宿主机文件夹

一、背景 在虚拟机中&#xff0c;需要写文件到宿主机的文件系统中 宿主机的文件共享给虚拟机使用 这些场景就涉及到VM的虚拟机怎么访问宿主机的磁盘文件夹 二、软件背景 宿主机&#xff1a;window机器&#xff0c;本文是win7 虚拟软件&#xff1a;VMware12.5.6&#xff0…

小山菌_代码随想录算法训练营第二十七天| 93.复原IP地址 、

93.复原IP地址 文档讲解&#xff1a;代码随想录.复原IP地址 视频讲解&#xff1a;回溯算法如何分割字符串并判断是合法IP&#xff1f;| LeetCode&#xff1a;93.复原IP地址 状态&#xff1a;已完成 代码实现 class Solution { private:vector<string> result; // 记录结…

基于自编码器的滚动轴承异常检测方法(NASA-IMS数据,Python)

代码较为简单。 import numpy as np import pandas as pd from tensorflow import keras from tensorflow.keras import layers from matplotlib import pyplot as plt df_stats_Ch1_test2 pd.read_csv("estadisticos_test2_ch1.csv" , sep ,) X_Ch1 df_stats_Ch…

移植案例与原理 - HDF驱动框架-驱动配置(2)

1.2.7 节点复制 节点复制可以实现在节点定义时从另一个节点先复制内容&#xff0c;用于定义内容相似的节点。语法如下&#xff0c;表示在定义"node"节点时将另一个节点"source_node"的属性复制过来。 node : source_node示例如下&#xff0c;编译后bar节点…

5分钟了解单元测试

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、什么是单元测试&#xff1f; 单元测试是指&#xff0c;对软件中的最小可测试单元在与程序其…

​海康威视 isecure center 综合安防管理平台任意文件上传漏洞

文章目录 前言声明一、漏洞描述二、影响版本三、漏洞复现四、修复方案 前言 海康威视是以视频为核心的智能物联网解决方案和大数据服务提供商,业务聚焦于综合安防、大数据服务和智慧业务。 海康威视其产品包括摄像机、多屏控制器、交通产品、传输产品、存储产品、门禁产品、消…

项目五 OpenStack镜像管理与制作

任务一 理解OpenStack镜像服务 1.1 •什么是镜像 • 镜像通常 是指一系列文件或一个磁盘驱动器的精确副本 。 • 虚拟机 所使用的虚拟磁盘&#xff0c; 实际上是 一种特殊格式的镜像文件 。 • 云 环境下尤其需要 镜像。 • 镜像 就是一个模板&#xff0c;类似于 VMware 的虚拟…

DDoS攻击增速惊人,谈谈防御DDoS攻击的几大有效方法

过去的十年里&#xff0c;DDoS攻击是计算机科学领域中最“头疼”的问题之一。Gcore发现&#xff0c;DDoS攻击增速惊人&#xff0c;2021年DDoS攻击峰值流量为300Gbps&#xff0c;2022年增至650 Gbps&#xff0c;2023 年Q3-Q4季度增至1600 Gbps (1.6 Tbps)。企业如果没有采取足够…