React CSS

实现百度主页 by React

Posted by syea on January 5, 2018

实现百度主页 by React

算是从零开始, 有点弱,费了很多力气.. 还有点拙劣。

代码可以前往https://github.com/MR-yo/ReactStudy

罗列一些简单的要点

1.背景图片

position 使用 fix 可以防止背景图片动来动去
浏览器窗口大小变化时，图片不应该变形，可以设置background-size: cover; background-position: center;

2.顶部导航条

text-align 是用来设置父视图里面的元素改如何布局。

3.logo

水平居中的方式有很多，我采用了父视图 text-align: center; ,logo display: inline-block;

4.输入框

设置搜索 button 的时候很奇怪，明明 button 的高等于输入框的高，margin 也都是0，但是 button 就是会往下偏移一点点，最后设置了 vertical-align: bottom; 解决。
想去掉输入框跟 button 默认的外边框，可以设置 border: none; outline-width: 0;

5.底部文字

关于 a 标签跟 p 标签。
1.第一次我设置了a 标签跟 p 标签同样的 css，结果p 标签有效果，a 标签的位置却很奇怪。
2.第二次将 a 标签跟 p 标签放到同一个 div 中解决问题。
3.自己感觉 a 标签完全可以被 p 标签代替，设个下划线，加个 onClick 方法就 ok 了。