html5網頁佈局

FreeeLinux發表於2017-11-16
HTML網頁

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>immoc</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
    <div class="container">  <!--用來限制在1200範圍以內-->
        <a href="index.html"><img src="images/logo.png" alt="logo"></a>
        <nav>
            <a class="Home active" href="index.html">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="active"><img src="images/banner/banner1.jpg" alt=""></li>
        <li class="left"><img src="images/banner/banner3.jpg" alt=""></li>
        <li class="right"><img src="images/banner/banner2.jpg" alt=""></li>
    </ul>
</section>

<section class="main">
    <aside>
        <h1>Recent <samp>Course</samp></h1>
        <dl>
            <dt>Hyper Text Markup Language</dt>
            <dd><img src="images/Course/05_05.png" alt=""></dd>
            <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks
                of all websites.
            </dd>
        </dl>
        <dl>
            <dt>Cascading Style Sheets</dt>
            <dd><img src="images/Course/06_04.png" alt=""></dd>
            <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to
                Web documents.
            </dd>
        </dl>
        <dl>
            <dt>JavaScript</dt>
            <dd><img src="images/Course/09_07.png" alt=""></dd>
            <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
        </dl>
        <dl>
            <dt>AngularJS</dt>
            <dd><img src="images/Course/02_09.png" alt=""></dd>
            <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of
                individuals and...
            </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">
        <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/weichat.png" alt="">
            <img src="images/icon/sina.png" alt="">
            <img src="images/icon/qq.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 {
    list-style: none;
}

header {
    height: 80px;
    background: #000;
}

header > .container { /*CSS3後代選擇器*/
    width: 1200px;
    margin: 0 auto;
}

header > .container > a {
    display: block;
    float: left;
    margin: 5px 25px;
}

header > .container > nav {
    float: right;
}

header > .container > nav > a {
    font-size: 24px;
    display: block;
    float: left;
    line-height: 73px;
    width: 110px;
    height: 73px;
    text-align: center;
    color: #fff;
}

header > .container > nav > a.Home {
    background: #433b90;
}

header > .container > nav > a.Course {
    background: #017fcb;
}

header > .container > nav > a.Actual {
    background: #78b917;
}

header > .container > nav > a.Plan {
    background: #feb800;
}

header > .container > nav > a.FAQ {
    background: #f27c01;
}

header > .container > nav > a.Notes {
    background: #d40112;
}

header > .container > nav > a:hover,
header > .container > nav > a.active {
    padding-bottom: 7px;
}

.banner {
    background: #eaeaea;
}

.banner > ul {
    position: relative;
    width: 1490px;
    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;
    right: 0;
    left: 0;
    width: 960px;
    height: 460px;
    margin: auto;
    border: 1px solid #fff;
}

.banner > ul > li.left {
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.banner > ul > li.right {
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.banner > ul > li > img {
    position: absolute;
    left: -30%;
    height: 100%;
}

.main {
    width: 1200px;
    height: 473px;
    margin: 34px auto 0;
}

.main h1 {
    font-size: 30px;
    font-weight: lighter;
    margin-bottom: 23px;
}

.main h1 > samp {
    font-size: 30px;
    color: #7c7c7c;
}

.main > aside {
    float: left;;
    width: 450px;
}

.main > aside > dl {
    position: relative;
    height: 100px;
    height: 74px;
    margin-bottom: 17px;
}

.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:last-of-type {
    position: absolute;
    top: 20px;
    left: 90px;
}

.main > article { /*塊級元素不給寬度預設為100%*/
    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;
}

footer > .container > span {
    float: right;
    margin: 14px 40px;
}

footer > .container > span > img {
    margin-left: 4px;
    opacity: 0.7;
}

footer > .container > span > img:hover {
    opacity: 1;
    cursor: pointer;
}

效果圖（經過縮放）：
這裡寫圖片描述

相關文章