文档章节

用我对HTML的点点理解来做个简单的百度首页

闻术苑
 闻术苑
发布于 2012/11/28 23:55
字数 652
阅读 2038
收藏 6

    在我心里,HTML一直以来都是一个新鲜而神秘的东西,好多次想静下心来研究研究,最终因为各种原因搁置下来。终于,最近终于有时间看看其中的奥妙了。

    通过最近的学习,对它有了一定的了解,虽然不是很深入,但是可以拿的出手,跟大家分享一下。希望促进彼此的学习。

    我对HTML的第一感觉就是,结构清晰,使用方便,可能这也是浏览器语言的优势与必须要具有的特性吧。因为任何一种臃肿的语言,都满足不了浏览器速度或性能的要求。

    最近有试着编写一下小代码,越来越有感觉,其实如果要做好HTML,是需要足够的耐心的,因为你要不断地保证标签的前后匹配与样式的施用准确。

    遵循以往的风格,我们用代码来讨论HTML吧!

    规划图:


代码:(注:这是个粗糙的不能再粗糙的代码,有兴趣的朋友可以继续完善,百度与大牛勿怪:-D)

<html>
	<!--首先来分析一下,我要实现的是静态页面,我们可以把
百度首页划分成七个区域:
	1.标签栏:直接在head里设置title即可,ico先忽略
	2.搜索设置,登录,注册,作为第一个块,用链接实现
	3.logo:作为第二个块,用img载入
	4.搜索种类标签页:第三个块,用链接实现
	5.输入框与按钮:第四个块,用表单实现
	6.更多:第五个块用链接实现
	7.最底下的各种,用表格加链接实现-->
	<head>
		<title>百度一下,你就知道</title>
		<meta http-equiv="content-type" 
		content="text/html;charset=gbk">
		<!--下面标题是显示在浏览器标签上的名字-->
		<style>
			body{
				font-size:12px;
			}
			#d1{
				float:right;
			}
			a{
				color:blue;
				margin-right:3px;
			}
			a:hover{
				color:red;
			}
			table{
				align:center;
			}
		</style>
	</head>
	<body>
		<!--第一个块-->
		<div id="d1" style="margin-right:20px;">
			<a href="http://www.baidu.com/gaoji/preferences.html">搜索设置</a>
			<a>|</a>
			<a href="#">登录</a>
			<a href="https://passport.baidu.com/v2/?reg&regType=1&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">注册</a>
		</div>
		<div style="height:40px;"></div>
		<!--第二个块-->
		<div>
			<center><img src="logo.png"></center>
		</div>
		<!--第三个块-->
		<div style="font-size:14px;margin-top:30px;">
			<center>
				<a href="#">新 闻</a>
				<a href="#">网 页</a>
				<a href="#">贴 吧</a>
				<a href="#">知 道</a>
				<a href="#">音 乐</a>
				<a href="#">图 片</a>
				<a href="#">视 频</a>
				<a href="#">地 图</a>
			</center>
		</div>
		<!--第四个块-->
		<div style="margin-top:5px;">
			<center><input type="text" style="width:390px;height:30px;"/><center>
			
		</div>
	</body>
</html>

© 著作权归作者所有

共有 人打赏支持
闻术苑
粉丝 63
博文 165
码字总数 68374
作品 0
济南
产品经理
私信 提问
php实现QQ、微博第三方登录演示与下载

请直接登陆官方网站查看演示:http://www.erdangjiade.com/js/288.html 效果图片如下: 目前可用登录平台为:腾讯QQ,腾讯微博,新浪微博,网易微博,人人网,360,豆瓣,Github,Google,M...

2当家的
2017/08/15
43
0
聊一聊百度移动端首页前端速度那些事儿

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794 这一期,咱们一...

侯禹
2016/07/06
4.4K
32
网站被百度提示有风险,该如何解决?网站被黑怎么办?

网站在最近被百度提示有风险,导致网站流量急剧的下滑,从百度点击进去会直接跳转到什 么博彩赌博的网站上去,360提示:未经证实的博彩赌博网站 您访问的网站含有未经证实的境外博 彩或非法赌...

网站安全
2018/05/31
0
0
SEO关键词策略

seo关键词策略 选择关键词的六大技巧 列出在整个行业内自己知道或者心中所想的所有关键词,最少列30个 分析竞争对手的网站,看都用了哪些关键词 咨询周围的朋友平时在搜索相关产品的时候会使...

发骚的小逗比
2016/05/05
12
0
客户让我们帮他做推广,说是应该的。。。

帮客户做好了一个系统,已经上线,但在百度排名在第三页,客户不乐意了,让我们给他们做百度排名,要在首页靠前展示...我表示我们合同中没有说明推广也是我们来做,他们说过去做的项目都是外...

java小愤青
2014/10/28
422
7

没有更多内容

加载失败,请刷新页面

加载更多

如何开发一款以太坊(安卓)钱包系列2 - 导入账号及账号管理

这是如何开发一款以太坊(安卓)钱包系列第2篇,如何导入账号。有时用户可能已经有一个账号,这篇文章接来介绍下,如何实现导入用户已经存在的账号。 导入账号预备知识 从用户需求上来讲,导...

Tiny熊
今天
2
0
intellJ IDEA搭建java+selenium自动化环境(maven,selenium,testng)

1.安装jdk1.8; 2.安装intellJ; 3.安装maven; 3.1 如果是单前用户,配置用户环境变量即可,如果是多用户,则需配置系统环境变量,变量名为MAVEN_HOME,赋值D:\Application\maven,往path中...

不最醉不龟归
今天
3
0
聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
2
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
2
0
《万历十五年》的读后感作文4000字

《万历十五年》的读后感作文4000字: 万历十五年,即1587年,距今已过去432年。在明朝276的历史中,这一年很平淡,并没有什么特别之处。黄仁宇的《万历十五年》一书,有别于其他的历史叙述方...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部