Skip to main content

WTF CSS极简教程: 18. Uniswap页面

WTF CSS教程,总结/搬运自MDN CSS教程,帮助新人快速入门CSS。

推特@WTFAcademy_@0xAA_Science

WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请

所有代码和教程开源在github: github.com/WTFAcademy/WTF-CSS


这一讲,我们将在WTF HTML第九讲UniswapHTML的基础上用预处理器less给它增加CSS样式表,最终效果如下:

总体效果

注意:本讲所用的HTML内容在之前的基础上做了略微的调整,想要练习的学员请下载本讲中最新的文件

background

首先我们设置背景的颜色,可以用取色器取来颜色后直接给background-color赋值

body {
background-color: #f7ebf3;
}

class="header"

然后我们处理头部的样式,Uniswap原生的样式是这样的:

头部样式

头部的排列可以使用定位来解决。左右子元素的定位很简单,但中间元素想要让它居中,除了要让right=50%,还得让margin-right: -140px140px是中间元素宽度的一半),否则会让它的右边居中。

border-radius不要设置成百分比,因为元素的宽高不同,设置成行高的一半即可。

adisplay设置成inline-block,这样就可以调整他的宽度。

line-height设置成40px不仅可以改变a的高度,还可以让其中的内容垂直居中。

.header {
margin-top: 20px;
&>img {
width: 25px;
}
&>.switchPage {
position: absolute;
top: 20px;
right: 50%;
margin-right: -140px;
background-color: white;
border-radius: 20px;
&>a {
display: inline-block;
width: 70px;
line-height: 40px;
text-align: center;
&:first-child {
background-color: #f7f8fa;
border-radius: 20px;
}
}
}
}

对于右边的一组元素,我们将包裹他们的父元素的position设置成absolute,再让right: 0,就可以让它们位于页面右边。再将它的display设置成flex,就可以让他的三个子元素位于同一行。

changeNetworkimgposition要先设置成relative,再调整它的top,使得它与右边的文字水平对齐。

同时还要调整三个子元素的margin-right,让它们不要挤在一起。

    &>.right {
display: flex;
position: absolute;
top: 20px;
right: 0;

&>.changeNetwork {

background-color: white;
margin-right: 10px;
width: 120px;
border-radius: 15px;
text-align: center;

&>img {
position: relative;
top: 5px;
width: 25px;
}

&>.Ethereum {
line-height: 40px;
}
}

&>.connect {
background-color: #fdeaf1;
color: #d50066;
border: 4px white solid;
width: 100px;
height: 40px;
margin-right: 10px;
border-radius: 20px;
font-size: 16px;
}

&>.menu {
background-color: white;
font-size: 20px;
border: 4px white solid;
width: 42px;
height: 40px;
margin-right: 10px;
border-radius: 15px;
}
}

到此header里的关键点就讲完了,效果如下:

头部效果

class="body"

最后我们处理中间内容的样式,这部分会比较复杂。

我们先将class="body"margin-top调整为80px,将它与头部分开。

然后是swap-page的样式,position修改为relative后,要同时调整leftmargin-left才能让它水平居中。

padding也需要给它赋值,让swap-page与它的子元素分开。

&>.swap-page {
position: relative;
background-color: white;
width: 446px;
height: 298px;
left: 50%;
margin-left: -223px;
border-radius: 20px;
padding: 10px;
}

接着是swap-page-headermargin设置为10px auto可以让它水平居中。

&>.swap-page-header {
margin:10px auto;
width: 422px;
height: 20px;
}

然后是token1token2共同的样式,调整它们的marginpadding可以将它们与父、子元素分离。调整子元素inputpadding可以让输入的内容不紧挨着边框。

& .token1,
.token2 {
background-color: #f7f8fa;
width: 444px;
height: 62px;
margin: 5px auto;
padding: 16px 0;
border-radius: 20px;
&>input {
background-color: #f7f8fa;
border: none;
line-height: 33px;
font-size: 33px;
width: 294px;
padding: 0 15px;
}
}

之后是token1-btntotoken2-btn不同样式的设计。

            & .token1-btn {
background-color: #edeef2;
border: none;
width: 91px;
height: 38px;
border-radius: 19px;
line-height: 38px;
& img {
position: relative;
top: 5px;
width: 25px;
}
& span {
font-size: 20px;
}
}
& .token2-btn {
background-color: #e8006f;
color: white;
border: none;
width: 101px;
height: 38px;
border-radius: 19px;
line-height: 38px;
& span {
font-size: 20px;
}
}

接着是两个input中间的箭头button,将它的position设置为absolute可以让它从文档流中脱离,再调整它的topleftmargin-left让它位于两个input中间

        & .arrow{
background-color: #f7f8fa;
border: 5px white solid;
border-radius: 25%;
position: absolute;
top:130px;
left:50%;
margin-left:-10px;
&>img{
width: 20px;
}
}

然后是尾部连接钱包的button,这里未涉及到位置的赋值。

        & .swap-page-footer-connect{
width: 100%;
height: 55px;
border: none;
border-radius: 13px;
background-color: #fdeaf1;
color: #d50066;
font-size: 16px;
}

到此swap的样式就完成了,效果如下:

swap样式

最后就剩下chooseLanguagegasPriceAndBlockNumber的样式,这两部分比较简单。

先将chooseLanguagedisplay设置为inline-block,方便我们调整它的宽度,宽度设置好之后就可以通过positionleftmargin-lefttop调整它的位置。

    &>.chooseLanguage{
position: relative;
display: inline-block;
width: 130px;
font-size: 12px;
left:50%;
margin-left: -65px;
top:10px;
}

gasPriceAndBlockNumber位于页面右下方,我们可以直接将它的position设置为absolute,让它脱离文档流,再通过调整topmargin-topmargin-rightright让它处于页面右下角。

    &>.gasPriceAndBlockNumber{
position: absolute;
top:100%;
margin-top: -36px;
margin-right:20px;
right:0;
font-size: 10px;
}

至此,Uniswap极简页面就完成了,效果如下:

总体效果

可以看到,我们做的极简页面和官方页面是非常相似的。但目前该页面还没有任何功能,这需要我们后续继续给他加上JS。

总结

这一讲我们在之前UniswapHTML的基础上增加了样式表,做出的效果与官方页面十分相似。学员们自己练习时不必写的与本教程一模一样,只要能达到预期效果即可。