css-3秒（大概吧...）快速擼出YY遊戲頁面（二）

工地程式設計_大奶夫發表於2017-12-18
CSS遊戲

有哪裡不懂的，請在下面留言，我每天都看，有時間我會一一解答，看評論區也許有人提出了跟你同樣想問的問題，可以看看我給出的回答，不用重複提問。

css-3秒（大概吧...）快速擼出YY遊戲頁面（一）

首先我們看看頁面的樣子

css-3秒（大概吧...）快速擼出YY遊戲頁面（二）

接著上一篇，我們這篇來寫header-nav下面的nav部分

首先我們先看看今天要寫的部分

css-3秒（大概吧...）快速擼出YY遊戲頁面（二）

結構&樣式詳解

  • 首先我們給一個大盒子叫做nav_box，這個盒子主要用來給背景顏色，因為我們要用到之前我們寫的一個公共類版心gWidth，所以這個盒子的樣式有背景色就足夠了，其他的微調在整體完成後再來調
  • 接下來我們給個版心的盒子來裝裡面的東西，這個盒子要順手給個clearfix因為裡面會用到浮動，(div.nav.gWidth.clearfix)
  • 這裡面分為三塊，三個浮動，logo，左邊的導航和右邊的跳轉
  • 先說logo這個東西，在這裡的做法是給了大盒子設定了寬高用背景圖的方式表現出來，裡面的a標籤設定了（display:block;height:100%），因為a標籤裡面是沒有內容的，本來自身轉為block之後獨佔一行因為沒有內容所以設定高度百分百，這樣就覆蓋了.logo這個盒子的整個區域使其可以點選跳轉。
  • 左邊的導航主要是li裡面的a的hover狀態這個細節，很多人會直接給一個單向內外邊距拉開距離，其實這是不妥的，最好的方法就是左右上下分配padding均勻，這樣hover效果就是最好看的，當然，切記a是行內元素，你需要把它轉成行塊（display: inline-block;）才能給其設定上下padding值。
  • 右邊的兩個點選按鈕用的是a標籤，做法與上面大體相似，在這不做過多的解讀。
  • 頭像這裡的hover出下拉選單的做法我個人認為還有更好的方案，請各位自行查詢相關資料，在這不做誤導解讀，
<div class="nav_box">
    <div class="nav gWidth clearfix">
        <div class="logo fl">
            <a href=""></a>
        </div>
        <ul class="nav_list fl">
            <li><a href="#">新聞資訊</a></li>
            <li><a href="#">新聞資訊</a></li>
            <li><a href="#">新聞資訊</a></li>
        </ul>
        <ul class="nav_sel fr">
            <li><a href="#" class="btn_sel">進入阿啊頻道 92</a></li>
            <li><a href="#" class="btn_sel">進入阿啊頻道 922</a></li>
            <li>
                <div class="user_head">
                    <img src="images/user_head.jpg" alt="">
                    <div class="user_menu hide">
                        <i class="sj1"></i>
                        <i class="sj2"></i>
                        <dl>
                            <dd><a href="#" title="您好,我叫叫叫周杰倫">您好,我叫叫叫周杰倫</a></dd>
                            <dd><a href="#">我叫周杰倫</a></dd>
                            <dd><a href="#">叫周杰倫</a></dd>
                        </dl>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
複製程式碼
/*導航*/

.nav_box {
    background-color: #393742;
    border-top: #DFDFDF solid 1px;
    margin-top: -1px;
}

.logo {
    width: 120px;
    height: 47px;
    background: url(../images/logo.jpg) left top no-repeat;
    margin-top: 7px;
    margin-right: 40px;
}

.logo a {
    display: block;
    height: 100%;
}

.nav_list {
    font: 12px/60px "Microsoft YaHei", "微軟雅黑";
}

.nav_list li {
    float: left;
}

.nav_list a {
    color: #EEEFF3;
    padding: 0 30px;
    display: inline-block;
}

.nav_list a:hover {
    background-color: #4b4953;
}

.nav_sel li {
    float: left;
    margin-left: 12px;
}

.btn_sel {
    display: inline-block;
    height: 32px;
    font: 12px/32px "Microsoft YaHei", "微軟雅黑";
    width: 115px;
    margin: 14px 0;
    text-align: center;
    background-color: #DD3A29;
    color: #eeeff3;
}

.user_head {
    position: relative;
    margin: 12px 0 0 14px;
}

.user_head,
.user_head img {
    width: 37px;
    height: 37px;
}

.user_menu {
    position: absolute;
    right: 0;
    top: 48px;
    width: 118px;
    border: solid 1px #F00;
    padding: 5px;
}

.sj1,
.sj2 {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
}

.sj1 {
    border-width: 0 6px 7px;
    border-style: dashed dashed solid;
    /* border-color: transparent transparent #F00; */
    right: 10px;
    bottom: 100%;
}

.sj2 {
    border-width: 0 5px 6px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #fff;
    right: 11px;
    bottom: 100%;
}

.user_menu dd {
    margin-bottom: 1px;
}

.user_menu a {
    display: block;
    height: 30px;
    font: 12px/30px "Microsoft YaHei", "微軟雅黑";
    padding-left: 17px;
    padding-right: 16px;
    background-color: #ccc;
    text-overflow: ellipsis;
    /*文字如果超出後，以省略號的形式展現*/
    width: 85px;
    /*通過寬度斷定超出*/
    overflow: hidden;
    /*超出要裁掉*/
    white-space: nowrap;
    /*文字不換行*/
}
複製程式碼

相關文章