本篇文章主要给大家介绍一下如何使用html+css来制作百度首页页面。
1)制作页面所用的知识点
我们首先来分析一下百度首页的页面效果图
百度首页由头部的一个文字导航,中间的一个按钮和一个输入框以及下边的文字简介和导航组成。
我们这里主要用到的知识点就是列表标签(ul)的使用、浮动(float)的使用以及输入框(input)的样式控制。
1、列表标签ul(头部和底部的文字链接导航都有相同的颜色大小以及间距,我们可以使用ul和li来表示每个对应的文字导航);
2、浮动元素float(每个li元素我们需要使用float:left;让其左对齐,中间的两个input我们需要使用float:left;来让其左对齐,这里涉及到了我们之前讲解的如何清除浮动的影响);
3、输入框input(通过控制输入框的宽高、边框以及填充来使input变成我们想要的效果)
2)具体的实现代码
整体的百度实现代码如下所示:
好了,本篇文章就给大家说到这里,大家自己动手写一下百度首页看能不能写出一样的页面效果出来,有需要源码的可以直接私信我即可。
每日金句:沉重的担子是由那些有着坚强的肩膀的人来挑的。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。