HTML5 页面布局【结合案例】

最新推荐文章于 2024-07-19 13:18:23 发布

极简君君

最新推荐文章于 2024-07-19 13:18:23 发布

阅读量3.8w

点赞数 49

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_41964994/article/details/81836395

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

新布局的意义

语义化
HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签

1. 这种语义化的特性提升了网页的质量和语义

2. 减少了以前用于CSS 调用的class 和 id 属性

对搜索引擎的友好新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好

额外补充点：新巩固

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5 页面布局</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <div class="container">
            <a href="./index.html"><img src="./images/logo.png" alt="logo"></a>
            <nav>
                <a class='Home active' href="#">Home</a>
                <a class='Course' href="#">Course</a>
                <a class='Actual' href="#">Actual</a>
                <a class='Plan' href="#">Plan</a>
                <a class='FAQ' href="#">FAQ</a>
                <a class='Notes' href="#">Notes</a>
            </nav>
        </div>  
    </header>
    <section class="banner">
        <ul>
            <li class="left"><a href="#"><img src="./images/banner/banner1.jpg" alt="1"></a></li>
            <li class="active"><a href="#"><img src="./images/banner/banner2.jpg" alt="2"></a></li>
            <li class="right"><a href="#"><img src="./images/banner/banner3.jpg" alt="3"></a></li>
        </ul>
    </section>
    <section class="main">
        <aside>
            <!-- <samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签 -->
            <h1>Recent  <samp>Course</samp></h1>
            <dl>
                <dt>Hyper Text Markup Language</dt>
                <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
                <dd><img src="./images/Course/05_05.png" alt="1"></dd>
            </dl>
            <dl>
                <dt>Cascading Style Sheets</dt>
                <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
                <dd><img src="./images/Course/06_04.png" alt="2"></dd>
            </dl>
            <dl>
                <dt>JavaScript</dt>
                <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
                <dd><img src="./images/Course/09_07.png" alt="3"></dd>
            </dl>
            <dl>
                <dt>AngularJS</dt>
                <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
                <dd><img src="./images/Course/02_09.png" alt="4"></dd>
            </dl>
        </aside>
        <article>
            <h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
            <p>We provide the latest knowledge to help you cope with the changing world!</p>
            <img src="./images/article.jpg" alt="11">
            <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
            <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
        </article>
    </section>
    <footer>
        <div class="container">
            <p>Copyright © 2016 imooc.com All Rights Reserved.</p>
            <span>
                <img src="./images/icon/qq.png" alt="1">
                <img src="./images/icon/sina.png" alt="2">
                <img src="./images/icon/weichat.png" alt="3">
            </span>
        </div>
    </footer>
</body>
</html>

style.css

/* 重置样式 通配符*/
*{
    font-family: Arial;
    font-size:14px;
    margin: 0;
    padding: 0;
    border: none
}
ul li {
    list-style: none
}
a{
    text-decoration: none
}
/* 头部 */
header{
    position: relative;
    height: 80px;
    background-color: #000000;
}
header:after{
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 7px;
    content: '';
    background-color: #d6d6d6;
}
header > .container{
    position: relative;
    z-index: 1;
    width:1260px;
    margin: 0 auto

}
header > .container > a{
    display: block;
    float: left;
    margin:5px 25px
}
header > .container > nav{
    float: right;
}
header > .container > nav > a{
    display: block;
    float: left;
    text-align: center;
    font-size: 24px;
    color: #ffffff;
    width:100px;
    height: 73px;
    line-height: 73px;

}
header > .container > nav > a.Home {background-color: #433b90}
header > .container > nav > a.Course {background-color: #017fcb}
header > .container > nav > a.Actual {background-color: #78b917}
header > .container > nav > a.Plan {background-color: #feb800}
header > .container > nav > a.FAQ {background-color: #f27c01}
header > .container > nav > a.Notes {background-color: #d40112}
header > .container > nav > a:hover,
header > .container > nav > a.active{
    padding-bottom: 7px
}
/* Banner */
.banner{
    position: relative;
    background-color: #eaeaea;
}
.banner:after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    content: '';
    background-color: #d6d6d6;
}
.banner > ul{
    position: relative;
    width: 1260px;
    height: 538px;
    margin: 0 auto;
    padding-top: 10px;

}
.banner > ul > li{
    position: absolute;
    width: 610px;
    height: 300px;
    overflow: hidden;
}
.banner > ul > li.active{
    z-index: 2;
    top: 37px;
    left: 0;
    right: 0;
    width: 960px;
    height: 460px;
    margin: auto;
    border: 1px solid #ffffff;
    box-shadow: 20px 20px 22px rgba(0, 0, 0, .2)
}
.banner > ul > li.left{
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35)
}
.banner > ul > li.right{
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35)
}
.banner > ul > li > a > img{
    position: absolute;
    left: -30%;
    height: 100%;
}
/* main */
.main{
    position: relative;
    width: 1200px;
    height: 500px;
    margin: 37px auto 0 auto

}
.main > aside{
    float: left;
    width: 450px;
}
.main > aside > h1{
    font-size: 30px;
    font-weight: lighter;
    margin-bottom: 23px;
}
/* <samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。
要从正常的上下文抽取这些字符时，通常要用到这个标签。*/
.main > aside > h1 >samp{
    font-size: 30px;
    color: #7c7c7c;
}
.main > aside > dl{
    position: relative;
    display: block;
    margin-bottom: 23px;
    height: 74px;
}
.main > aside > dl > dt{
    position: absolute;
    top: -1px;
    left: 92px;
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    text-decoration: underline;
}
.main > aside > dl > dd:first-of-type{
    position: absolute;
    left: 0;
}
.main > aside > dl > dd:first-of-type{
    position: absolute;
    top: 20px;
    left: 92px;
}
.main > article{
    float: right;
    width: 700px;
    overflow: hidden;
}
.main > article > h1{
    font-size: 30px;
    font-weight: lighter;
    margin-bottom: 23px;
}
.main > article > h1 >samp{
    font-size: 30px;
    color: #7c7c7c;
}
.main > article > p,
.main > article > img{
    margin-bottom: 20px
}
footer{
    position: relative;
    background-color: #000000;
}
footer:before{
    position: absolute;
    z-index: -1;
    top: -6px;
    left: 0;
    width: 100%;
    height: 7px;
    content: '';
    background-color: #d6d6d6;
}
footer > .container{
    width: 1200px;
    margin: 0 auto;
    height: 63px;
}
footer > .container > p{
    float:left;
    line-height: 63px;
    color: #ffffff;
    font-size: 14px;
}
footer > .container > span{
    float: right;
    margin: 14px 30px

}