网页练习之仿百度首页

最新推荐文章于 2024-06-17 09:02:24 发布
最新推荐文章于 2024-06-17 09:02:24 发布
阅读量636 收藏 1
点赞数
分类专栏： HTML学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hym_eric/article/details/78191402
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>模仿百度一下，你就知道</title>

<style>

	*{margin:0; padding:0;}
	.wrap{width:100%;}
	.header{width:100%; height:80px;}
	.mainbody{width:70%; height:620px; margin:0 auto;}
	.footer{margin:75px auto 25px; width:270px; height:129px;}
	div div ul li{float:right;}
	.font1{color:#333;
		font-weight:bold;
		line-height:24px;
		margin-left:20px;
		font-size:13px;}
	.font2{color:#333;
		line-height:24px;
		margin-left:20px;
		font-size:13px;}
	.font3{
		display:block;
		text-align:center;
		font-size:13px;
		width:60px;
		hegiht:24px;
		line-height:24px;
		margin:0 10px 0 20px;
		background:#3385ff; color:#fff;
		text-decoration:none;
		}
	ul{list-style:none; position:absolute; top:20px; right:5px;}
	.logo{display:block; margin:75px auto 25px; width:270px; height:129px;}
	#submit{width:100px; height:36px; background:#3385ff; border:1px; solid: #06f; color:#fff; font-size:15px;}
	#search{width:526px; height:36px;}
	.tubiao{width:630px; margin:0 auto;}
	.qrcode_text{float:left; height:46px; line-height:23px; font-size:12px; margin:8px 0 0 10px;}
	.qrcode_img{float:left;position:center;}
	.qrcode{width:160px; height:65px;margin:0 auto;}
	.qrcode1{margin:0 20px;}
	span{color:#666; font:12px; arial}
	span1{color:#666;}
	.text1{color:#666;font:12px arial}
	.text2{color:#666;font:12px arial}
	.banquan{float:left; width:340px; padding:5px 0px;line-height:28px;}
	ul li ul li{float:none;}
	
</style>

</head>

<body>
<div class="wrap">
	<div class="header">
		<ul>
			<li><a href="#" class="font3">更多产品</a></li>
			<li><a href=="#" class="font2">设置</a>
<!--				<ul>
				  <li><a href="#">搜索设置</a></li>
				  <li><a href="#">高级搜索</a></li>
				  <li><a href="#">关闭预测</a></li>
				  <li><a href="#">搜索历史</a></li>
				</ul>-->
			</li>
			
			<li><a href="#" class="font2">登录</a></li>
			<li><a href="#" class="font1">贴吧</a></li>
			<li><a href="#" class="font1">视频</a></li>
			<li><a href="#" class="font1">地图</a></li>
			<li><a href="#" class="font1">hao123</a></li>
			<li><a href="#" class="font1">新闻</a></li>
			<li><a href="#" class="font1">糯米</a></li>
		</ul>
		
	</div>
	
	<div class="mainbody">
		<img class="logo" src="https://www.baidu.com/img/bd_logo1.png">
		<div class="tubiao">
			<input type="search" name="search" id="search"/><input type="submit" name="submit" id="submit" value="百度一下"/>
        </div>
	</div>
	
	<div class="footer">
			<div class="qrcode">
				<div class="qrcode_img">
				<img src="baiduqrcode.png" width="60" height="60"/>
				</div>
				<div class="qrcode_text" >
					<p><strong>手机百度</strong></p>
					<p><span1>快人一步</span1></p>
				</div>
			</div>
			
			<div class="banquan">
				<p><a href="#" class="text1">把百度设置为主页</a>   <a href="#" class="text1">关于百度</a>   <a href="#" class="text1">About Baidu</a></p>
				<p><span>@2017 Baidu <a href="#" class="text2">使用百度前必读</a> <a href="#" class="text2">意见反馈</a> 京ICP证030173号</span></p>
			</div>
			
	</div>

</div>
</body>

</html>



效果见上传图片。





Hym_eric
关注
专栏目录
仿制百度页面
qq_51773304的博客
06-03 208
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="第三次作.
仿百度首页搜索html模板
10-11
仿百度首页关键词内容列表信息展示，包括html,css文件
仿百度首页
08-14
百度首页的模仿制作
仿百度页面设计
weixin_50835854的博客
12-14 1647
题目 通过对百度首页的布局进行分析，编写代码实现整个网页的设计过程。掌握网页设计布局的基本流程。 原图 第一步 div分块 初步可以分成五个板块 挨个分析 第一块 几个超链接，在写几个空格，再加一个button按钮即可 整体要居右 附上代码 <div align="right"> <a href="#">糯米</a>&nbsp; <a href="#">新闻</a>&nbsp; <a href="#">hao1
简单百度页面模仿
人生当苦无妨
08-18 500
代码部分 非常简单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { text-align: center;/*元素居中*/ } body { font-size: 16px; /*调整文字大小*/ } .width { wid
网页设计作业仿百度首页
04-13
在这个特定的作业中，“网页设计作业仿百度首页”是一个练习项目，旨在模仿国内知名搜索引擎百度的主页，以帮助学习者掌握网页布局、样式设计以及交互实现的基本技巧。 首先，我们来探讨HTML（HyperText Markup ...
实训.rar网页设计--百度 本地生活 华为小练习 枣院小网站 支付宝
07-07
首先，"百度"是全球最大的中文搜索引擎，它的网页设计简洁、高效，注重用户体验。学习其设计风格可以帮助我们理解如何有效地组织信息，优化搜索功能，并创建用户友好的界面。在实训过程中，可以尝试模仿百度的页面...
模仿百度首页简单练习.rar
12-08
在这个项目中，学生将有机会模仿百度首页的界面进行重构，从而熟悉网页开发的基本流程。 首先，我们需要了解HTML（HyperText Markup Language），它是构建网页内容的主要语言。在文件列表中，"baidu.html"是项目的...
爬虫百度贴吧分页练习
12-21
【爬虫百度贴吧分页练习】是一个Python编程实践项目，主要目标是抓取百度贴吧特定主题的多页帖子。在进行网页爬虫时，我们通常需要处理网站的反爬虫策略，因此本练习中引入了多个`User-Agent`来模拟不同的浏览器访问...
HTML网页练习之努比亚官网模仿制作
12-01
使用HTML+CSS+JavaScript进行的网页搭建制作，网页中所用的代码和素材都包含在压缩包中。资源涉及基本HTML标签的使用和CSS样式的设置，适合web前端入门练习，欢迎大家下载参考。
百度首页html代码
11-06
利用纯html语言编写的百度首页，是本上实现了百度界面模块
仿新版百度首页html模板
08-22
高仿新版百度首页html模板 DIV+CSS的 详细不多说，自己下来看就知道
HTML仿百度首页未登录静态界面代码
10-24
有关于仿百度首页未登录静态界面代码，首页功能都做到了，只是可能代码会有些冗长，敬请谅解！如果有遇到问题，可以互相探讨！
HTML仿百度首页登录后的静态界面代码
10-24
有关于仿百度首页登录后的静态界面代码，有些功能还没有完善，所以希望能借这次机会跟几位大佬互相讨论下，帮忙完善下其他功能！不过做完的一些功能可以互相参考借鉴！
模仿百度首页
chaotongshi2084的博客
07-25 695
HTML代码如下： <!DOCTYPE html> <html> <head> <title>百度一下，你就知道</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body> <div cl...
仿百度首页小练习
weixin_41005658的博客
04-03 247
html的代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/index.css" rel="stylesheet"> <title>百度界面仿写</title> </head>...
练习html,css,js仿制百度首页
weixin_30619101的博客
07-31 445
1.练习目的 练习使用html,scc,js 完成界面样式，用ul标签实现文本框下拉，通过js完成添加列表内容等功能 2.效果 3.程序代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>baidu</title> &lt...
仿百度首页 网页设计 html源码 大作业
最新发布
VX_laoxuezhangzy的博客
06-17 150
👉文末查看项目源码 作品编号：0557 页面数目：1页 技术特点：html+css 仿百度搜索首页
百度之星2010程序设计大赛复赛解析：A+B问题与i-Doctor
"百度之星2010程序设计大赛的复赛试题包含了多个编程挑战，如A+B问题、i-Doctor、url规范化、并行修复和猜猜你在哪儿等。" 在这些试题中，我们可以深入探讨以下几个知识点： 1. A+B问题： 这是一个基础的数学加法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值