仿写一个知乎
1.观察发现知乎很像学习的双飞翼布局 就用双飞翼模板
index.html
<!DOCTYPE html>
<html>
<head>
<title>首页-知乎</title>
<link href="https://static.zhihu.com/static/favicon.ico" rel="icon" type="image/x-ico">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<!--双飞翼布局-->
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="center">
<div id="inner">inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
</body>
</html>reset.css
*{padding: 0;margin: 0}
html,body{height: 100%}
a{text-decoration: none}
li{list-style: none}
main.css
#container{
height: 100%;
width: 100%;
margin: 0;
}
#header{
height: 5%;
background: lightblue;
}
#main{
height: 95%;
}
#center,#left,#right{
float: left;
height: 100%;
}
#center{
width: 100%;
background: lightgreen;
}
#inner{
padding: 0 25%;
}
#left{
width: 25%;
margin-left: -100%;
background: red;
}
#right{
width: 25%;
margin-left: -25%;
background: yellow;
}
2.加一点细节
冗談冗談
3.看一下注意的点
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式
注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素
1.实现水平居中 div中img居中 试了好多还不行
就使用transform那一套了
2.让搜索框更加舒服的方式 设置padding：0 5px
input{ display: inline-block; height: 30px; width: 330px; border:1px solid rgb(246,246,246); padding: 0 5px; }
3.发现一个问题 div中的input会导致div出现不符合希望的问题如图
设置div的vertical-align为top就变成
再设置line-height与height等高就可以居中了
4.有些input的框是不支持伪元素的
譬如text框
5.还有一个问题 我写的这个不适应缩小浏览器器宽度与高度 之后得解决这个问题