CSS DIV--essential foundation for front-end er_html/css_WEB-ITnose

　

B/S is really a stage of gaining knowledge. I have learned a lot of necessary languages ​​for the front end. As time goes by, I thought I still don’t know what I learned in the news release system. I have long lost my impression of what it is. But on the contrary, it became even more profound. I didn’t know what CSS was at that time, so I learned to write CSS. Before I even knew what asynchronous communication was, I learned how to use AjaX. When I saw the classic frame in the video, I realized that this was the CSS DIV used in the news release system! (⊙o⊙)Oh, it turns out I already knew how to write!

1. Why is DIV CSS

Seeing this combination, I was wondering why it is such a combination? Can’t Span! Can't you just use HTML directly? A very clear purpose: to separate data content from data format and facilitate front-end ER development and maintenance. Imagine the statement of an internally linked style sheet

<span style="font-family:KaiTi_GB2312;font-size:18px;"><link href="%EF%BC%88css%E6%A0%B7%E5%BC%8F%E8%A1%A8%EF%BC%89" rel="stylesheet" type="text/css"></span>

If you need to modify the style of any front-end element, just look for the ID or category name in the style sheet. This undoubtedly greatly improves the efficiency of development.

Another question is why can’t Span? The difference between SPAN and DIV is that DIV (division) is a block-level element that can contain paragraphs, titles, tables, and even chapters, abstracts, notes, etc. SPAN is an inline element. There will be no line breaks before and after SPAN. It has no structural meaning and is purely for applying styles. When other inline elements are not suitable, SPAN can be used.

2. Implement DIV CSS step by step

Step ONE: DIV block

First of all, we must consider that the web page is divided into several display parts. Banner and Footer are necessary. The display of other content is a matter of personality and is assigned to the corresponding DIV block.

Step Two: DIV positioning??box Model

Using CSS style sheet to position the DIV, we need to use our box model, as its name suggests, the box is used to store things, it can be arbitrary move. Of course a more technical word, we call it float. The following is a display of the box model, margin, border, and padding. If you can relate to the images on the walls of a photo studio, that would be great!

Step Three: Overall Architecture

The following code is an interpretation of the first prototype, which is the implementation result of a very basic CSS DIV. The box floating effect is used, allowing the content module and link module to float to the left and right respectively.

<style type="text/css"><!--body {	margin:0px;	font-size:13px;	font-family:Arial;} #container{	position:relative;	width:100%;}#banner{	height:80px;	border:1px solid #000000;	text-align:center;	background-color:#a2d9ff;	padding:10px;	margin-bottom:2px;}#content{	float:left;	text-align:center;	padding-right:200px;	/* 内容往回挤200px */}#links{	float:right;	width:200px;	border:1px solid #000000;	margin-left:-200px;		/* 强行往左拉回200px */	text-align:center;}#footer{	clear:both;				/* 不受float影响 */	text-align:center;	height:30px;	border:1px solid #000000;}--></style><title>CSS排版</title><div id="container">	<div id="banner">banner</div>	<div id="content">		<div class="blog">			<div class="date">date</div>			<div class="blogcontent">content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>			</div>		</div>		<div class="others">others</div>	</div>	<div id="links">		<div class="calendarhead">links<br>links<br>links<br>links</div>		<div class="calendartable">links<br>links<br>links<br>links</div>		<div class="side">links<br>links<br>links<br>links</div>		<div class="syndicate">links<br>links<br>links<br>links</div>		<div class="friends">links<br>links<br>links<br>links</div>	</div>	<div id="footer">footer</div>
</div>

The rendering is as follows:

3. Summary

With the combination of CSS and DIV, the loading of web pages becomes easier, because the separation of data and format makes maintenance easier. The improvement of search efficiency and browsing efficiency will bring a good user experience. So... Such a simple source code frontend composed of CSS DIV is the necessary foundation for us to learn front-end development.