Chapter 5 Project Practice-fixed PC deployment [5], practice-pc

Source: Internet
Author: User

Chapter 5 Project Practice-fixed PC deployment [5], practice-pc

Learning points:

1. Bottom Area

2. Description Area

3. Copyright and document Area

 

Lecturer: Li Yanhui

 

This chapter describes how to use HTML5 and CSS3 to build Web pages. The first project is implemented with a fixed PC layout.

I. Bottom Area

In this lesson, we will discuss the bottommost area on the homepage. This area consists of two parts: the description content, including the partner, travel FAQ and contact information, and the Copyright Notice and various process document numbers.

// Parent element of the bottom area

<footer id="footer">    ...</footer>

// CSS, the parent element at the bottom

#tour {    height: 1150px;}#footer {    height: 360px;}

2. Description Area

// Top indicates the description area

<Div class = "top"> <div class = "block left"> 

Note: Here block represents the CSS used in the three blocks, while left, center, and right are the CSS unique to each block. Although CSS is not written, it is declared here, you can set fine-tuning later.

// The CSS in the description Section

#footer .top {    width: 1263px;    height: 281px;    margin: 0 auto;    text-align: center;}#footer .block {    width: 410px;    height: 280px;    display: inline-block;    text-align: left;    color: #ccc;    vertical-align: top;}#footer h2 {    font-size: 24px;    font-weight: normal;    padding: 20px 0 0 20px;}#footer hr {    width: 90%;    border: 1px dashed #333;}#footer ul {    font-size: 18px;    color: #777;    text-indent: 20px;    line-height: 2;}

Iii. Copyright and document Area

// Copyright area

<Div class = "bottom"> Copyright©YCKU Yucheng travel agency | su ICP preparation No. 120110119 | travel agency business license: L-YC-BK12345 </div>

// Copyright area CSS

#footer .bottom {    height: 80px;    line-height: 80px;    text-align: center;    color: #777;    background-color: #000;    border-top: 1px solid #444;}

Note: This tutorial is from Li Yanhui HTML5 video tutorial for the first quarter. Do not use this tutorial for commercial purposes. Otherwise, you are solely responsible for the consequences!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.