[Detailed explanation of div css web page layout]_html/css

[Detailed explanation of div css web page layout]_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:04:13

Original

1695 people have browsed it

Foreword:

Web page layout is the first and most important step in making a web page. Today, let’s talk in detail about how to use div css layout.

There are two ways to write web pages with dw, one is the graphical interface, and the other is the code. If you are a beginner, you can use the graphical interface. When you are almost done, you can use the code to improve efficiency. .

Because there are major changes in css3 and css2 before, let’s start with css2.

(The author uses Dreamweaver cs6, download address for cracked version: http://www.aa25.cn/download/954.shtml)

1. Single column Layout

A web page writer must first build a framework, as shown below:

Simply divide the web page into 4 parts, header title part, nav navigation part, article body, footer footer

This is a single column layout.

Create these 4 structures through div, then layout with css and add styles

Use dw to quickly create divs as shown below:

In the past, divs were used to create this structure directly, and the div was found by id for layout,

Click the new button on the right side of the picture to create a css style. Pay attention to the select Type in the middle and the rules for selecting styles. This is selected directly through the id. The id is like an ID card. Each one is different. Of course, it depends on the situation

You can also choose css class selectors, pseudo-class selectors, etc.

Set the css style in the pop-up page:

We add color to the layout just now and set a fixed size width and height. The result is as follows:

I found that there are two white edges on the top and left. This problem is also easy for novices to wonder. In fact, this is the default value of css. There are many similar to this,

So generally when writing a web page, some properties should be initialized first. Written like this: body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5, h6,form,p { padding:0; margin:0;}

To cancel the white margin here, just write: body { margin:0}

All codes are as follows:

<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">#header {	background-color: #0F9;	height: 100px;	width: 500px;}#nav {	background-color: #F00;	height: 50px;	width: 500px;}#article {	background-color: #93C;	height: 300px;	width: 500px;}#footer {	background-color: #F99;	height: 50px;	width: 500px;}</style></head><body><div id="header">header</div><div id="nav">nav</div><div id="article">article</div><div id="footer">footer</div></body></html></strong></span>

Copy after login

The above is a fixed width. If you want the width to change when the browser size changes, just use the % unit, such as :width:70%

The attribute that centers the div: The margin attribute is changed to auto
The above is how to write html4 and css2.

In HTML5, due to the addition of new structural tags, many places do not need to write the block-level structure of div, but directly use tags such as

. When adding css, you can directly add

<span style="font-size:18px;color:#006600;"><strong><header>header</header><nav>nav</nav><article>article</article><footer>footer</footer></strong></span>

Copy after login

2. Multi-column layout Because div is a block-level element, The name suggests that each block is one block, and each block occupies one row. If you want to have multiple blocks in one row, you must use CSS to adjust it to a multi-column layout

to display the following effect:

Code:

<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">#left {	background-color: #3FC;	float: left;	height: 400px;	width: 100px;}#center {	background-color: #9C0;	float: left;	height: 400px;	width: 100px;}#right {	background-color: #F9F;	height: 400px;	width: 100px;	float: left;}</style></head><body><div id="left">header</div><div id="center">nav</div><div id="right">article</div></body></html></strong></span>

Copy after login

The method in css2 is: add float to div Attributes,

Set the float attribute in the box to left

float: left;

This method has a disadvantage: for example, if you post an article and divide the article into 3 columns using float, after you add content to any column, this column will be longer than the other columns, so It will be very troublesome to modify it.

The newly added multi-column layout and box layout in css3 perfectly solve this problem.

First use the box layout to look at the code. The effect is the same as the picture above. You can implement it yourself:

<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head>	<meta charset="utf-8">	<title>Untitled Document</title>	<style type="text/css">		#layout{			display: -moz-box;			display: -webkit-box;		}		#left {			background-color: #3FC;			height: 400px;			width: 100px;		}		#center {			background-color: #9C0;			height: 400px;			width: 100px;		}		#right {			background-color: #F9F;			height: 400px;			width: 100px;		}		#left,#center,#right{			-moz-box-sizing:border-box;			-wdbkit-box-sizing:border-box;		}	</style></head><body>	<div id="layout">		<div id="left">header</div>		<div id="center">nav</div>		<div id="right">article</div>	</div></body></html></strong></span>

Copy after login

The above box layout can achieve the same effect as the float position layout in CSS2, and can automatically realize alignment without the problem of float.

Let’s take a look at the implementation of multi-column layout:

Just like in the example The implementation is the same. The multi-column layout is mainly suitable for articles and can be modified at will without changing the appearance of the web page. Of course, this layout also has limitations: each column has the same width.

And you have to write the total width of the columns, and then how many columns are needed it will be automatically distributed evenly.

The code is as follows:

<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head>	<meta charset="utf-8">	<title>Untitled Document</title>	<style type="text/css">		#article{			width:800px;			-moz-column-count:3;			-webkit-column-count:3;		}	</style></head><body>	<div id="article">		　（节省篇幅，文章内容略）	</div></body></html></strong></span>

Copy after login

Okay, I talked about the single column layout and multi-column layout of div css Column layout and layout are basically the same, because divs can be nested, so if you subdivide a div, you still can't break away from these two.