html+css 實(shí)現(xiàn)導(dǎo)航欄文字居中

cnio 發(fā)布于2019-08-30 11:01 / 805人閱讀

摘要：效果文字水平垂直居中代碼首頁集團(tuán)介紹專家聯(lián)盟合作機(jī)構(gòu)新聞動(dòng)態(tài)代碼

效果

文字水平垂直居中

html代碼


        
            
                
                    首頁
                    集團(tuán)介紹
                    專家聯(lián)盟
                    合作機(jī)構(gòu)
                    新聞動(dòng)態(tài)

css代碼

header .header-nav {
    height: 100px;
}
header .header-nav ul {
    width: 100%;
    height: 100px;
    border: 1px solid #000;
}
    
header .header-nav ul li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

header .header-nav ul li a {
    display: block;
    padding: 0 30px;
    line-height: 100px;
    font-size: 20px;
}

云服務(wù)器 GPU云服務(wù)器導(dǎo)航欄css代碼 html標(biāo)題欄居中導(dǎo)航欄html html 設(shè)置導(dǎo)航欄

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114719.html

相關(guān)文章

網(wǎng)頁導(dǎo)航欄 html + css的代碼實(shí)現(xiàn)

摘要：一般來講，我們的網(wǎng)頁導(dǎo)航欄是這么個(gè)模式來構(gòu)建在結(jié)構(gòu)上首先我們需要給導(dǎo)航欄的給個(gè)類名一般為然后就是一個(gè)無序表格由于導(dǎo)航欄的文字一般都是鏈接用來跳轉(zhuǎn)頁面要在里面包含一個(gè)首頁云云商城智慧門店?duì)I銷平臺(tái)媒體聯(lián)盟關(guān)于云道在樣式上目前我見過的分為兩種導(dǎo)航一般來講，我們的網(wǎng)頁導(dǎo)航欄是這么個(gè)模式來構(gòu)建在結(jié)構(gòu)上：1.首先我們需要給導(dǎo)航欄的div 給個(gè)類名一般為nav2.然后就是一個(gè)無序表格?3.由于導(dǎo)航欄的文...

keke 2019-04-23 11:55 評(píng)論0 收藏0
css常見的各種布局上（兩列布局）

摘要：目錄一大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個(gè)人中心頁慕課網(wǎng)個(gè)人中心頁個(gè)人中心頁二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個(gè)人中心頁3、慕課網(wǎng)個(gè)人中心頁4、github個(gè)人中心頁二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評(píng)論0 收藏0
CSS14個(gè)實(shí)用技巧的精選和推薦

摘要：此文章主要為大家介紹了個(gè)實(shí)用技巧的精選推薦，具有一定的參考價(jià)值，學(xué)習(xí)覺得挺不錯(cuò)的，分享給大家。設(shè)計(jì)的同時(shí)就可以把這個(gè)設(shè)成顯示來檢查它的效果。塊元素居中對(duì)齊如果想做個(gè)固定寬度的網(wǎng)頁并且想讓網(wǎng)頁水平居中的話，通常是這樣你會(huì)使用來圍上所有元素。此文章主要為大家介紹了CSS14個(gè)實(shí)用技巧的精選推薦，具有一定的參考價(jià)值，學(xué)習(xí)覺得挺不錯(cuò)的，分享給大家。創(chuàng)業(yè)項(xiàng)目 2018優(yōu)選本頁技巧目錄： 1...

elisa.yang 2019-08-30 11:22 評(píng)論0 收藏0
你們要的HTML布局技巧：如何規(guī)范搭建網(wǎng)頁架構(gòu)？

摘要：主體內(nèi)容區(qū)域小米首頁下小米商城的主題內(nèi)容區(qū)域，也是整體網(wǎng)頁面積最廣的區(qū)塊實(shí)在不知道定主體內(nèi)容區(qū)塊時(shí)也可以根據(jù)面積比重來劃分，最大的那塊一定是主題中心，布局的重復(fù)性很高。單就深入了解布局規(guī)范都足夠說上一個(gè)月的，今天我就不論大范圍，挑選小米網(wǎng)站首頁的部分區(qū)塊布局來講解吧！下面是小米官網(wǎng)的首頁，很多人一看到這樣的網(wǎng)頁就傻眼，不知道咋弄，要么就隨性布局，要么就干看著，其實(shí)遇到問題首先一點(diǎn)就...

yvonne 2019-08-30 15:56 評(píng)論0 收藏0