網(wǎng)絡趨勢似乎在一夜之間改變。每年新的美貌使他們進入代碼的網(wǎng)站在互聯(lián)網(wǎng)上引起設計師開始思考如何將這些風格的組合。
幸運的是,級聯(lián)樣式表(CSS)可以很容易地適用于外觀和新的設計趨勢,在短短的幾分鐘內(nèi)長沙網(wǎng)站建設的經(jīng)驗,當你使用一些片段。片段是用來增加功能,為用戶提供更好的體驗,但以下的處理嚴格與你網(wǎng)站的美學。每一個都將幫助你保持新的潮流和哇你的訪客。
平面菜單
平面設計是所有憤怒的日子里。這一段,你可以建立一個扁平的導航菜單,使用圖標,但是當選定的頁面的名字出現(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)站建設及企業(yè)郵箱等相關(guān)問題,請與我們聯(lián)系, 新圖聞科技將竭誠為您服務!