一步步做一个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;
}