百度一下首页制作(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

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…

【课程系列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…

基于自编码器的滚动轴承异常检测方法(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节点…

​海康威视 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)。企业如果没有采取足够…

产品Web3D交互展示有什么优势?如何快速制作?

智能互联网时代&#xff0c;传统的图片、文字、视频等产品展示方式&#xff0c;因为缺少互动性&#xff0c;很难引起用户的兴趣&#xff0c;已经逐渐失去了宣传优势。 Web3D交互展示技术的出现&#xff0c;让众多品牌和企业找到了新的方向&#xff0c;线上产品展示不在枯燥无趣…

最小公倍数的求法

什么是最小公倍数&#xff1f; 最小公倍数是指两个或多个整数共有的最小正整数倍数。 如何求一组数据的最小公倍数&#xff08;Least Common Multiple&#xff0c;简称LCM&#xff09;&#xff1f; LCM 这组数据的公倍数 这组数据的最大公约数 (Greatest Common Divis…

前端页面实现【矩阵表格与列表】

实现页面&#xff1a; 1.动态表绘制&#xff08;可用于矩阵构建&#xff09; <template><div><h4><b>基于层次分析法的权重计算</b></h4><table table-layout"fixed"><thead><tr><th v-for"(_, colI…

可视化表单拖拽生成器优势多 助力流程化办公!

当前&#xff0c;很多企业需要实现流程化办公&#xff0c;进入数字化转型时期。要想实现这一目标&#xff0c;就需要借助更优质的平台产品。低代码技术平台是得到企业喜爱的发展平台&#xff0c;拥有可视化操作、灵活、高效、更可靠等优势特点&#xff0c;在推动企业实现流程化…

记录vue一个echarts页面 柱状图加平均分横线 双柱状图 横向双柱状图

<template><div class"app-container"><el-form :model"queryParams" ref"queryForm" size"small" v-show"showSearch" label-width"85px"><el-form-item label"园所名称" prop&q…

Vue发送http请求

1.创建项目 创建一个新的 Vue 2 项目非常简单。在终端中&#xff0c;进入您希望创建项目的目录(我的目录是D:\vue)&#xff0c;并运行以下命令&#xff1a; vue create vue_test 2.切换到项目目录&#xff0c;运行项目 运行成功后&#xff0c;你将会看到以下的编译成功的提示…

使用二进制安装安装docker

在一些情况下无法使用yum安装docker下面写了一个使用二进制安装docker的文档 官网下载地址https://download.docker.com/linux/static/stable/x86_64/ 可以按需求下载 wget https://download.docker.com/linux/static/stable/x86_64/docker-20.10.10.tgz 下载包 tar xf dcker…

要改Google签名?这些你足够了解吗!

大家好&#xff0c;我是小编阿文。欢迎您关注我们&#xff0c;经常分享有关Android出海&#xff0c;iOS出海&#xff0c;App市场政策实时更新&#xff0c;互金市场投放策略&#xff0c;最新互金新闻资讯等文章&#xff0c;期待与您共航世界之海。 老项目keystore签名信息包含国…

瑞数信息入选IDC《中国WAAP厂商技术能力评估,2024》

5星满分&#xff1a;WAF、Bot流量管理、行业应用等评估维度 日前&#xff0c;全球领先的IT市场研究和咨询公司IDC发布《中国WAAP厂商技术能力评估&#xff0c;2024》。报告聚焦WAAP能力&#xff0c;通过对中国市场中主要WAAP产品提供商的技术评估以及对大量最终用户的客观访谈…