網(wǎng)絡(luò)趨勢(shì)似乎在一夜之間改變。每年新的美貌使他們進(jìn)入代碼的網(wǎng)站在互聯(lián)網(wǎng)上引起設(shè)計(jì)師開(kāi)始思考如何將這些風(fēng)格的組合。
幸運(yùn)的是,級(jí)聯(lián)樣式表(CSS)可以很容易地適用于外觀和新的設(shè)計(jì)趨勢(shì),在短短的幾分鐘內(nèi)長(zhǎng)沙網(wǎng)站建設(shè)的經(jīng)驗(yàn),當(dāng)你使用一些片段。片段是用來(lái)增加功能,為用戶提供更好的體驗(yàn),但以下的處理嚴(yán)格與你網(wǎng)站的美學(xué)。每一個(gè)都將幫助你保持新的潮流和哇你的訪客。
平面菜單
平面設(shè)計(jì)是所有憤怒的日子里。這一段,你可以建立一個(gè)扁平的導(dǎo)航菜單,使用圖標(biāo),但是當(dāng)選定的頁(yè)面的名字出現(xiàn)在右邊的菜單和:
nav ul {
list-style: none; overflow: hidden; position: relative;
}
nav ul li {
}
float: left; margin: 0 20px 0 0;
nav ul li a {
display: block; width: 120px; height: 120px;
background-image:url(icons.png);background-repeat:no-repeat;
}
nav ul li:nth-child(1) a {
background-color: #5bb2fc;
background-position: 28px 28px;
}
nav ul li:nth-child(2) a {
background-color: #58ebd3;
background-position: 28px -96px;
}
nav ul li:nth-child(3) a {
background-color: #ffa659;
background-position: 28px -222px;
}
nav ul li:nth-child(4) a {
background-color: #ff7a85;
background-position: 28px -342px;
}
nav ul li a span {
font: 50px "Dosis", sans-serif;
text-transform: uppercase;
top: 29px;
position: absolute; left: 580px;
display: none;
}
nav ul li a:hover span {
}
nav ul li:nth-child(1) a span {
color: #5bb2fc;
}
nav ul li:nth-child(2) a span {
color: #58ebd3;
}
nav ul li:nth-child(3) a span {
color: #ffa659;
}
nav ul li:nth-child(4) a span {
color: #ff7a85;
}
希望以上的這些信息能夠幫助您,如果您還有關(guān)于大連網(wǎng)站制作,大連網(wǎng)站建設(shè)及企業(yè)郵箱等相關(guān)問(wèn)題,請(qǐng)與我們聯(lián)系, 新圖聞科技將竭誠(chéng)為您服務(wù)!