基于 HTML、CSS、JavaScript 的百度首页设计（二）

最新推荐文章于 2023-04-16 17:04:35 发布
最新推荐文章于 2023-04-16 17:04:35 发布
阅读量1.9k 收藏 36
点赞数 4
分类专栏： 前端H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42312310/article/details/100142210
版权

代码详解见（一）：https://blog.csdn.net/weixin_42312310/article/details/100141134

百度首页设计实现的完整代码

1. HTML核心代码：

<!DOCTYPE html>
<html>
    <head>
	    <title>我的百度首页</title>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
		<link type="text/css" rel="stylesheet" href="index.css" />
	</head>
	<body>
	    <div id="top">
		    <div id="weatherCtrl">
			    <span>厦门：<img src="images/cloud.jpg" width="20px" height="20px" />15℃-20℃｜空气质量 良好 </span>&nbsp;&nbsp;
			    |<span>皮肤</span>
			    |<span>意见反馈</span>
			    <br/><br/><div id="weather" class="hide">
				    <div class="div1">
					    <span>12月18号</span>&nbsp;
				        <span>农历十二</span>&nbsp;
					    <span>未来七天天气</span>&nbsp;<hr/>
				    </div>
				    <div class="div2">
			            <span>今天（周二）</span><br/>
		                <img src="images/sunny.jpg" width="50" height="50"/><br/>
			            <span>17℃-24℃</span><br/>
			            <span>晴</span><br/>
				        <span>优</span>
				    </div>
				    <div class="div2">
			            <span>明天（周三）</span><br/>
		                <span><img src="images/cloud.jpg" width="50" height="50"/></span><br/>
			            <span>10℃-21℃</span><br/>
			            <span>多云</span><br/>
				        <span>好</span>
				    </div>
				    <div class="div2">
			            <span>后天（周四）</span><br/>
		                <span><img src="images/yin.jpg" width="50" height="50"/></span><br/>
			            <span>10℃-20℃</span><br/>
			            <span>阴</span><br/>
					    <span>良</span>
				    </div>
				    <div class="div2">
			            <span>周五</span><br/>
		                <span><img src="images/cloud.jpg" width="50" height="50"/></span><br/>
			            <span>11℃-20℃</span><br/>
			            <span>多云</span><br/>
				        <span>好</span>
				    </div>
				    <div class="div2">
			            <span>周六</span><br/>
		                <span><img src="images/rain.jpg" width="50" height="50"/></span><br/>
			            <span>10℃-18℃</span><br/>
			            <span>小雨</span><br/>
				        <span>良</span>
				    </div>
				    <div class="div2">
			            <span>周天</span><br/>
		                <span><img src="images/cloud.jpg" width="50" height="50"/></span><br/>
			            <span>10℃-22℃</span><br/>
			            <span>多云</span><br/>
				        <span>好</span>
			        </div>
				</div>
			</div>
			<div id="other">
			    <ul>
				    <li><a target="_blank" data-tab="news" href="http://news.baidu.com/">新闻</a></li>  
				    <li><a target="_blank" data-tab="tieba" href="http://tieba.baidu.com/">贴吧</a></li>  
                    <li><a target="_blank" data-tab="zhidao" href="http://zhidao.baidu.com/">知道</a></li> 
				    <li><a target="_blank" data-tab="image" href="http://image.baidu.com">图片</a></li>  
				    <li><a target="_blank" data-tab="video" href="http://video.baidu.com/">视频</a></li>  
				    <li><a target="_blank" data-tab="map" href="http://map.baidu.com/">地图</a></li>  
				    <li><a target="_blank" data-tab="wenku" href="http://wenku.baidu.com/">文库</a></li>
					<li><a target="_blank" data-tab="edit" href="">设置</a><br/>
					    <br/><ul class="search">
						    <li><a href="#">搜素设置</a></li>  
                            <li><a href="#">高级搜素</a></li>  
                            <li><a href="#">页面设置</a></li>  
                            <li><a href="#">隐私设置</a></li>
						</ul>
					</li>
					<li><a target="_blank" href="http://www.baidu.com/more/" id="more">更多>></a></li>
				</ul>
			</div>
		</div><br/><br/>
		<div id="main" > 
			<div id="div_logo">                
                <img src="images/baidu_logo.jpg" alt="This is Baidu_logo"><br/><br/>          
                <form id="bdfm" target="_blank" name="bdfm" method="get" action="">
                    <div class="div-input">
                        <input type="text" name="word">
                        <label></label>
                    </div>
                    <button type="submit">百度一下</button>
                </form>             
            </div><br/><br/><br/><br/>
			<div id="div_tab" >
			    <table width="780" border="1" align="center">
				    <tr>
					    <td>
						    <div class="table">
							|<span id="tab1" onclick="tabSelect(1);">我的关注</span>&nbsp;
			                |<span id="tab2" onclick="tabSelect(2);">推荐</span>&nbsp;
			                |<span id="tab3" onclick="tabSelect(3);">导航</span>&nbsp;
							</div>
							<div id="tabCtr1"> 
							    <span class="text">▼我的导航</span><hr/>
			                    <img src="images/du.jpg" width="20" height="20"/>音乐&nbsp;&nbsp;&nbsp;&nbsp;
			                    <img src="images/du.jpg" width="20" height="20"/>视频&nbsp;&nbsp;&nbsp;&nbsp;
						        <img src="images/du.jpg" width="20" height="20"/>知道&nbsp;&nbsp;&nbsp;&nbsp;
						        <img src="images/du.jpg" width="20" height="20"/>电影&nbsp;&nbsp;&nbsp;&nbsp;<br/>
						        <hr/><div class="text">+自定义</div><hr/>
						        <img src="images/happy.jpg" alt="happy image is missing.."/>
							</div>
							<div id="tabCtr2" class="hide">
							    <span class="text">以下信息根据您的兴趣推荐</span><hr/>
								<a href="" align="center">内地与港澳人士热议港珠澳大桥：为大湾区发展带来新机遇</a><br/><br/>
								<img src="images/bridge1.jpg" alt="The bridge image is missing.." width="200" height="200"/>
			                    <img src="images/bridge2.jpg" alt="The bridge image is missing.." width="200" height="200"/>
			                    <img src="images/bridge3.jpg" alt="The bridge image is missing.." width="200" height="200"/><hr/><br/>
								<a href="">中国股市需要华为精神！！！</a><br/><br/>
								<img src="images/glod.jpg" alt="The glod image is missing.." width="200" height="200"/>
			                    <img src="images/glod1.jpg" alt="The glod image is missing.." width="200" height="200"/><hr/><br/>
								<a href="">牛骏峰《一本好书》实力上线 不愿妥协只做麦田里的守望者</a><br/><br/>
								<img src="images/watcher1.jpg" alt="The watcher image is missing.." width="150" height="200"/>
			                    <img src="images/watcher2.jpg" alt="The watcher image is missing.." width="200" height="200"/>
			                    <img src="images/watcher3.jpg" alt="The watcher image is missing.." width="200" height="200"/><hr/><br/>
							</div>
							<div id="tabCtr3" class="hide">
							    <span class="text">猜你喜欢</span><hr/><br/>
						        <img src="images/nuo.jpg" width="20" height="20" />百度糯米	&nbsp;&nbsp;					
						        <img src="images/qq.jpg" width="20" height="20" />腾讯&nbsp;&nbsp;
						        <img src="images/home.jpg" width="20" height="20" />汽车之家&nbsp;&nbsp;
						        <img src="images/taobao.jpg" width="20" height="20" />淘宝网&nbsp;&nbsp;
						        <img src="images/stor.jpg" width="20" height="20" />1号店&nbsp;&nbsp;
						        <img src="images/weib.jpg" width="20" height="20" />新浪微博&nbsp;&nbsp;
						        <img src="images/weixin.jpg" width="20" height="20" />微信&nbsp;&nbsp;
						        <img src="images/city.jpg" width="20" height="20" />58同城&nbsp;&nbsp;<br/><br/>
						        <img src="images/youxi.jpg" width="20" height="20" />小游戏&nbsp;&nbsp;
						        <img src="images/zhifu.jpg" width="20" height="20" />支付宝&nbsp;&nbsp;
						        <img src="images/road.jpg" width="20" height="20" />铁路客户&nbsp;&nbsp;
						        <img src="images/le.jpg" width="20" height="20" />乐视&nbsp;&nbsp;
						        <img src="images/dang.jpg" width="20" height="20" />当当网&nbsp;&nbsp;
						        <img src="images/yi.jpg" width="20" height="20" />易网&nbsp;&nbsp;
						        <img src="images/yigou.jpg" width="20" height="20" />苏宁易购&nbsp;&nbsp;
						        <img src="images/weir.jpg" width="20" height="20" />微软商店&nbsp;&nbsp;
						        <hr/><span class="text">其他资讯</span><hr/>
			                    <img src="images/JD.com.jpg" width="100" height="100"/>
			                    <img src="images/gan.jpg" width="100" height="100"/>
						        <img src="images/cctv.jpg" width="100" height="100"/>
						        <img src="images/people.com.jpg" width="100" height="100"/>
						        <img src="images/vip.jpg" width="100" height="100"/>
						        <img src="images/street.jpg" width="100" height="100"/>
						        <img src="images/ifeng.jpg" width="100" height="100"/>
						        <img src="images/qiy.jpg" width="100" height="100"/>
						        <img src="images/gome.jpg" width="100" height="100"/>
						        <img src="images/pin.jpg" width="100" height="100"/>
						        <img src="images/youku.jpg" width="100" height="100"/>
						        <img src="images/tmall.jpg" width="100" height="100"/>
						        <img src="images/tmallbest.jpg" width="100" height="100"/>
						        <img src="images/nuomi.jpg" width="100" height="100"/>
						        <img src="images/travel.jpg" width="100" height="100"/>
						        <img src="images/suning.jpg" width="100" height="100"/>
						        <img src="images/kdi.jpg" width="100" height="100"/>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="bottom" >
			<p>
			    <a href="" class="link_css">设为首页</a>&nbsp;&nbsp; &copy2017 Baidu <a href="">使用百度前必读</a>
  	            <a href="">意见反馈</a>京ICP证030173号<img src="images/ICP.jpg" /><br/> 
				<img src="images/jinggong.jpg"/>京公网安备110000002000001号
  	        </p>
	    </div>
	</body>
	<script type="text/javascript">
		$(function(){    		
    		$("#weatherCtrl").hover(
			  function () {
			   	$("#weather").fadeIn(1000);
			  },
			  function () {
			   	$("#weather").fadeOut(1000);
			  }
			);			
    	})
		function  tabSelect(idx){		
			for(var i=1;i<=3;i++){
				if(i==idx){
					$("#tabCtr"+i).show();
				}else{
					$("#tabCtr"+i).hide();
				}
			}
		}
	</script>
</html>

2. css代码：

body{
        background:url("images/keji.jpg");
        background-size:100%;
		
    }
/*天气css样式 */
#weatherCtrl{
	font-family:微软雅黑;
	float:left;
	font-size:15px;
}	
#weather{
	border:1px solid black;
	font-size:15px;
	position:absolute;
	z-index:100;
	background-color:white;
}
#weatherCtrl span:hover{ color:#ce7828de;}
#weather:hover{ color:#2e9814b8;}
.div1{
	position:relative;
}
.div2{
	position:relative;
	float:left;
}
/*其他css样式*/
#other{ 
		float:right;
	}  
#other ul{ list-style:none;}  
#other ul li{ float:left; line-height:1px; position:relative;}  
#other ul li a{color:black; display:block;padding:0px 10px;}  
#other ul li a:hover{ color:#2e9814b8;}   
#other ul li ul li{ float:left; line-height:30px;}  
#other ul li ul li a{ width:200%;}  
#other ul li ul li a:hover{ background-color:#18d9e2;}  
#other ul li:hover ul{ display:block}  
.search{
	border:1px solid black;
	position:absolute; 
	display:none;
	margin:10px 0;
	padding:5px 60px 0 0;
	background-color:white;
}
/*百度logo的css样式 */
#div_logo {
    width: 640px;	
    margin: auto;
}
#div_logo img{
	width: 270px;
    height: 130px;
    margin: 45px 50px 0 150px;
}
#div_logo button{
	width: 100px;
    height: 36px;
    float: left;
    border: none;
    font-size: 16px;
    line-height: 41px;
    text-align: center;
    background-color: #317EF3;
	color: white;
}
.div-input {
    width: 537px;
    overflow: hidden;
    position: relative;
    float: left;
}
.div-input > input {
    width: 487px;
    padding: 11px 50px 11px 5px;
    border: none;
}
.div-input > label {
    display: block;
    width: 18px;
    height: 16px;
    position: absolute;
    top: 13px;
    right: 10px;
    background: url("images/camera.jpg") no-repeat;
    cursor: pointer;
}
.div-input > label:hover {
    background-position: 0 -20px;
}
/*网页详细信息css样式 */
#tabCtr1{
	    background:url("images/bg2.jpg");
        background-size:100%;
    }
#tabCtr2{
	    background-color:#e7eab7;
        background-size:100%;
    }
#tabCtr2 a{font-family:宋体;font-size:20px;}
#tabCtr3{
	    background:url("images/bg4.jpg");
        background-size:100%;
    }
.table{
	background:url("images/bg1.jpg");
	font-family:隶书;
	font-size:28px;
}
.text{
	font-family:华文行楷;
	font-size:25px;
}
/* 网页底部css样式*/
#bottom p{
	text-align:center;
}
.link_css:visited{color:purple;}
#bottom a:hover{color:red;}

 .hide{
	display:none;
}
.show{
	display:block;
}

 

ScriptFlying
关注
  • 4
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
html+css+js百度首页制作+附源代码+实现简单【百度一下】功能
Miracle1203的博客
03-23 7463
文章目录写在前面页面效果百度网盘提取码 写在前面 本博客只为有需要的朋友提供借鉴。 课堂作业要求完成的，实现了基本功能，光标移上去变成小手，js实现了百度一下功能。页面布局没问题，页面样式没问题。 导航栏其他的部分链接没把网址改过来，导航栏位置天气未获取，有需要的可以多花点时间。就说到这，专业前端勿喷。 页面效果 实现百度一下功能 百度网盘提取码 链接：https://pan.baidu.com...
使用 js 实现百度的一个简单页面
Tan_tan_666的博客
12-05 1461
HTML &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;百度一下&lt;/title&gt; &lt;style type="text/css"&gt; .logo{ margin: 20px auto; width: 270px; height: 129px; } .png{
用HTML+CSS实现PC段百度主页效果(附详细说明和源代码)
记录分享学习路上的一些经验，欢迎关注！
04-16 3608
最近用HTML+CSS练习实现了百度主页网站页面效果，分享一下。
《HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）》代码下载、简介与前言
brucexia的专栏
04-22 6625
代码下载：https://pan.baidu.com/s/1o8aBMjw（密码：f3u2）图书简介本书由浅入深，系统、详尽地介绍了HTML5、CSS3和JavaScript相关技术及其在Web前端及移动应用开发领域的应用。书中提供了大量的代码示例，从基本原理到实战应用，几乎涉及了Web前端及移动应用开发的绝大部分内容。本书分为四篇，共17章。第一篇为HTML和HTML5技术，涵盖的内容包括HTM...
js模拟百度主页搜索功能
天痕
12-16 932
js模拟百度主页查询功能。查询框获取焦点的同时使用li标签显示最近所有查询结果。（其中可能会有重复数据，自己想办法去掉重复数据即可，在这里不提供该函数）。并根据输入结果自动匹配历史记录。
JS实现仿百度登录弹出界面
12-19
能够实现类似百度弹出的登录窗口能够实现类似百度弹出的登录窗口能够实现类似百度弹出的登录窗口能够实现类似百度弹出的登录窗口
基于javaScript+css+html开发的百度Web离线地图+gis系统+源码+开发文档+数据包（毕业设计&课程设计）
最新发布
06-09
基于javaScript+css+html开发的百度Web离线地图+gis系统+源码+开发文档+数据包，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于javaScript+css+html开发的...
基于HTML+CSS+JavaScript制作宠物类网站设计毕业论文源码
06-05
1、由于是英文网站，有的朋友下了某些HTML模板不知道怎么修改，可以百度Dreamweaver网站制作软件下载安装，打开网页后即可以可视化操作修改。 2、由于低版本IE不支持HTML5和CSS3技术，对于部分HTML5模板在IE6、7、8...
基于HTML+CSS+JavaScript制作婚纱照网站设计毕业论文源码
06-12
1、由于是英文网站，有的朋友下了某些HTML模板不知道怎么修改，可以百度Dreamweaver网站制作软件下载安装，打开网页后即可以可视化操作修改。 2、由于低版本IE不支持HTML5和CSS3技术，对于部分HTML5模板在IE6、7、8...
基于HTML+CSS+JavaScript制作仿时尚网站设计毕业论文源码
06-08
1、由于是英文网站，有的朋友下了某些HTML模板不知道怎么修改，可以百度Dreamweaver网站制作软件下载安装，打开网页后即可以可视化操作修改。 2、由于低版本IE不支持HTML5和CSS3技术，对于部分HTML5模板在IE6、7、8...
网页制作，百度首页
04-19
应用简单的html+css+js制作的模拟百度首页的网页，难度较易
HTML课程设计
05-16
html课程设计源码+文档
js实现前端网页HTML
06-04
简单的网页切换，个人简介，基本的js效果，图片切换，跑马灯效果、
html+css编写百度首页例子
11-30
百度首页很经典,使用HTML+ccss,适合新手参考！
基于HTML+CSS+JavaScript制作美容医疗网站设计毕业论文源码
06-08
1、由于是英文网站，有的朋友下了某些HTML模板不知道怎么修改，可以百度Dreamweaver网站制作软件下载安装，打开网页后即可以可视化操作修改。 2、由于低版本IE不支持HTML5和CSS3技术，对于部分HTML5模板在IE6、7、8...
基于 HTML、CSS、JavaScript 的百度首页设计（一）
ScriptFlying的博客
08-29 6996
1、主页面介绍 百度首页设计的结构：总体分为三个模块，即top模块，mian模块和bottom模块。其中top模块中包含两个小模块，即网页头部的左侧与右侧。左侧有天气、皮肤和意见反馈，其中主要实现了天气预报模块，右侧有新闻、贴吧、知道、图片、视频、地图、文库、设置和更多等，其中主要实现了设置模块的下拉框功能。mian模块包含百度logo与网页主体内容table两部分。百度logo模...
html,模仿制作百度首页
热门推荐
qq_39696269的博客
08-30 1万+
模仿百度首页，试着学习一个javaweb，第一个试着模仿 百度首页   !!!那些图片只能自己来找了!!! &lt;html&gt;     &lt;head&gt;         &lt;title&gt;百度页面&lt;/title&gt;         &lt;style&gt;             .searchBox{                 background-...
html基于webgis的网页设计的代码案例
08-24
### 回答1： 以下是一个基于WebGIS的网页设计的HTML代码案例，它使用了开放地图库Leaflet来...这个简单的示例展示了如何利用HTML和百度地图API实现一个基于WebGIS的网页设计，显示地图，并在地图上添加标注和信息窗口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值