使用html、css创建一个看起来很像的google搜索页面

问题描述 投票：0回答：2

需要帮助，

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

还有其他更省时的方法，并且可以提供更清晰的代码（我正在寻找更好的选择，因为我对此还很陌生......）

也就是说，有没有一种方法可以为我想要在页面底部的元素设置导航栏。一些元素将向左对齐，另一些元素将向右对齐。？

下面是我的代码：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

li {
  display: block;
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

button a {}

.google-logo {
  position: absolute;
  margin: 10em 32.5em;
}

.feeling-lucky {
  position: absolute;
  margin: 20em 32.5em;
  width: 400px;
}

#searchbar {
  position: absolute;
  top: 260px;
  left: 375px;
  width: 580px;
  height: 30px;
  border: 1px solid #cdcdcd;
}

#search_button {
  position: absolute;
  top: 310px;
  left: 550px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}

#lucky_button {
  position: absolute;
  top: 310px;
  left: 680px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
  margin: : 20em;
}
<!DOCTYPE html>
<html>

<head>
  <title>Google Homepage</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>

  <nav class="header">
    <div class="col-xs-8">
      <ul>
        <li><a href="#"><i class="fa fa-2x fa-user-circle-o" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-2x fa-bell" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">Mail</a></li>
      </ul>
    </div>
  </nav>
  <div class="google-logo">
    <img src="images/google-logo.jpg" height="85px" width="250px" alt="google-logo" title="google-logo">
  </div>
  <div>
    <input type="text" name="searchBar" id="searchbar" placeholder="Search Google or Type URL">
    <input type="button" value="Google Search" id="search_button">

  </div>
  <input type="button" value="I'm Feeling Lucky" id="lucky_button">
  </br>
  <div class="footer">
    <a href="#">Advertising</a><a href="#">Business</a><a href="#">About</a>
  </div>
</body>

</html>

html css
2个回答
0
投票

考虑到您当前页脚的外观，我是在假设您想要均匀分散的情况下进行操作的。请看下面的代码。这是通过 Bootstrap 3 实现的，但如果您对此不熟悉，我建议您使用 Bootstrap 4 或具体尝试并练习。 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

li {
  display: block;
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

button a {}

.google-logo {
  position: absolute;
  margin: 10em 32.5em;
}

.feeling-lucky {
  position: absolute;
  margin: 20em 32.5em;
  width: 400px;
}

#searchbar {
  position: absolute;
  top: 260px;
  left: 375px;
  width: 580px;
  height: 30px;
  border: 1px solid #cdcdcd;
}

#search_button {
  position: absolute;
  top: 310px;
  left: 550px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}

#lucky_button {
  position: absolute;
  top: 310px;
  left: 680px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
  margin: : 20em;
}

.footer-link {
  margin-left: 10px;
  color: #000;
}

.move-left {
  float: left;
}

.move-right {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="header">
  <div class="col-xs-8">
    <ul>
      <li><a href="#"><i class="fa fa-2x fa-user-circle-o" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-bell" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>
      <li><a href="#">Images</a></li>
      <li><a href="#">Mail</a></li>
    </ul>
  </div>
</nav>
<div class="google-logo">
  <img src="images/google-logo.jpg" height="85px" width="250px" alt="google-logo" title="google-logo">
</div>
<div>
  <input type="text" name="searchBar" id="searchbar" placeholder="Search Google or Type URL">
  <input type="button" value="Google Search" id="search_button">

</div>
<input type="button" value="I'm Feeling Lucky" id="lucky_button">
</br>
<div class="footer">
  <div class='container-fluid'>
    <div class='col-md-4'>
      <a href="#" class='footer-link move-left'>Advertising</a>
      <a href="#" class='footer-link move-left'>Business</a>
    </div>
    <div class='col-md-8'>
      <a href="#" class='footer-link move-right'>Settings</a>
      <a href="#" class='footer-link move-right'>Terms</a>
      <a href="#" class='footer-link move-right'>Privacy</a>
    </div>
  </div>

</div>

这里是引导文档和物化文档的链接

0
投票

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

li {
  display: block;
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

button a {}

.google-logo {
  position: absolute;
  margin: 10em 32.5em;
}

.feeling-lucky {
  position: absolute;
  margin: 20em 32.5em;
  width: 400px;
}

#searchbar {
  position: absolute;
  top: 260px;
  left: 375px;
  width: 580px;
  height: 30px;
  border: 1px solid #cdcdcd;
}

#search_button {
  position: absolute;
  top: 310px;
  left: 550px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}

#lucky_button {
  position: absolute;
  top: 310px;
  left: 680px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
  margin: : 20em;
}
<!DOCTYPE html>
<html>

<head>
  <title>Google Homepage</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>

  <nav class="header">
    <div class="col-xs-8">
      <ul>
        <li><a href="#"><i class="fa fa-2x fa-user-circle-o" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-2x fa-bell" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">Mail</a></li>
      </ul>
    </div>
  </nav>
  <div class="google-logo">
    <img src="images/google-logo.jpg" height="85px" width="250px" alt="google-logo" title="google-logo">
  </div>
  <div>
    <input type="text" name="searchBar" id="searchbar" placeholder="Search Google or Type URL">
    <input type="button" value="Google Search" id="search_button">

  </div>
  <input type="button" value="I'm Feeling Lucky" id="lucky_button">
  </br>
  <div class="footer">
    <a href="#">Advertising</a><a href="#">Business</a><a href="#">About</a>
  </div>
</body>

</html>

块引用

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.