第八十六節，html5+css3pc端固定佈局,網站結構,CSS選擇器,完成導航

時間 2019-11-12

標籤第八十六 html5+css3pc html css 固定佈局網站結構選擇器完成導航欄目 HTML 简体版

原文原文鏈接

html5+css3pc端固定佈局,網站結構,CSS選擇器,完成導航css

頁面採用1280的最低寬度設計，去掉滾動條爲1263像素。html

項目是PC端的固定佈局，會採用像素(px)單位。html5

網站結構語義css3

在沒有任何思路的狀況下，能夠參考大量同類型的網站，瞭解一下大體結構。咱們將要作的網站是一個旅行社的企業網站。通過大量參考，首頁上，咱們選擇了最基本的四個模塊。佈局

四個基本模塊：nav 導航、header頭部、section首頁主體、footer尾部 網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瓢城旅行社</title>
</head>
<body>

<!--導航-->
<nav></nav>

<!--頭部-->
<header></header>

<!--主體-->
<section></section>

<!--尾部-->
<footer></footer>

</body>
</html>

CSS選擇器搜索引擎

咱們這個旅行社的網站屬於中小型網站，通用樣式採用元素定義型；頂層的佈局元素能夠使用id定義型；其餘標籤一概class定義型。

url

完成導航spa

HTML代碼設計

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瓢城旅行社</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--導航-->
<nav class="dao-hang">
    <div class="dao-hang2">
        <h1 class="log">瓢城旅行社</h1>
        <ul>
            <li class="dao-hang-lie-biao"><a href="index.html">首頁</a></li>
            <li class="dao-hang-lie-biao"><a href="#">旅遊資訊</a></li>
            <li class="dao-hang-lie-biao"><a href="#">機票訂購</a></li>
            <li class="dao-hang-lie-biao"><a href="#">風景欣賞</a></li>
            <li class="dao-hang-lie-biao"><a href="#">公司簡介</a></li>
        </ul>
    </div>
</nav>

<!--頭部-->
<header>header</header>

<!--主體-->
<section>section</section>

<!--尾部-->
<footer>footer</footer>

</body>
</html>

css代碼

@charset "utf-8";
/*通用樣式*/
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
/*通用樣式結束*/

/*導航區域*/
.dao-hang{
    width: 100%;
    height: 70px;
    background-color: #333;
    color: azure;
}
.dao-hang .dao-hang2{
    width: 1263px;
    height: 70px;
    margin: 0 auto;
}
.dao-hang .dao-hang2 .log{
    width: 240px;
    height: 70px;
    float: left;
    background-image: url("../img/logo.png");
    text-indent:-9999px;
}
.dao-hang .dao-hang2 ul{
    float: right;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao{
    width: 120px;
    height: 70px;
    float: left;
    text-align: center;
    line-height: 70px;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao a{
    display: block;
    width: 120px;
    height: 70px;
    color: azure;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao a:hover{
    background-color: #ff4d51;
}
/*導航區域結束*/

總結

1.之前咱們佈局都是用div，html5更着重語義，用語義標籤替換之前的div,咱們採用的語義標籤，nav 導航、header頭部、section首頁主體、footer尾部

2.若是是頁面大部分標籤都要用到的css樣式，能夠寫在開頭通用樣式如：

/*通用樣式*/
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
/*通用樣式結束*/

去除全部元素的內外邊距，去除所ul的小圓點，去除全部a標籤的下劃線

3.備註：LOGO採用的是h1標籤，通常爲了讓搜索引擎更好的抓取關鍵字，咱們建議一個頁面只有一個h1，並且是最重要的關鍵詞放在裏面。在首頁上，最重要的關鍵詞就是旅行社的名稱。固然，若是在其餘頁面，好比新聞網站的單個新聞，最重要的應該是新聞標題，網站的名稱就其次了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。