欧美性生交大片免费看_国产成人无码一二三区视频_亚洲免费观看视频_亚洲中文字幕无码av永久_天天天天躁天天爱天天碰2018

logo竹子建站
自助建站小技巧:中英文導(dǎo)航的翻轉(zhuǎn)特效來啦!
2021-03-26 13:57:52

很多朋友在制作網(wǎng)站時往往想要將網(wǎng)站的導(dǎo)航做成中英文兩種語言的,但是直接把兩種文案往上放效果出來又不好看,那么是否存在更好的解決方案呢?

答案就在今天的小教程里面,我們可以使用一串小代碼實現(xiàn)翻轉(zhuǎn)導(dǎo)航的效果,實際展示如下:

下面是我們的詳細教程,首先我們可以在導(dǎo)航組件下面新加一個代碼組件,并把效果代碼放置進去:

代碼如下:
<style>
? ? .zz-nav .zz-menu .zz-menu-item .zz-menu-item__title>span:after{
? ? ? content: 'HOME';
? ? ? color: #FCE300;
? ? ? font-size: 12px;
? ? ? font-weight: 900;
? ? ? font-style: normal;
? ? ? font-family: Georgia;
? ? ? padding-bottom: 2px;
? ? ? border-bottom: 2px solid #762813;
? ? ? display: block;
? ? ? text-align: center;
? ? }
.zz-nav .zz-menu .zz-menu-item:nth-child(2) .zz-menu-item__title>span:after{
? ? ? content: 'ABOUT';
? ? }
.zz-nav .zz-menu .zz-menu-item:nth-child(3) .zz-menu-item__title>span:after{
? ? ? content: 'ONLINE STORE';
? ? }
.zz-nav .zz-menu .zz-menu-item:nth-child(4) .zz-menu-item__title>span:after{
? ? ? ?content: 'STORE';
? ? }
.zz-nav .zz-menu .zz-menu-item:nth-child(5) .zz-menu-item__title>span:after{
? ? ? ? content: 'CONTACT US';
? ? }
.zz-nav .zz-menu .zz-menu-item:nth-child(6) .zz-menu-item__title>span:after{
? ? ? ? ?content: 'INVITE BITS';
? ? }
.zz-nav .zz-menu-item .menu-link{
? ? ? overflow: hidden;
? ? }
.zz-nav .zz-menu-item .zz-menu-item__title{
? ? ?transition:transform 0.3s;
? ? ? ? ? height:25px;
? ? }
.zz-nav .zz-menu-item .zz-menu-item__title>span{
? ? ? transition:transform 0.3s;
? ? ? display: block;
}
.zz-nav .zz-menu-item:hover .zz-menu-item__title>span{
? ? ? transform: translateY(-50%);
}
.zz-nav {
text-align: center;
}
</style>

代碼組件添加完成以后,我們需要點擊導(dǎo)航組件,給導(dǎo)航組件添加一個自定義class:zz-nav,就可以讓代碼生效啦,操作如下:

PS:上述代碼中紅色背景部分為英文導(dǎo)航以及其下劃線的顏色,可以修改顏色色號,藍色背景部分為英文導(dǎo)航顯示的單詞,同樣可以直接在代碼中進行修改。