使用html、css创建与谷歌搜索页面相似的页面

需要帮助

我使用position:absolute来定位我的谷歌徽标、搜索栏和按钮

还有其他更具时效性的方法，可以提供更干净的代码（我正在寻找更好的选择，因为我在这方面还很在行…）

也就是说，有没有一种方法可以为我想在页面底部显示的元素创建导航栏。元素，其中一些将向左对齐，另一些将向右对齐

以下是我的代码：

ul{
列表样式类型：无；
保证金：0；
填充：0；
背景色：透明；
}
李{
显示：块；
浮动：对；
}
李阿{
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
按钮a{}
.谷歌标志{
位置：绝对位置；
保证金：10em 32.5em；
}
.感到幸运{
位置：绝对位置；
保证金：20em 32.5em；
宽度：400px；
}
#搜索栏{
位置：绝对位置；
顶部：260px；
左：375px；
宽度：580px；
高度：30px；
边框：1px实心#cdcdcd；
}
#搜索按钮{
位置：绝对位置；
顶部：310px；
左：550px；
边框：1px实心#DCDC；
边框颜色：rgba（0,0,0,0.1）；
颜色：#444！重要；
字体大小：11px；
字体大小：粗体；
填充：8px；
背景：-webkit线性渐变（顶部，#f5，#f1f1）；
边界半径：2px；
}
#幸运按钮{
位置：绝对位置；
顶部：310px；
左：680px；
边框：1px实心#DCDC；
边框颜色：rgba（0,0,0,0.1）；
颜色：#444！重要；
字体大小：11px；
字体大小：粗体；
填充：8px；
背景：-webkit线性渐变（顶部，#f5，#f1f1）；
边界半径：2px；
}
.页脚{
位置：绝对位置；
右：0；
底部：0；
左：0；
填充：1rem；
背景色：#EFEF；
文本对齐：居中；
边缘：20em；
}

谷歌主页

考虑到您当前页脚的外观，我的工作假设是您甚至想要分散。请看下面的代码。这是用bootstrap3实现的，但是如果你是新手，我建议你使用bootstrap4或者具体化一次尝试并练习一下

ul{
列表样式类型：无；
保证金：0；
填充：0；
背景色：透明；
}
李{
显示：块；
浮动：对；
}
李阿{
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
按钮a{}
.谷歌标志{
位置：绝对位置；
保证金：10em 32.5em；
}
.感到幸运{
位置：绝对位置；
保证金：20em 32.5em；
宽度：400px；
}
#搜索栏{
位置：绝对位置；
顶部：260px；
左：375px；
宽度：580px；
高度：30px；
边框：1px实心#cdcdcd；
}
#搜索按钮{
位置：绝对位置；
顶部：310px；
左：550px；
边框：1px实心#DCDC；
边框颜色：rgba（0,0,0,0.1）；
颜色：#444！重要；
字体大小：11px；
字体大小：粗体；
填充：8px；
背景：-webkit线性渐变（顶部，#f5，#f1f1）；
边界半径：2px；
}
#幸运按钮{
位置：绝对位置；
顶部：310px；
左：680px；
边框：1px实心#DCDC；
边框颜色：rgba（0,0,0,0.1）；
颜色：#444！重要；
字体大小：11px；
字体大小：粗体；
填充：8px；
背景：-webkit线性渐变（顶部，#f5，#f1f1）；
边界半径：2px；
}
.页脚{
位置：绝对位置；
右：0；
底部：0；
左：0；
填充：1rem；
背景色：#EFEF；
文本对齐：居中；
边缘：20em；
}
.页脚链接{
左边距：10px；
颜色：#000；
}
.向左走{
浮动：左；
}
.向右移动{
浮动：对；
}

导航栏，用于我想在页面底部显示的元素。一些元素将向左对齐，而另一些元素将向右对齐。？

我有两个建议A）使用引导，如果您有网格系统可以使用它，则可以更轻松地进行分组。B） 如果您不想使用框架，请使用底部链接进行一些内联分组。。我正在做一些阅读，但我还没有做一个头部它。将看看学习引导和回到这个项目。因为现在，我看不清我在看什么/n我的引导知识范围是变量声明和if语句、switch等。以全屏模式运行解决方案。它分为三部分关于页脚，我希望它看起来像我打开

www.google.com

OK时的样子。我做了一个编辑，应该可以。但我现在在手机上，所以我不能真正测试它。这里仍然缺少一些东西，但我会复制代码，并在早上醒来时（GMT+1）在我的机器上运行它。