14day 仿百度页面

于 2022-07-08 11:55:14 发布
阅读量150 收藏 1
点赞数
文章标签： 前端 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59778168/article/details/125675640
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<!-- 引入外部样式 -->
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<link rel="icon" type="image/jpg" href="img/1.jpg">
	</head>
	<body>
		<!-- top -->
		<div class="top">
			<!-- top-left -->
			<div class="top_left">
				<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>
			<!-- top-right -->
			<div class="top_right">
				<a href="" class="set">设置</a>
				<input type="submit" value="登录" class="login">
			</div>
		</div>


		<!-- center -->
		<div class="center">
			<!-- logo -->
			<div>
				<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" width="200px"
					height="100px">
			</div>

			<!-- input -->
			<div>
				<input type="text" class="input_text">
				<input type="submit" value="百度一下" class="button">
			</div>

			<!-- table -->
			<div>
				<table>
					<tr>
						<td><b>百度热搜</b></td>
						<td style="text-align: right;">换一换</td>
					</tr>
					<tr>
						<td>
							<span>0</span>
							<span>多措并举助企稳就业</span>
						</td>
						<td>
							<span>3</span>
							<span>山东舰霸气壁纸</span>
						</td>
					</tr>
					<tr>
						<td>
							<span>1</span>
							<span>河南村镇银行多位储户称又被赋红码</span>
						</td>
						<td>
							<span>4</span>
							<span>通信行程卡时间范围由14天改为7天</span>
						</td>
					</tr>
					<tr>
						<td>
							<span>2</span>
							<span>约翰逊辞职后谁将接唐宁街烂摊子</span>
						</td>
						<td>
							<span>5</span>
							<span>山东新增66例本土无症状 在临沂</span>
						</td>
					</tr>
				</table>
			</div>

		</div>


		<!-- bottom -->
		<div class="bottom">
			<span>关于百度</span>
			<span>About Baidu</span>
			<span>京公网安备11000002000001号</span>
			<span>京ICP证030173号</span>
			<span>药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号</span>
			<span>^</span>
		</div>
	</body>
</html>

CSS文件


.center{
	width: 1200px;
	text-align: center;
}

.center > div:nth-child(2) > .input_text{
	border: 2px solid lightgray;
	border-right: 0px;
	border-radius: 10px 0 0 10px;
	width: 450px;
	height: 30px;
	
}
.center > div:nth-child(2) > .button{
	border: 0px;
	border-radius: 0 10px 10px 0;
	background-color: rgba(61,83,239,0.9);
	color: white;
	width: 80px;
	height: 34px;
	margin-left: -6px;
}

table{
	width: 530px;
	text-align: left;
	margin-top: 30px;
	margin-left: 28%;
	font-size: 1px;
}
td{
	height: 30px;
}

.bottom{
	width: 1200px;
	text-align: center;
	font-size: 1%;
	position: absolute;
	bottom: 2px;
}
洋洋酒仙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Python百日进阶-Web开发-Feffery】Day439 - fac实例：用dash仿百度智能云宣传页面
岳涛的博客
08-04 205
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓一、页面效果二、项目源码 前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名的React UI组件库ant design进行二次开发，将ant design中的诸多实用组件及特性引入Dash，帮助开发者使用极低的纯Python代码量，即可快速开发出现代化的交互式web应用，将你有关web应用的美好憧憬✨高效地实
【C++养成计划】不聊学习只谈干货（Day1）
不积跬步，无以至千里！
04-05 8969
给小白定制的专属《C++21天养成计划》，让你以最快的速度掌握C++编程
仿新版百度首页html模板
08-22
高仿新版百度首页html模板 DIV+CSS的 详细不多说，自己下来看就知道
模拟百度页面
m0_63004006的博客
05-22 1338
具体代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>百度一下，你就知道</title> <style type="text
HtmlUnit 模拟浏览器以及Cookie使用示例
xiaomin1991222的专栏
08-12 510
String url="http://outofmemory.cn/";//想采集的网址 String refer="http://outofmemory.cn/"; URL link=new URL(url); WebClient wc=new WebClient(); WebReque...
JAVA网络编程模拟浏览器获取html源代码（网络爬虫）
qq_44137156的博客
02-28 830
网络爬虫基本思路
html 仿浏览器选项卡,JavaScript浏览器选项卡效果
weixin_39874269的博客
06-05 183
有图如下:代码如下:/*head html : body html : */var Tab = function(id,title,url,isClose){this.id = id;this.title = title;this.url = url;this.head = jQuery('' + this.title +'');this.body = jQuery('').hide();isCl...
仿百度页面
代码小菜鸟
09-27 2879
百度 <head> <meta charset="utf-8"> <title>百度一下，你就知道</title> </head> <body> <table border="0px" width="1900px" height="955px"> <tr> <td align="right"> <a hr
仿作百度页面
m0_63920995的博客
05-21 791
仿作百度页面，先用HTML将百度页面的基本框架搭建好，然后在css中展开布局。 首先用盒子展开布局，将页面主要分为三个部分，上部为导航栏，中间为主题部分，包括搜索栏和热点，下部为尾部导航栏。再为每个盒子设置自己的内外边距和内容的居中，再将每个盒子中的字体大小，字体颜色为其分别设置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e
用css写的仿w3school静态网页
05-11
在项目“day07”中，我们可以预见到开发者将通过编写CSS代码来实现上述功能，同时可能还会涉及到字体样式、颜色、背景、过渡效果、动画等其他CSS特性。这个项目不仅有助于提升开发者对CSS的理解，也是实践和巩固CSS...
仿百度首页搜索html模板
10-11
仿百度首页关键词内容列表信息展示，包括html,css文件
HTML5仿夸克浏览器主页源码.zip
05-09
HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码 HTML5仿夸克浏览器主页源码
类似于百度-搜索引擎-仿真软件
06-22
类似于百度，谷歌的搜索引擎仿真软件，类含有详细的技术资料，物有所值！
仿Google页面效果完美版源码（HTML+JavaScript）
03-13
完美的仿Google页面效果，方便用户体验，还美观。用HTML+JavaScript实现，很容易调用。跟大家共享一下。
仿windows桌面的网页版WAP浏览器
08-18
asp+html+js写的仿windows桌面的网页版WAP浏览器。 界面效果：http://img.my.csdn.net/uploads/201408/18/1408347588_8172.jpg
苹果CMSv10最全系统标签,模板标签仿站必备
苹果cms10好看的模板
01-06 1万+
原文摘自：https://www.mytheme.cn/article.html ==模板结构= │─template/1/ 模板1 │ ├─info.ini 模板信息文件 │ ├─ads 广告文件目录 │ ├─js js文件 │ ├─css css文件 │ ├─images 图片文件 │ └─html 模板文件目录 │ └─art 文章模块模板目录 │ └─comment 评论模块模板目录 │ ...
CSDN前1000名博主
热门推荐
无知人生，记录点滴
05-26 7万+
博主 简介 stpeace 排名：1 原创：2166 粉丝：7180 积分：181660 等级：10stpeace的专栏中国本博客供大家交流，欢迎各抒己见。博文中的内容禁止用 yuanmeng001 排名：2 原创：5286 粉丝：10660 积分：170616 等级：10袁萌专栏无穷小微积分倡导者–北大教授null老师 yjclsx 排名：3 原创：162...
初学者的第二个实践，超简单的方式仿作百度页面
EX_small_white的博客
05-21 410
初学者较简单完地成静态百度页面
模仿github网页前端HTML,如何用github来展示你的前端页面？
weixin_33249090的博客
06-15 490
从开始学习前端的时候就在想如何可以把自己做的前端效果直接通过分享链接的方式展现给别人看就好了，之前一直以为必须要买域名，空间，还要会后台数据库什么什么的，还没开始就被吓到了，这段时间终于静下心来好好学习了，这才发现github还有这操作，真是相见恨晚呀，好啦废话就到这里，下面我们一起来看看如何用github来展示你的前端页面吧~准备1.注册github账号2.安装git3.常用 Git 命令开始1...
仿百度日历老黄历功能，带节日
最新发布
05-30
你想了解如何实现一个仿百度日历老黄历功能的日历吗？这个功能包括了节日信息、黄历信息和宜忌信息。以下是一个简单的 JavaScript 实现示例： ```html <!DOCTYPE html> 仿百度日历老黄历功能 table { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值