寫在前面

經過兩個月對HTML和CSS的學習，終於迎來了最後一個專案實戰，拿愛奇藝官網練手。先說一下個人心得，一開始自己對於前端學習一片茫然，但是借鑑了各位大神的文章和速成之路，我覺得程式設計這條路是一口氣吃不成胖子的。憑藉著每週兩篇的csdn部落格，自己也在逐漸積累，發現現在寫程式碼的能力提高很快，不僅是前端，還有其他語言，必須有強大的基礎功底和內力，才能修煉更花哨的招式。對於學習語言的過程不要恐懼，你可以對一門語言抱有敬畏之心，但同時自己也要充滿自信！

OK，現在來看一下我敲了一週的html和css效果圖：

是不是很像了哈，實際上愛奇藝官網的前端開發人員用了大量的JS，但是目前我還不會哈哈哈，沒事，來看看我是怎麼用css實現它的吧。

網頁導航

看起來並不難，只有三個盒子組成：愛奇藝logo、輸入欄、功能欄。但是在每個盒子下面都有hover，就是暫時display:none的盒子，現在只是總結一下過程中遇到的難點。

 難點一  網頁縮小的時候防止盒子擠壓、重疊甚至掉落

給body加min-width隱藏

body{
    min-width: 1000px;
}

給主盒子加浮動和高度（防止高度塌陷）：

.nav-top-image{
    float: left;
    width: 120px;
    height:70px;
    margin-left:70px;
}
 

難點二  滑鼠點擊出現下拉選單

滑鼠點擊出現下拉選單一共兩個步驟

1. 下拉選單必須不能比input盒子級別高，並且設定定位
2. 利用:focus選擇器

.nav-input-text1:focus + .nav-input-list{
    display:block;
}
.nav-input-list{
    position:absolute;
    left:15px;
    z-index: 2;
    display:none;
    width:245px;
    height:360px;
    background-color:#fff;
}
 

難點三  小三角形的編寫

利用border寫小三角形

.nav-icon6-triangle{
    position:absolute;
    top:-14px;
    left:151px;
    display: none;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid;
    border-color:transparent transparent #fff transparent;
}

下面貼上導航模組原始碼：

Html：

<div class="nav-top">
                <div class="nav-top-image">
                    <div class="nav-top-image1">
                        <a href="">
                            <img src="images/1.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="nav-input">
                    <div class="nav-input-text">
                        <input class="nav-input-text1" type="text" placeholder="你和我的傾城時光">
                        <div class="nav-input-list">
                            <div class="nav-input-list1"><span>熱門搜尋</span></div>
                            <div class="nav-input-list2">
                                <ul>
                                    <li class="nav-input-li1"><a href=""><i><span>1</span></i><p>你和我的傾城時光</p></a></li>
                                    <li class="nav-input-li2"><a href=""><i><span>2</span></i><p>大江大河</p></a></li>
                                    <li class="nav-input-li3"><a href=""><i><span>3</span></i><p>海賊王</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>4</span></i><p>熊出沒全集</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>5</span></i><p>奧特曼</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>6</span></i><p>幸福一家人</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>7</span></i><p>奇葩說</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>8</span></i><p>葉羅麗精靈夢第6季</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>9</span></i><p>延禧攻略</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>10</span></i><p>火王之破曉之戰</p></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="nav-input-image">
                        <a href="">
                            <img src="images/2.png" alt="">
                        </a>
                    </div>
                    <div class="nav-input-search">
                        <a href="">
                            <div class="nav-input-search-image">
                                <img src="images/3.png" alt="">
                            </div>
                            <div class="nav-input-search-image2">
                                <img src="images/4.png" alt="">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="nav-icon1">
                    <div class="nav-icon1-image1">
                       <a href=""><img src="images/5.png" alt=""></a> 
                    </div>
                    <div class="nav-icon1-box">
                        <ul>
                            <a href=""><li class="nav-icon1-li"><div><img src="images/11.png" alt=""></div><span>瞭解VIP會員專享特權</span></li></a> 
                            <a href=""><li class="nav-icon1-li"><div><img src="images/12.png" alt=""></div><span>做任務，領獎勵</span></li></a>
                            <a href=""><li class="nav-icon1-li"><div><img src="images/13.png" alt=""></div><span>領取會員專屬福利</span></li></a>
                        </ul>
                        <div class="nav-icon1-btn">
                            <a href="" >
                            <div>
                                <p>登入</p>
                            </div>
                            </a> 
                        </div> 
                    </div>
                    <div class="nav-icon1-triangle">
                    </div>
                </div>
                <div class="nav-icon2">
                    <div class="nav-icon2-image1">
                       <a href=""><img src="images/6.png" alt=""></a> 
                    </div>
                    <div class="nav-icon2-box">
                            <ul>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/14.png" alt=""></div><span>上傳視訊</span></li></a> 
                                <a href=""><li class="nav-icon2-li"><div><img src="images/15.png" alt=""></div><span>製作視訊</span></li></a>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/16.png" alt=""></div><span>我的空間</span></li></a>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/14.png" alt=""></div><span>上傳視訊</span></li></a> 
                                <a href=""><li class="nav-icon2-li"><div><img src="images/15.png" alt=""></div><span>製作視訊</span></li></a>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/16.png" alt=""></div><span>我的空間</span></li></a>
                            </ul>
                        </div>
                        <div class="nav-icon1-triangle">
                        </div>
                </div>
                <div class="nav-icon3">
                    <div class="nav-icon3-image1">
                       <a href=""><img src="images/7.png" alt=""></a> 
                    </div>
                    <div class="nav-icon3-box">
                            <ul>
                                <li class="nav-icon3-li"><div><img src="images/11.png" alt=""></div><span>新手跳廣告，送VIP</span></li> 
                                <li class="nav-icon3-li"><div><img src="images/12.png" alt=""></div><span>5倍流暢度，不卡頓</span></li>
                                <li class="nav-icon3-li"><div><img src="images/13.png" alt=""></div><span>1080P免費暢享</span></li>
                                <li class="nav-icon3-li"><div><img src="images/13.png" alt=""></div><span>搜不到視訊，送VIP</span></li>
                            </ul>
                            <div class="nav-icon3-btn">
                                <a href="" >
                                <div>
                                    <p>立即體驗</p>
                                </div>
                                </a> 
                            </div> 
                        </div>
                    <div class="nav-icon3-triangle">
                    </div>
                </div>
                <div class="nav-icon4">
                    <div class="nav-icon4-image1">
                       <a href=""><img src="images/8.png" alt=""></a> 
                    </div>
                    <div class="nav-icon4-box">
                        <div class="nav-icon4-nav">
                            <div class="nav-icon4-span">
                                <a href=""><span>更新提醒</span></a>
                                <div class="nav-icon4-line"></div>
                            </div>
                            <div class="nav-icon4-span">
                                <a href=""><span>與我相關</span></a>
                                <div class="nav-icon4-line"></div>
                            </div>
                            <div class="nav-icon4-span">
                                <a href=""><span>系統通知</span></a>
                                <div class="nav-icon4-line"></div>
                            </div>
                        </div>
                        <div class="nav-icon4-img">
                            <img src="images/17.png" alt="">
                        </div>
                        <div class="nav-icon4-p"><p><a href="">登入</a>後才能檢視完整的通知列表哦~</p></div>
                        <div class="nav-icon4-triangle">
                        </div>
                    </div>
                </div>
                <div class="nav-icon5">
                    <div class="nav-icon5-image1">
                       <a href=""><img src="images/9.png" alt=""></a> 
                    </div>
                    <div class="nav-icon5-box">
                            <div class="nav-icon5-nav">
                                <div class="nav-icon5-span">
                                    <a href=""><span>更新提醒</span></a>
                                    <div class="nav-icon5-line"></div>
                                </div>
                                <div class="nav-icon5-span">
                                    <a href=""><span>與我相關</span></a>
                                    <div class="nav-icon5-line"></div>
                                </div>
                                <div class="nav-icon5-span">
                                    <a href=""><span>系統通知</span></a>
                                    <div class="nav-icon5-line"></div>
                                </div>
                            </div>
                            <div class="nav-icon5-img">
                                <img src="images/17.png" alt="">
                            </div>
                            <div class="nav-icon5-p"><p><a href="">登入</a>後才能檢視完整的通知列表哦~</p></div>
                            <div class="nav-icon5-triangle">
                            </div>
                    </div>                  
                </div>
                <div class="nav-icon6">
                    <div class="nav-icon6-image1">
                       <a href=""><img src="images/10.png" alt=""></a> 
                    </div>
                    <div class="nav-icon6-box">
                            <ul>
                                <li class="nav-icon6-li"><div><img src="images/11.png" alt=""></div><span>新手跳廣告，送VIP</span></li> 
                                <li class="nav-icon6-li"><div><img src="images/12.png" alt=""></div><span>5倍流暢度，不卡頓</span></li>
                                <li class="nav-icon6-li"><div><img src="images/13.png" alt=""></div><span>1080P免費暢享</span></li>
                                <li class="nav-icon6-li"><div><img src="images/13.png" alt=""></div><span>搜不到視訊，送VIP</span></li>
                            </ul>
                            <div class="nav-icon6-btn">
                                <a href="" >
                                <div>
                                    <p>立即體驗</p>
                                </div>
                                </a> 
                            </div> 
                            <div class="nav-icon6-triangle">
                            </div>
                    </div>
                </div>
            </div>

CSS：

.nav-top{
    background-color: rgb(35,35,37);
    height: 70px;
    margin:0 auto;
}
.nav-top-image{
    float: left;
    width: 120px;
    height:70px;
    margin-left:70px;
}
.nav-top-image1{
    width: 120px;
    height: 70px;
    padding-top:6px;
}
.nav-top-image1 img{
    width:119px;
}
.nav-input{
    position:relative;
    float: left;
    margin:14px 0 0 300px;
    width: 360px;
    height: 40px;
    border-radius: 20px;
}
.nav-input-text{
    float: left;
    width: 228px;
    height:40px;
    border-radius:20px 0 0 20px;
}
.nav-input input{
    background-color:rgb(51,51,51);
    width: 228px;
    height: 40px;
    border:none;
    outline: none;
    text-indent: 14px;
    color:rgb(153,153,153);
    font-size: 16px;
    border-radius:20px 0 0 20px;
}
.nav-input input:hover{
    background-color:rgb(68,68,68);
    color:rgb(204,204,204);
}
.nav-input-text1:focus + .nav-input-list{
    display:block;
}
.nav-input-image{
    float: left;
    width:32px;
    height:40px;
    background-color:rgb(51,51,51);
}
.nav-input-image img{
    margin-top:5px;
}
.nav-input-search{
    position: relative;
    float:left;
    width: 100px;
    height: 40px;
    background-color:rgb(0,190,6);
    border-radius:0 20px 20px 0;
}
.nav-input-search:hover{
    background-color:rgb(0,200,6);
}
.nav-input-search:hover .nav-input-search-image2{
    display: block;
}
.nav-input-search a{
    display:block;
    width:100px;
    height:40px;
}
.nav-input-search-image{
    position:absolute;
    z-index:1;
    width: 100px;
    height: 40px;
    margin:7px 0px 0px 10px;
}
.nav-input-search-image2{
    position:absolute;
    z-index:2;
    float: left;
    display:none;
    width: 100px;
    height: 40px;
    margin:6px 0px 0px 11px;
}
.nav-input-list{
    position:absolute;
    left:15px;
    z-index: 2;
    display:none;
    width:245px;
    height:360px;
    background-color:#fff;
}
.nav-input-list1 span{
    color:rgb(204,204,204);
    font-size:14px;
}
.nav-input-list div:first-child{
    margin:5px 0 10px 15px;
}
.nav-input-list2 li{
    width:245px;
    height:31px;
    line-height:30px;
}
.nav-input-list2 li:hover{
    background-color:rgb(245,245,245);
}
.nav-input-list2 a{
    display:block;
    width:245px;
    height:26px;
}
.nav-input-list2 i{
    position:relative;
    float:left;
    width:22px;
    height:16px;
    margin:8px 15px 0 15px;
    font-style:normal;
}
.nav-input-list2 p{
    display:inline-block;
    font-size:15px;
    color:#000;
}
.nav-input-list2 p:hover{
    color:rgb(0,190,6);
}
.nav-input-li1 i{
    background-color:rgb(0,190,6);
    border-radius:0 11px 11px 0;
}
.nav-input-list2 span{
    position:absolute;
    left:7px;
    bottom:-7px;
    font-family:'黑體';
    color:#fff;
    font-size:15px;
}
.nav-input-li2 i{
    background-color:rgb(76,209,80);
    border-radius:0 11px 11px 0;
}
.nav-input-li3 i{
    background-color:rgb(153,229,155);
    border-radius:0 11px 11px 0;
}
.nav-input-li4 i{
    background-color:rgb(216,216,216);
    border-radius:0 11px 11px 0;
}
.nav-input-li4:last-child span{
    position:absolute;
    left:3px;
    bottom:-7px;
    font-family:'黑體';
    color:#fff;
    font-size:15px;
}
.nav-icon1{
    position:relative;
    float:left;
    height:70px;
    width:40px;
    margin-left:120px;
}
.nav-icon1:hover .nav-icon1-box{
    display:block;
}
.nav-icon1:hover .nav-icon1-triangle{
    display:block;
}
.nav-icon1-image1{
   margin-top:14px;
}
.nav-icon1-box{
    position:absolute;
    left:-97px;
    top:70px;
    z-index: 2;
    display:none;
    width:222px;
    height:158px;
    padding-top:14px;
    background-color:#fff;
    border-radius:7px;
}
.nav-icon1-box a{
    display:block;
    height:35px;
}
.nav-icon1-li{
    padding-top:5px;
    width:222px;
    height:30px;
}
.nav-icon1-li:hover{
    background-color:rgb(245,245,245);
}
.nav-icon1-li div{
    float:left;
    margin-left:20px;
    width:30px;
    height:30px;
}
.nav-icon1-li span{
    font-size:15px;
    color:#000;
}
.nav-icon1-li:hover span{
    color:rgb(200,160,106);
}
.nav-icon1-triangle{
    position:absolute;
    top:56px;
    left:9px;
    display: none;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid;
    border-color:transparent transparent #fff transparent;
}
.nav-icon1-btn{
    position: relative;
    left:87px;
    top:12px;
    width:53px;
    height:22px;
    background-color:rgb(200,160,106);
    border-radius: 11px;
    line-height:22px;
}
.nav-icon1-btn a{
    display: block;
    width:53px;
    height:22px;
}
.nav-icon1-btn p{
    font-size:14px;
    font-family:'黑體';
    color: #fff;
    text-align: center;
}
.nav-icon1-btn:hover{
    background-color:rgb(226,188,129);
}
.nav-icon2{
    position:relative;
    float:left;
    height:70px;
    width:40px;
    margin-left:10px;
}
.nav-icon2-image1{
   margin-top:13px;
}
.nav-icon2:hover .nav-icon2-box{
    display:block;
}
.nav-icon2:hover .nav-icon1-triangle{
    display:block;
}
.nav-icon2-box{
    position:absolute;
    left:-69px;
    top:70px;
    z-index: 2;
    display: none;
    width:160px;
    height:233px;
    padding-top:14px;
    background-color:#fff;
    border-radius:7px;
}
.nav-icon2-li{
    padding-top:5px;
    width:160px;
    height:30px;
}
.nav-icon2-li:hover{
    background-color:rgb(245,245,245);
}
.nav-icon2-li div{
    float:left;
    margin-left:35px;
    width:30px;
    height:30px;
}
.nav-icon2-li span{
    font-size:15px;
    color:#000;
}
.nav-icon2-li:hover span{
    color:rgb(0,190,6);
}
.nav-icon3{
    position:relative;
    float:left;
    height:70px;
    width:50px;
    margin-left:10px;
}
.nav-icon3:hover .nav-icon3-box{
    display:block;
}
.nav-icon3:hover .nav-icon3-triangle{
    display:block;
}
.nav-icon3-box{
    position:absolute;
    left:-73px;
    top:70px;
    z-index: 2;
    display: none;
    width:195px;
    height:193px;
    padding-top:14px;
    background-color:#fff;
    border-radius:7px;
}
.nav-icon3-image1{
   margin-top:4px;
}
.nav-icon3-li{
    padding-top:5px;
    width:200px;
    height:30px;
}
.nav-icon3-li div{
    float:left;
    margin-left:20px;
    width:30px;
    height:30px;
}
.nav-icon3-li span{
    font-size:15px;
    color:#000;
    white-space: nowrap;
    cursor:default;
}
.nav-icon3-btn{
    position: relative;
    left:67px;
    top:12px;
    width:67px;
    height:22px;
    background-color:rgb(200,160,106);
    border-radius: 11px;
    line-height:22px;
}
.nav-icon3-btn a{
    display: block;
    width:67px;
    height:22px;
}
.nav-icon3-btn p{
    font-size:14px;
    font-family:'黑體';
    color: #fff;
    text-align: center;
}
.nav-icon3-btn:hover{
    background-color:rgb(226,188,129);
}
.nav-icon3-triangle{
    position:absolute;
    top:56px;
    left:19px;
    display:none;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid;
    border-color:transparent transparent #fff transparent;
}
.nav-icon4{
    position: relative;
    float:left;
    height:70px;
    width:40px;
    margin-left:20px;
}
.nav-icon4-box{
    position:absolute;
    left:-218px;
    top:70px;
    z-index: 2;
    width: 300px;
    height: 385px;
    display: none;
    background-color:#fff;
    border-radius:7px;
}
.nav-icon4:hover .nav-icon4-box{
    display: block;
}
.nav-icon4-nav{
    width:300px;
    height: 40px;
    border-bottom: 2px solid rgb(230,230,230);
}
.nav-icon4-span{
    position: relative;
    float: left;
    width:100px;
    height: 40px;
    line-height:40px;
    text-align:center;
}
.nav-icon4-span a{
    display:block;
    width:100px;
    height: 40px;
}
.nav-icon4-span span{
    font-size:15px;
    color:#000;
}
.nav-icon4-span:hover span{
    color:rgb(0,190,6);
}
.nav-icon4-span:hover div{
    display: block;
}
.nav-icon4-line{
    position:absolute;
    top:40px;
    right:38px;
    display:none;
    width:24px;
    height:4px;
    background-color: rgb(0,190,6);
    border-radius: 2px;
}
.nav-icon4-p{
    position: absolute;
    top:234px;
    left:30px;
}
.nav-icon4-p p{
    font-size:15px;
}
.nav-icon4-p a{
    color:rgb(0,190,6);
}
.nav-icon4-img{
    position:absolute;
    left:50%;
    top:117px;
    margin-left:-71.5px;
}
.nav-icon4-image1{
   margin-top:15px;
}
.nav-icon4-triangle{
    position:absolute;
    top:-14px;
    left:228px;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid;
    border-color:transparent transparent #fff transparent;
}
.nav-icon5{
    position: relative;
    float:left;
    height:70px;
    width:40px;
    margin-left:20px;
}
.nav-icon5-image1{
   margin-top:14px;
}
.nav-icon5-box{
    position:absolute;
    left:-218px;
    top:70px;
    z-index: 2;
    width: 300px;
    height: 385px;
    display: none;
    background-color:#fff;
    border-radius:7px;
}
.nav-icon5:hover .nav-icon5-box{
    display: block;
}
.nav-icon5-nav{
    width:300px;
    height: 40px;
    border-bottom: 2px solid rgb(230,230,230);
}
.nav-icon5-span{
    position: relative;
    float: left;
    width:100px;
    height: 40px;
    line-height:40px;
    text-align:center;
}
.nav-icon5-span a{
    display:block;
    width:100px;
    height: 40px;
}
.nav-icon5-span span{
    font-size:15px;
    color:#000;
}
.nav-icon5-span:hover span{
    color:rgb(0,190,6);
}
.nav-icon5-span:hover div{
    display: block;
}
.nav-icon5-line{
    position:absolute;
    top:40px;
    right:38px;
    display:none;
    width:24px;
    height:4px;
    background-color: rgb(0,190,6);
    border-radius: 2px;
}
.nav-icon5-p{
    position: absolute;
    top:234px;
    left:30px;
}
.nav-icon5-p p{
    font-size:15px;
}
.nav-icon5-p a{
    color:rgb(0,190,6);
}
.nav-icon5-img{
    position:absolute;
    left:50%;
    top:117px;
    margin-left:-71.5px;
}
.nav-icon5-image1{
   margin-top:15px;
}
.nav-icon5-triangle{
    position:absolute;
    top:-14px;
    left:228px;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid;
    border-color:transparent transparent #fff transparent;
}
.nav-icon6{
    position: relative;
    float:left;
    height:70px;
    width:40px;
    margin-left:17px;
}
.nav-icon6-image1{
   margin-top:14px;
}
.nav-icon6:hover .nav-icon6-box{
    display:block;
}
.nav-icon6:hover .nav-icon6-triangle{
    display:block;
}
.nav-icon6-box{
    position:absolute;
    left:-135px;
    top:70px;
    z-index: 2;
    display: none;
    width:195px;
    height:193px;
    padding-top:14px;
    background-color:#fff;
    border-radius:7px;
}
.nav-icon6-li{
    padding-top:5px;
    width:200px;
    height:30px;
}
.nav-icon6-li div{
    float:left;
    margin-left:20px;
    width:30px;
    height:30px;
}
.nav-icon6-li span{
    font-size:15px;
    color:#000;
    white-space: nowrap;
    cursor:default;
}
.nav-icon6-btn{
    position: relative;
    left:67px;
    top:12px;
    width:67px;
    height:22px;
    background-color:rgb(200,160,106);
    border-radius: 11px;
    line-height:22px;
}
.nav-icon6-btn a{
    display: block;
    width:67px;
    height:22px;
}
.nav-icon6-btn p{
    font-size:14px;
    font-family:'黑體';
    color: #fff;
    text-align: center;
}
.nav-icon6-btn:hover{
    background-color:rgb(226,188,129);
}
.nav-icon6-triangle{
    position:absolute;
    top:-14px;
    left:151px;
    display: none;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid;
    border-color:transparent transparent #fff transparent;
}

Banner區域及選單欄模組

其中這個區域的banner的大小是固定的，但是根據顯示屏及瀏覽器的大小不同banner的其餘部分怎麼辦？所以要給banner這個大盒子一個黑色背景。Banner的自動變換用css實現比較麻煩，所以現在暫時不用。這個區域存在的難點大都是定位的問題，比如右邊這個透明區域是依靠網頁中間定位的，選單欄裡的隱藏盒子是依靠每個li標籤定位的，下面來看一看這編寫過程中遇到的難點：

難點一   banner的居中

圖片的居中方式有很多，比如依靠定位來絕對居中，但是在這裡直接用background下面的center屬性就行了：

.nav-body-banner{
    height: 520px;
    width:100%;
    background:url("../images/banner/1.jpg") no-repeat center #000;
}

難點二  透明選單的定位

把瀏覽器縮小可以發現，透明選單是依靠網頁中間定位的，我給了left為50%，剩下的自己調

.nav-body-list{
    position:absolute;
    left:50%;
    top:0;
    margin-left:289px;
    width:276px;
    height:419px;
    padding-top:16px;
    background-color:rgba(0,0,0,.3);
}

下面貼一下原始碼

HTML：

<div class="nav-body">
                <div class="nav-body-img">
                    <ul>
                        <li class="nav-body-banner"><a href=""></a></li>
                    </ul>
                </div>
                <div class="nav-body-list">
                    <ul>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                        <li><a href="">回顧：慶祝改革開放40週年大會</a></li>
                    </ul>
                </div>
                <div class="nav-body-bottom">
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">娛樂</a></li>
                                <li><a href="">資訊</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li class="item-w">
                                    <a href="">電影</a>
                                    <div class="item-w-m">
                                        <a href="">全部電影</a>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>
                                            <a href="">無雙</a>
                                        </div>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>
                                            <a href="">無雙</a>
                                        </div>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>
                                            <a href="">無雙</a>
                                        </div>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>                                            
                                            <a href="">無雙</a>
                                        </div>
                                        <div class="item-triangle"></div>
                                    </div>
                                </li>
                                <li><a href="">網路電影</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li class="item-w">
                                    <a href="">電視劇</a>
                                    <div class="item-w-m">
                                            <a href="">全部電影</a>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>                                            
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-triangle"></div>
                                        </div>
                                </li>
                                <li><a href="">片花</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li class="item-w"><a href="">綜藝</a>
                                    <div class="item-w-m">
                                            <a href="">全部電影</a>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>                                            
                                                <a href="">無雙</a>
                                            </div>
                                            <div class="item-triangle"></div>
                                        </div>
                                </li>
                                <li><a href="">脫口秀</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">動漫</a></li>
                                <li><a href="">遊戲</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">搞笑</a></li>
                                <li><a href="">旅遊</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">音樂</a></li>
                                <li><a href="">時尚</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">原創</a></li>
                                <li><a href="">拍客</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">財經</a></li>
                                <li><a href="">科技</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">體育</a></li>
                                <li><a href="">教育</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">兒童</a></li>
                                <li><a href="">母嬰</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">生活</a></li>
                                <li><a href="">健康</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">軍事</a></li>
                                <li><a href="">汽車</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">公益</a></li>
                                <li><a href="">紀錄片</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">文學</a></li>
                                <li><a href="">漫畫</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">熱點</a></li>
                                <li><a href="">風雲榜</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">全網影視</a></li>
                                <li><a href="">應用商店</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">奇秀直播</a></li>
                                <li><a href="">直播中心</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">商城</a></li>
                                <li><a href="">VR</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">大頭</a></li>
                                <li><a href="">愛奇藝號</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">泡泡廣場</a></li>
                                <li><a href="">遊戲中心</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box-rightimg">
                        <a href="">
                            <img src="images/banner/4.png" width=33px alt="">
                            <p>會員精選</p>
                        </a> 
                    </div>
                </div>
            </div>

CSS：

.nav-body{
    position: relative;
    height:520px;
    width:100%;
    margin-bottom: 30px;
}
.nav-body-img{
    height:520px;
    width:100%;
}
.nav-body-img ul{
    height:520px;
}
.nav-body-banner{
    height: 520px;
    width:100%;
    background:url("../images/banner/1.jpg") no-repeat center #000;
}
.nav-body-banner a{
    display:block;
    height:520px;
}
.nav-body-list{
    position:absolute;
    left:50%;
    top:0;
    margin-left:289px;
    width:276px;
    height:419px;
    padding-top:16px;
    background-color:rgba(0,0,0,.3);
}
.nav-body-list li{
    height: 30px;
    line-height:30px;
    margin-bottom:10px;
}
.nav-body-list a{
    display: block;
    height:30px;
    text-indent: 15px;
    color:#fff;
}
.nav-body-list a:hover{
    color:rgb(28,190,6);
}
.nav-body-bottom{
    position: absolute;
    bottom: 0px;
    width:100%;
    height:85px;
    background-color:rgba(0,0,0,.85);
}
.nav-body-box:first-child{
    margin-left:40px;
}
.nav-body-box{
    float: left;
    height:85px;
    padding:15px;
}
.nav-body-box-item{
    float: left;
    margin-right:12px;
}
.nav-body-box-item li{
    margin-bottom: 12px;
}
.nav-body-box-item a{
    font-size: 15px;
    color:rgb(204,204,204);
}
.nav-body-box-item a:hover{
    color:rgb(0,190,6);
}
.nav-body-box-img{
    float: left;
}
.nav-body-box-img img{
    opacity: .3;
}
.nav-body-box-rightimg{
    float: left;
    margin-top:16px;
}
.nav-body-box-rightimg img{
    margin-left:12px;
}
.nav-body-box-rightimg p{
    color:rgb(226,188,129);
    font-size:15px;
}
.item-w{
    position: relative;
}
.item-w-m{
    position: absolute;
    bottom: 30px;
    left:-30px;
    display: none;
    width: 466px;
    height: 209px;
    padding:18px 0 0 20px;
    border-radius: 7px;
    background-color:rgba(0,0,0,.9);
}
.item-w-m a:first-of-type{
    float: left;
    width: 100%;
    color:rgb(204,204,204);
    font-size:15px;
}
.item-w-m a:hover{
    color:rgb(0,190,6);
}
.item-w:hover .item-w-m{
    display:block;
}
.item-w-m-i{
    float: left;
    width: 106px;
    height:170px;
    margin-top:10px;
    margin-right:10px;
    overflow: hidden;
}
.item-w-m-i img{
    width:103px;
}
.item-w-m-i img:hover{
    transform: scale(1.1);
}
.item-triangle{
    position: absolute;
    left:38px;
    bottom: -14px;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid;
    border-color:rgba(0,0,0,.9) transparent transparent transparent;
}

網頁內容

終於到網頁內容了，其中在這塊的細節也不少，有滑鼠滑入的放大和陰影效果，也有滑鼠滑入出現另一個大盒子，下面來看一下其中遇到的一些問題。

難點一  滑鼠滑入放大和盒子陰影效果

首先放大的時候增加一個溢位隱藏，然後為屬性新增過渡效果，記住transition不要放在hover裡面。在新增陰影時不要給img新增陰影，那樣會被overflow:hidden的，記住給img外邊的盒子新增陰影效果。

.content-img0{
    widows: 210px;
    height: 118px;
    overflow: hidden;
}
.content-img0 a{
    display: block;
}
.content-img0 img{
    display:block;
    transition:0.3s;
}
.content-img0:hover img{
    transform: scale(1.1);
}
.content-img0:hover{
    box-shadow: 0 3px 5px #000;
}

難點二 圖片下面出現空白

圖片下面出現空白的時候是沒有把圖片變成塊級元素，加上display:block就好了。

下面貼上原始碼：

HTML

<div class="content">
                <div class="content-box">
                    <div class="content-box-title">
                        <a href="">
                            <div class="content-box-title-img"></div>
                            <span>今日焦點</span>
                            <span>更多</span>
                        </a> 
                    </div>
                    <div class="content-box-con">
                        <div class="content-box-con1">
                            <div>
                                <div class="content-box-con1-top">
                                        <div><img src="images/19.png" alt=""></div>
                                        <a href="">2019春運火車票開搶 記好購票時間點</a>
                                </div>
                                <ul id="txtList0">
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">看美麗鄉村 遼寧石廟子村</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">《明日，應用改變生活》</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">中國扶貧道路越走越寬</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">拾荒老人寫33萬字愛情小說</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">明年個稅怎麼算？稅務總局公佈居民個人預扣預繳方法</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <div class="content-box-con1-top">
                                        <div><img src="images/19.png" alt=""></div>
                                        <a href="">西藏日喀則市謝通門縣發生5.8級地震</a>
                                </div>
                                <ul id="txtList0">
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">汽車“飛起”撞向隧道頂</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">我國擬對疫苗管理單獨立法</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">鄭州公交車肇事致13傷</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">為招攬生意男子用塗料P馬路</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">男子高鐵上吸毒被北京鐵路警方刑拘 自稱因感情受挫</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-box-con1-img">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/1.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">老翁將乘坐"木桶"橫渡大西洋</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/2.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">老人用樹根獨創"墨跡根書"</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>  
                        <div class="content-box-con2">
                            <div class="focus-pic-wrap">
                                <div class="picList1">
                                    <img src="images/pic/3.jpg" alt="">
                                    <div class="picList1-box">
                                        <div class="picList1-img">
                                            <div></div>
                                            <a href="">愛奇藝愛電影</a>
                                        </div>
                                        <div class="picList1-txt">
                                            <a href="">我和王凱沒有"相殺"只有相愛</a>
                                        </div>
                                        <div class="picList1-icon">
                                            <a href=""><div class="picList1-icon1"></div></a> 
                                            <span>1/4</span>
                                            <a href=""><div class="picList1-icon2"></div></a> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="focus-list-wrap">
                                <ul id="txtList0">
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">汽車“飛起”撞向隧道頂</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">我國擬對疫苗管理單獨立法</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">鄭州公交車肇事致13傷</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">為招攬生意男子用塗料P馬路</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">男子高鐵上吸毒被北京鐵路警方刑拘 自稱因感情受挫</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">汽車“飛起”撞向隧道頂</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">我國擬對疫苗管理單獨立法</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">鄭州公交車肇事致13傷</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">為招攬生意男子用塗料P馬路</a>
                                    </li>
                                </ul>
                            </div>
                        </div> 
                        <div class="content-box-con3">
                            <div class="content-box-con3-img1">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/4.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">周冬雨喊冤"我也是雙眼皮"</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/5.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">少女唱香蜜主題曲驚呆導師</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-box-con3-img1">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/6.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">周深天籟之音</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/7.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">溫暖冬日的浪漫聖誕曲</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-box-con3-img1">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/8.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">演員：學霸排練間睡覺引側目</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/9.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">奇懸疑劇場：原生之罪</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-box1">
                    <div class="content-boxl">
                        <div class="content-box1-title">
                            <a href="">
                                <div class="content-box-title-img box1-title"></div>
                                <span>綜藝</span>
                                <span>更多</span>
                                <span>上新了 故