Home > Article > Web Front-end > div css layout mode one_html/css_WEB-ITnose
div css layout mode one_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:321034browse
What I wrote before:
Due to my personal interests and hobbies, I learned some knowledge about Web programming and took some notes to record the learning process. If you don't understand anything or make mistakes, please correct me. At the same time, I am happy to exchange some programming experiences with everyone.
The notes officially begin:
In the very early days of web programming, the web page layout people used for programming was generally a table-style layout. However, due to some shortcomings of the table layout, the table layout was gradually replaced by the DIV CSS layout method. However, the table has not been abolished, but has been integrated into the DIV CSS layout method, because the table is very convenient when displaying data.
DIV CSS is a website standard or becomes a WEB standard. To put it simply: DIV is a container used to store content (text, pictures, etc.). CSS is a cascading style sheet used to specify the style of content placed in a website, controlling the position and appearance of this content. The following is a picture to illustrate:
The advantages of this layout compared to table are:
The code in the HTML file is greatly reduced, and it becomes very concise and easy to read. ;
Content and style are separated, and the style is easier to adjust;
In line with the preferences of search engines, (this is also the reason why the profession of page optimizer SEO exists);
For some large websites, this layout is more convenient Save bandwidth during transmission.
Here is a quick experience case:
First is the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> 第一个网站 </title> <!--从当前路径下引入层叠样式单--> <link href="my.css" type="text/css" rel="stylesheet" /> </head> <body> <!--这里的class代表的是类选择器--> <div class="style1"> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> </div> </body></html>
Then is the CSS code:
/*CSS只有这一种注释的方式，其他的无效*//*类选择器*/.style1{width:300px;height:200px;/*三个属性中间隔开一个空格，不能用逗号隔开*/border:1px solid red;/*注意这四个参数的顺序，后面讲*/margin:0px 0px 0px 200px;}/*父子选择器*/.style1 table{width:298px;height:150px;border:1px solid black;}.style1 table td{border:1px solid black;/*使这个标签中的文字居中*/text-align:center;} Okay, that’s it for the first lecture on DIV CSS, let’s learn about it in an introductory way! Continue learning later.