我想弄一個背景圖當作網頁開頭，這邊需要用到 background img 這個屬性，這是讓物件疊圖片上最簡單的方法，當然你也能用 position 定位的方式，之後有需要在詳解。

既然我打算將圖片填滿網頁頂部，直接css給 body bgimg就行了。

body {
    background-image: url(../img/bgimg1.jpg);
    /*背景圖片位置 */
    background-size: 100%;
    /*圖片寬度為螢幕的100%*/
    background-repeat: no-repeat;
    /* 不重複圖片*/
}

也可以以style的方式放在物件裡面:

 <div class="head_background"
        style="background:#000 url('./img/bgimg1.jpg') center center no-repeat;-moz-background-size: cover;background-size:cover;">
    </div>

css:

body {
margin: 0 0;
/* 讓內容填滿網頁不留邊框 */
}

.head_background {
width: 100%;
height: 750px;
}

下拉式選單

用 ul li 列表來做下拉式選單，程式碼如下:

 <div class="floa">

        <ul class="menu">
            <li><a href="">Destinations
                </a>
                <ul>
                    <li><a href="">AFRICA</a>
                    </li>
                    <li><a href="">EUROPE</a>
                    </li>
                    <li><a href="">ORIENT</a>
                    </li>
                    <li><a href="">ASIA</a>
                    </li>
                </ul>
            </li>
            <li><a href="">Experiences
                </a>
                <ul>
                    <li><a href="">AFRICA</a>
                    </li>
                    <li><a href="">EUROPE</a>
                    </li>
                    <li><a href="">ORIENT</a>
                    </li>
                    <li><a href="">ASIA</a>
                    </li>
                </ul>
            </li>
            <li><a href="">Highlights
                </a>
                <ul>
                    <li><a href="">AFRICA</a>
                    </li>
                    <li><a href="">EUROPE</a>
                    </li>
                    <li><a href="">ORIENT</a>
                    </li>
                    <li><a href="">ASIA</a>
                    </li>
                </ul>
            </li>

        </ul>



    </div>

css:

/* 最外圍的box */
.floa {
    display: flex;
    width: 100%;
    height: 50px;
}

/* 表單邊距、置中 取消表單預設樣式 */
ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

ul.menu {

    display: inline-block;
    font-size: 20px;
}

/* 向右排列 */
ul.menu>li {
    float: left;

}

/* 子清單的設定 */
ul.menu a {

    color: rgb(255, 255, 255);
    display: block;
    padding: 0 30px;
    text-decoration: none;
    line-height: 40px;

}

ul.menu a:hover {

    background-color: #ef5c19;
    color: #fff;

}

ul.menu ul {

    display: none;
}

ul.menu li:hover>ul {
    display: block;
}

第二層，第三層子清單同理。