Beginner's article: How to use ccs to make a simple layout (with code)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Beginner's article: How to use ccs to make a simple layout (with code)

奋力向前

Sep 03, 2021 pm 05:29 PM

csshtml

In the previous article "Teach you step by step how to use css3 to create cool navigation bar effects (detailed code explanation)", I will introduce to you how to use css3 to create cool navigation bar effects. The following article will introduce to you how to use HTML to create a simple layout. Let's see how to do it together.

Beginner's article: How to use ccs to make a simple layout (with code)

As the Internet becomes more developed in life, web pages often have such a layout. I would like to share with you the renderings and see the effect. Let’s study how to achieve it. Well, let me explain to you the basic process of div css layout.

1. Create html

Html editing code example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

2. Define a div title containing text and use classAttribute to style.

<div class="title">顶部</div>
<div class="footer">底部</div>

3. Between style, initialize the style of body, add and set the outer margin margin to 0, and the inner marginpadding is 0, and then use text-align to set the text center.

<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
</style>

4. Between style, add styles to div and set the height of all div to 200px and the color of the content to red. .

div{height: 200px;color: red;}

5. Between style, style title. Use div to create the head of the web page, and use margin:0 auto to set it. divCenter, set its width to 800px, and set its background color to gray.

 .title{margin: 0 auto; width: 800px; background-color: #ccc}

6. Between style, use div to create the bottom of the web page, and use clear:both to clear the above div is floated to avoid affecting the bottom layout. Then use margin:0 auto to center div, and then use margin:0 auto to set its width to 800px, and finally the background color to

#000fff

.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}

7. Open the file in the browser to see the effect. Beginners article: How to use ccs to make a simple layout (with code)

Complete code

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
</head>
<body>
<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
 div{height: 200px;color: red;}
 .title{margin: 0 auto; width: 800px; background-color: #ccc}
 
 .footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
</style>
<div class="title">顶部</div>

<div class="footer">底部</div>
</body>
</html>

Recommended learning:

CSS video tutorial######

The above is the detailed content of Beginner's article: How to use ccs to make a simple layout (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that