前端学习---仿写一个知乎页面
仿写一个知乎
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.还有一个问题 我写的这个不适应缩小浏览器器宽度与高度 之后得解决这个问题
像这样
正常情况
非正常情况
上面这个问题 是因为我没有显式的设置 浮动元素的父元素的宽度 导致缩小浏览器后 会导致元素下移 (这种说法好像并不准确 应该有专门的术语)
那么 设置宽度后 就是这样子了 （margin是不包含在你设置的width中的)
6.写的过程中发现其实这个界面并不适合双飞翼
我现在发现利用百分比实现双飞翼会带来一个问题 就是如果我们想让所有元素固定在页面中 不想在缩放页面后导致出现奇怪的表现 利用百分比好像并不是一个明智的选择当然也有可能是我道行太浅
现在要实现对我来说能想到的只有 写死格局大小 (应该大部分都写死了大小 譬如好多页面都会设置 width:980px)
这图真的是绝了
7.flex-wrap:warp设置元素多行显示 flex真好用
8.下一篇总结一下元素居中方式 vertical-align text-align 图片 transform什么的
9.使用css border实现一个边框
看到{{uploadi zhezng-image-781015.png(uploading...)}}这个
就想到了可以利用css border实现一个三角形
这是利用了border不是由四个矩形边框拼接成的 实际上是以梯形拼接的(当上底为0 梯形也就变成了三角形 也就是说 设置元素的宽度高度为0 而是border大一些 就可以实现这样的效果)
10·margin border-color 接收三个值代表 上 右和左 下 (这个我给忘了)
11.伪元素:after 需要有content属性 不然可能会不显示
12.遇到img标签无法和p标签并列 设置p标签为inline也不行
测试后发现 并不是无法并列 是p标签底边与img标签底边对齐了
像这样
解决方法是使用改变img的 vertical-align属性 为top 就可以了
同理, middle bottom 也有类似效果
13.也是和上面类似的问题 div中包裹img 与另一个div对齐于一行
同样也是利用 设置 vertical-align的方法 不过要设置到img的那个div上
如果设置到img上 会出现
搜了一下据说是因为 图片文字等inline元素默许是和父级元素的baseline对齐之类的(大概是这个原因)
(要写的博客逐渐增加)
