一步步做一个Google 网页

一步步做一个Google 网页

做一个Google 图标

其实谷歌很用心的在做每一个Google图标。然而我太懒，搞了个简单的。

h1{
font-size:100px;
color:#5f5f61;
background-color:white;
}
.google {
 text-align: center;
vertical-align:center;
text-transform:capitalize;
position:absolute;
top:25%;
left:45%;
 transform: translate(-25%, -45%);

搜索框

<坑> 此处还应该有一个放大镜和一个语音输入小图标。

.search{
 text-align: center;
padding:320px 0;
}
input[type=text] {
  width: 50%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 24px;
  font-size: 16px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
background-image: url('searchicon.png');
  padding: 12px 20px 12px 40px;
}
input[type=text]:focus {
  border: 3px solid #555;
 border-radius: 24px;
}

导航栏

表单只能设置一种样式；此外也可以使用div设置更多种的样式。

ul{
list-style-type:none;
position:fixed;
top:0;
width:100%;
margin:0;
padding:4px;
overflow:hidden;
background-color:#cdcdcd;
}
li {
float:right;
}
li a{
display:block;
color:white;
text-align:center;
padding:8px 8px;
}
 li a hover:(not active){
background-color:#939393;
}
.active{
background-color:#ababab;
}

使用div举例

.bottom {
overflow: hidden;
background-color: #cdcdcd;
position:fixed;
bottom:0;
width:100%;
margin:-2px;
}

.bottom a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
}
.bottom a:hover {
  background-color: #ddd;
  color: black;
}

最后贴一下“死亡静态网站”