The third day of learning Div CSS in ten days [two-column and three-column layout]_html/css

Home

Web Front-end

HTML Tutorial

The third day of learning Div CSS in ten days [two-column and three-column layout]_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:30 PM

One or two columns of adaptive width
The following is the common left column fixed and right column adaptive as an example. Because div is a block element, it occupies one row of space by default. To To make the following div run to the right, you need to use css to float it. First create the html code as follows:

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

Copy after login

After the div is created, start creating the css style sheet, the code is as follows:

#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

Copy after login

Then create the #main style. Note that the left margin of #main is set to 120px. The preview results are as follows:

2. Fixed width of two columns
With the previous foundation, it is much easier to fix the width of two columns. You only need to change # The width of main is changed from percentage to fixed value.

3. Two columns with fixed width and center
Two columns with fixed width and center need to be improved on the basis of two columns with fixed width. When learning to center one column with fixed width, we know to let it Centering method, so here you need to add a parent div in addition to these two divs:

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

Copy after login

The css code is as follows:

#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

Copy after login

4. Block-level elements (div) and inline elements (span) of xhtml
Block-level element: It is a square, like a paragraph, which occupies one line by default;

Inline element: Also called inline element, as the name suggests, it can only be placed within a line, just like a word, without causing line breaks before and after, and plays an auxiliary role.

General block-level elements such as paragraph

, title

..., list,

, table
, DIV
and BODY and other elements. Inline elements are such as: form element , hyperlink
, image ,
..... The salient features of block-level elements are: each Block-level elements are displayed starting from a new line, and subsequent elements also need to be displayed on a new line.

The block-level element occupies one line by default, which is equivalent to inserting a line break before and after it; the inline element span does not have any impact on the display effect, and this is also the case; em just makes the font become Italics also do not occupy a line by themselves. These are block-level elements and inline elements. It is because of these elements that our web pages become rich and colorful.

Without the effect of css, the block elements will be sequentially arranged one line at a time. With CSS, we can change the default layout mode of this HTML and place the block elements where you want. Instead of stupidly starting a new line every time. In other words, you can use display:inline of CSS to change block-level elements into inline elements, and you can also use display:block to change inline elements into block elements.

5. Three-column adaptive width
Three-column adaptive width. The commonly used structure is that the left and right columns are fixed, and the middle column automatically adjusts according to the browser width. adapt. Let's modify it based on the two-column adaptive width

<div id="side">此处显示 id "side" 的内容</div><div id="side1">此处显示 id "side1" 的内容</div><div id="main">此处显示 id "main" 的内容</div>
Copy after login

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
Copy after login

Remove the width:70% of the original #main style, and then set the left and right The outer margins are 120px each, allowing for the width of the left and right columns

#main { background: #99FFFF; height: 300px; margin:0 120px; }
Copy after login

Six, three-column fixed width
Three-column fixed width can be adjusted automatically in three columns Just add a parent div based on adaptation and set the width of this div. As follows, add a parent container with the id of content.

Select these three divs in the source code, and then click the "Insert div tag" button on the toolbar. The insertion item in the pop-up window will default to: wrap next to the selected content and enter the id for content, and then define a width for this div

The three-column fixed width is out. It is more convenient to achieve the three-column fixed width centered, just Set #content {margin:0 auto;} to

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>body { margin:0;}#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }#main { background: #99FFFF; height: 300px; margin:0 120px; }</style></head></p><p><body><div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="side1">此处显示 id "side1" 的内容</div> <div id="main">此处显示 id "main" 的内容</div></div></body></html>
Copy after login

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7723

Java Tutorial

1642

CakePHP Tutorial

1396

Laravel Tutorial

1290

PHP Tutorial

1233

Related knowledge

Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

See all articles