碼上快樂

相關內容    簡體    繁體

四十四：HTML5之HTML5頁面布局案例

本文轉載自   查看原文   2021-01-16 15:52   716    前端

 

HTML5新布局的意義：

1.語義化：HTML5可以讓更多語義化的結構代碼標簽代替大量的無異議的div標簽

　　1.這種語義化的特性提升了網頁的質量和語義

　　2.減少了以前用於CSS調用class和id屬性

2.對搜索引擎的友好：新的結構標簽帶來的是網頁布局的改變及提升對搜索引擎的友好

 

HTML5之前的布局

HTML5布局

 

布局目標示例：

 

html結構

 

CSS

初始化樣式和屬性

/* 去除默認樣式和初始化屬性 */
*{margin: 0;padding: 0;border: none;font-family: Arial;font-size: 14px;}

/* 去掉超鏈接的下划線 */
a{text-decoration: none}

/* 去掉ul標簽默認的· */
ul{list-style: none}

header部分

/* header塊 */
header{height: 80px; background: #000}
/* 灰度條 */
header:after{}

/* header.container容器 */
header > .container{width: 1200px; margin: 0 auto /* 左右居中 */}

/* header.logo的a標簽 */
header > .container > a{
    display: block; /* 把超鏈接變成塊級元素 */
    float: left; /* 左浮動 */
    margin: 5px 25px;  /* 外邊距，上下5，左右25 */
}
/* header.logo尺寸 */
header > .container > a > img{width: 198px; height: 73px;}

/* 導航條 */
header > .container > nav{float: right; /* 右浮動 */}
/* 導航條下的超鏈接 */
header > .container > nav > a{
    font-size: 24px;
    width: 110px;
    height: 73px;
    line-height: 73px;  /* 行高==高度，垂直居中 */
    text-align: center;  /* 左右居中 */
    display: block; /* 把超鏈接變成塊級元素 */
    float: left; /* 右浮動 */
    color: #fff;  /* 文字白色 */
}
/* 菜單按鈕背景 */
header > .container > nav > a.nav-a1{background: #433b90}
header > .container > nav > a.nav-a2{background: #017fcb}
header > .container > nav > a.nav-a3{background: #78b917}
header > .container > nav > a.nav-a4{background: #feb800}

/* 當前選中的超鏈接特效 */
header > .container > nav > a:hover,  /* 鼠標經過時觸發 */
header > .container > nav > a.active{padding-bottom: 7px; /* 下邊距7px */}

 

banner部分

/* banner部分 */
.banner{background: #eaeaea;}
/* ul標簽 */
.banner > ul{
    position: relative; /* 相對定位 */
    width: 1490px;
    height: 538px;
    margin: 0 auto; /* 水平居中 */
    padding-top: 10px; /* 內邊距為10px */
}
/* li標簽，圖片尺寸 */
.banner > ul > li{
    position: absolute; /* 絕對定位 */
    width: 610px;
    height: 300px;
    overflow: hidden; /* 溢出部分隱藏 */
}
/* 分別控制每張banner */
/* 中間激活的banner */
.banner > ul > li.active{
    z-index: 2;  /* 標記位置 */
    top: 37px; /* 距上邊37px */
    /* 左右都為0，則把圖片水平居中 */
    right: 0;
    left: 0;
    /* 圖片尺寸 */
    width: 960px;
    height: 460px;
    margin: auto;
    border: 1px solid #fff;  /* 邊框 */
}
/* 左側的banner */
.banner > ul > li.left{
    z-index: 1;  /* 標記位置 */
    /* 上下為0，則實現垂直居中 */
    top: 0;
    bottom: 0;
    left: 0; /* 靠左 */
    margin: auto;
}
/* 右側的banner */
.banner > ul > li.right{
    z-index: 1;  /* 標記位置 */
    /* 上下為0，則實現垂直居中 */
    top: 0; bottom: 0;
    right: 0; /* 靠右 */
    margin: auto;}
/* 圖片位置 */
.banner > ul > li > img{position: absolute; /* 絕對定位 */ left: -30%; height: 100%;}

頁面主體

 

頁腳部分

/*頁腳*/
footer{background: #000;}
footer > .container{width: 1200px;height: 64px;margin: 0 auto;}
/* 左邊 */
footer > .container > p{line-height: 64px; /* 行高與容器一致，垂直居中 */ float: left; /* 左浮動 */ color: #fff;}
/* 右邊圖標 */
/* span標簽 */
footer > .container > span{float: right;margin: 14px 40px; /* 上面14px，右邊40px */}
/* 圖片 */
footer > .container > span > img{margin-left: 4px;opacity: .7; /* 透明度0.7 */}
/* 當鼠標經過圖片的時候 */
footer > .container > span > img:hover{opacity: 1; /* 透明度1 */ cursor: pointer;  /* 鼠標變小手 */}

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 頭部 -->
    <header>
        <div class="container">
            <a href="#">
                <img src="logo.jpg" alt="">
            </a>
            <nav>
                <a href="#" class="nav-a1">home</a>
                <a href="#" class="nav-a2">菜單一</a>
                <a href="#" class="nav-a3">菜單二</a>
                <a href="#" class="nav-a4">菜單三</a>
            </nav>
        </div>
    </header>

    <!-- banner -->
    <section class="banner">
        <ul>
            <li class="active"><img src="banner1.jpg" alt=""></li>
            <li class="left"><img src="banner2.jpg" alt=""></li>
            <li class="right"><img src="banner3.jpg" alt=""></li>
        </ul>
    </section>

    <!-- 主體 -->
    <section class="main">
        <!-- 側邊欄 -->
        <aside>
            <h1>Recent <samp>Course</samp> </h1>
            <dl>
                <dt>標題1</dt>
                <dd><img src="05.png" alt=""></dd>
                <dd>內容1，內容1，內容1，內容1，內容1，內容1，內容1，內容1，內容1，內容1，內容1，內容1</dd>
            </dl>
            <dl>
                <dt>標題2</dt>
                <dd><img src="04.png" alt=""></dd>
                <dd>內容2，內容2，內容2，內容2，內容2，內容2，內容2，內容2，內容2，內容2，內容2，內容2</dd>
            </dl>
            <dl>
                <dt>標題3</dt>
                <dd><img src="07.png" alt=""></dd>
                <dd>內容3，內容3，內容3，內容3，內容3，內容3，內容3，內容3，內容3，內容3，內容3，內容3</dd>
            </dl>
            <dl>
                <dt>標題4</dt>
                <dd><img src="09.png" alt=""></dd>
                <dd>內容4，內容4，內容4，內容4，內容4，內容4，內容4，內容4，內容4，內容4，內容4，內容4</dd>
            </dl>
        </aside>

        <!-- 文章欄 -->
        <article>
            <h1>Recent <samp>Course</samp> </h1>
            <p>
                第一段內容，第一段內容，第一段內容，第一段內容，第一段內容，第一段內容，
                第一段內容，第一段內容，第一段內容，第一段內容，第一段內容，第一段內容
            </p>
            <img src="article.png" alt="">
            <p>
                第二段內容，第二段內容，第二段內容，第二段內容，第二段內容，第二段內容，
                第二段內容，第二段內容，第二段內容，第二段內容，第二段內容，第二段內容
            </p>
            <p>
                第三段內容，第三段內容，第三段內容，第三段內容，第三段內容，第三段內容，
                第三段內容，第三段內容，第三段內容，第三段內容，第三段內容，第三段內容
            </p>
        </article>
    </section>

    <!--頁腳-->
    <footer>
        <div class="container">
            <p>Copyright</p>
            <span>
                <img src="qq.png" alt="">
                <img src="sina.png" alt="">
                <img src="weichat.png" alt="">
            </span>
        </div>
    </footer>

</body>
</html>

 

CSS

/* 去除默認樣式和初始化屬性 */
*{margin: 0;padding: 0;border: none;font-family: Arial;font-size: 14px;}

/* 去掉超鏈接的下划線 */
a{text-decoration: none}

/* 去掉ul標簽默認的· */
ul{list-style: none}

/* header塊 */
header{height: 80px; background: #000}
/* 灰度條 */
header:after{}

/* header.container容器 */
header > .container{width: 1200px; margin: 0 auto /* 左右居中 */}

/* header.logo的a標簽 */
header > .container > a{
    display: block; /* 把超鏈接變成塊級元素 */
    float: left; /* 左浮動 */
    margin: 5px 25px;  /* 外邊距，上下5，左右25 */
}
/* header.logo尺寸 */
header > .container > a > img{width: 198px; height: 73px;}

/* 導航條 */
header > .container > nav{float: right; /* 右浮動 */}
/* 導航條下的超鏈接 */
header > .container > nav > a{
    font-size: 24px;
    width: 110px;
    height: 73px;
    line-height: 73px;  /* 行高==高度，垂直居中 */
    text-align: center;  /* 左右居中 */
    display: block; /* 把超鏈接變成塊級元素 */
    float: left; /* 右浮動 */
    color: #fff;  /* 文字白色 */
}
/* 菜單按鈕背景 */
header > .container > nav > a.nav-a1{background: #433b90}
header > .container > nav > a.nav-a2{background: #017fcb}
header > .container > nav > a.nav-a3{background: #78b917}
header > .container > nav > a.nav-a4{background: #feb800}

/* 當前選中的超鏈接特效 */
header > .container > nav > a:hover,  /* 鼠標經過時觸發 */
header > .container > nav > a.active{padding-bottom: 7px; /* 下邊距7px */}


/* banner部分 */
.banner{background: #eaeaea;}
/* ul標簽 */
.banner > ul{
    position: relative; /* 相對定位 */
    width: 1490px;
    height: 538px;
    margin: 0 auto; /* 水平居中 */
    padding-top: 10px; /* 內邊距為10px */
}
/* li標簽，圖片尺寸 */
.banner > ul > li{
    position: absolute; /* 絕對定位 */
    width: 610px;
    height: 300px;
    overflow: hidden; /* 溢出部分隱藏 */
}
/* 分別控制每張banner */
/* 中間激活的banner */
.banner > ul > li.active{
    z-index: 2;  /* 標記位置 */
    top: 37px; /* 距上邊37px */
    /* 左右都為0，則把圖片水平居中 */
    right: 0;
    left: 0;
    /* 圖片尺寸 */
    width: 960px;
    height: 460px;
    margin: auto;
    border: 1px solid #fff;  /* 邊框 */
}
/* 左側的banner */
.banner > ul > li.left{
    z-index: 1;  /* 標記位置 */
    /* 上下為0，則實現垂直居中 */
    top: 0;
    bottom: 0;
    left: 0; /* 靠左 */
    margin: auto;
}
/* 右側的banner */
.banner > ul > li.right{
    z-index: 1;  /* 標記位置 */
    /* 上下為0，則實現垂直居中 */
    top: 0; bottom: 0;
    right: 0; /* 靠右 */
    margin: auto;}
/* 圖片位置 */
.banner > ul > li > img{position: absolute; /* 絕對定位 */ left: -30%; height: 100%;}


/* 頁面主體 */
.main{width: 1200px;height: 473px;margin: 34px auto 0;}
/* 統一設置h1標簽的字體（標題） */
.main h1{font-size: 30px;font-weight: lighter;margin-bottom: 23px;  /* 下邊距23px */}
.main h1 > samp{font-size: 30px;color: #7c7c7c;}

/* 左側標題 */
.main aside{float: left;  /* 左浮動 */ width: 450px;}

/* 把dd標簽的圖片放到dt標簽的標題前面 */
.main > aside > dl{
    position: relative;  /* 相對定位，給后面的dt、dd絕對定位使用 */
    display: block;  /* 改為塊級元素 */
    height: 74px; margin-bottom: 17px;  /* 下邊距 */
}
/* dt標簽 */
.main > aside > dl > dt{
    position: absolute; /* 絕對定位 */ top: -1px;left: 92px;
    /* 文字部分 */
    font-size: 16px;font-weight: bold;line-height: 16px;text-decoration: underline;  /* 下划線 */
}
/* dd標簽, dd:first-of-type: 選擇屬於其父元素的首個元素，即dl下的第一個dd */
.main > aside > dl > dd:first-of-type{position: absolute;left: 0;}

/* dd標簽, dd:last-of-type: 選擇屬於其父元素的最后一個元素，即dl下的最后一個dd */
.main > aside > dl > dd:last-of-type{position: absolute;top: 20px;left: 90px;}

/* 文章內容 */
.main article{float: right;  /* 右浮動 */ width: 720px;overflow: hidden; /* 溢出部分隱藏 */}
/* 統一設置下邊距 */
.main > article > p,
.main > article > img{margin-bottom: 20px;}


/*頁腳*/
footer{background: #000;}
footer > .container{width: 1200px;height: 64px;margin: 0 auto;}
/* 左邊 */
footer > .container > p{line-height: 64px; /* 行高與容器一致，垂直居中 */ float: left; /* 左浮動 */ color: #fff;}
/* 右邊圖標 */
/* span標簽 */
footer > .container > span{float: right;margin: 14px 40px; /* 上面14px，右邊40px */}
/* 圖片 */
footer > .container > span > img{margin-left: 4px;opacity: .7; /* 透明度0.7 */}
/* 當鼠標經過圖片的時候 */
footer > .container > span > img:hover{opacity: 1; /* 透明度1 */ cursor: pointer;  /* 鼠標變小手 */}

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 一個簡單的HTML5頁面模板 html5頁面實現點擊復制功能 使用webview讓你的android加載html5頁面。 設置清除html5頁面緩存 如何使用webstorm創建html5頁面 手把手教你創建一個HTML5頁面 html5頁面手機端適配代碼 html5頁面調用手機打電話功能 安卓APP載入HTML5頁面解決方式總結 IOS、Android html5頁面輸入的表情符號變成了亂碼”？？？“
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM