1.如何选取技术栈
主要是显示模块,View是重点,数据可重复性高,用react比较合适。 后端要追踪点击次数,所以用java的rest api
but failed, cannot render react component,
2. Choose Bootstrap as UI framework
1) How to make input box transparent:
background-color:rgba(0,0,0,0) !important;
2) Put icon with input and search button:
use input-group to combine input and button, use <i> to add icon before input element
3) 创建card component,responsive rectangular, with content
<div class="square"> <div class="content"> Hello! </div> </div>
.square { position: relative; width: 50%; } .square:after { content: ""; display: block; padding-bottom: 100%; } .content { position: absolute; width: 100%; height: 100%; }
https://codepen.io/bkilpat/pen/rVKOyj
4) SVG中的文字水平垂直居中于circle:
<svg width="100%" height="height"> <circle cx="50%" cy="50%" r="40%" fill="#fb4f9f" stroke="white" stroke-width="5%" /> <text dy='.3em' fill="white" fontSize={25} fontFamily="Verdana" x="50%" y="50%" text-anchor="middle">你好</text> </svg>