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

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!