1
幫助，使用HTML，CSS創建一個谷歌搜索頁面看起來很相像需要
我使用的位置是：絕對定位我的兩個谷歌徽標，搜索欄和按鈕。
但是也有一些更多的時間有效的，並且會給出一個更清潔的代碼等方式（我要尋找更好的選擇，因爲我仍然在這個非常綠......）
也就是說，有沒有我可以在我的頁面底部爲我想要的元素做導航欄。有些元素將與左邊和右邊的其他元素對齊。
這是我下面的代碼：
ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t background-color: transparent;
\t }
\t li{
\t \t display:block;
\t \t \t \t float: right;
\t }
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
button a {
}
.google-logo {
\t position: absolute;
\t margin: 10em 32.5em;
}
.feeling-lucky {
\t position: absolute;
\t margin: 20em 32.5em;
\t 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>
\t <head>
\t \t <title>Google Homepage</title>
\t \t <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
\t \t <link rel="stylesheet" type="text/css" href="./style.css">
\t </head>
\t <body>
\t \t <nav class = "header">
\t \t \t <div class="col-xs-8">
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#"><i class="fa fa-2x fa-user-circle-o" aria-hidden="true"></i></a></li>
\t \t \t \t \t <li><a href="#"><i class="fa fa-2x fa-bell" aria-hidden="true"></i></a></li>
\t \t \t \t \t <li><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>
\t \t \t \t <li><a href="#">Images</a></li>
\t \t \t \t \t <li><a href="#">Mail</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </nav>
\t \t <div class="google-logo">
\t \t \t <img src="images/google-logo.jpg" height="85px" width="250px" alt="google-logo" title="google-logo">
\t \t </div>
\t \t <div>
\t \t \t <input type="text" name="searchBar" id="searchbar" placeholder="Search Google or Type URL">
\t \t \t <input type="button" value="Google Search" id="search_button">
\t \t </div>
\t \t <input type="button" value="I'm Feeling Lucky" id="lucky_button">
\t \t \t </br>
\t \t <div class="footer">
\t \t \t <a href="#">Advertising</a><a href="#">Business</a><a href="#">About</a>
\t \t </div>
\t </body>
</html>
'我想要在我的頁面底部添加元素的導航欄。有些元素會左對齊，右對齊其他元素？'我有兩條建議A）使用引導程序，如果您有一個網格系統可以使用它，則可以更輕鬆地對它們進行分組。 B）如果您不想使用框架，請使用底部鏈接進行一些內聯分組。 – Callat
我會查找引導程序的方式..我正在讀一些它，但我還沒有做出它的頭。 – uzorjchibuzor