前端学习---仿写一个知乎页面

仿写一个知乎

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对齐之类的(大概是这个原因)
(要写的博客逐渐增加)