CSS Box Mode 1 (Quick Start with DIV Layout)_html/css_WEB-ITnose

The center has recently recruited dozens of people, and I have become a little whirlwind. It seems that I will have to stay on this mountain for a few more days. After all, there are dozens of people, so how can we just leave it alone? I’ll post a post first to warm up! I also hope that the senior brothers and sisters from the previous years can give me more

advice.

The attribute names we often hear in web design: content, padding, border, margin, CSS box mode all have these attributes. We can understand these attributes by transferring them

to the boxes (boxes) in our daily life. The boxes we see in our daily life also have these attributes, so it is called the box pattern. Then the content is what is in the box; the filling is the foam or other earthquake-resistant auxiliary materials added to prevent the

things (valuable) in the box from being damaged; the border is the box itself; as for the border, it describes the box When placing them, they should not be piled together. A certain gap should be left for ventilation and

for easy removal. In web design, content often refers to text, pictures and other elements, but it can also be small boxes (DIV nested). Unlike boxes in real life, things in real life generally cannot be larger than boxes

otherwise the box will be stretched and damaged, and the CSS box is elastic. The things inside are larger than the box itself and will stretch it at most, but it will not be damaged. The filling only has the width attribute, which can be understood as the thickness of the anti-seismic accessories

in the boxes in life, while the border has size and color, which we can understand as the thickness of the boxes we see in life and what the box is used for. Made of colored materials, the boundary is the distance between the box and other things. In real life

suppose we place boxes of different sizes and colors at certain intervals and in a certain order in a square. Finally, when we look down from the square, we see the shapes and The structure is similar to the web page layout design we want to do

.

The traditional front-end web design is carried out like this: according to the requirements, first consider the main color and what type of pictures to use , what fonts, colors, etc. to use, and then use software such as Photoshop to freely draw them,

and finally cut them into small pictures, and no longer freely design HTML to generate pages. After switching to CSS for typesetting, we To change this idea, ***at this time we mainly consider the semantics and structure of the page content***, because a webpage with strong

CSS control, after the webpage is completed, you can easily Adjust the web page style you want. Moreover, another purpose of CSS layout is to make the code readable, clear the blocks, and enhance code reuse, so the structure is very important.

If you want to say that my web design is very complicated, will it be possible to achieve that effect later? What I want to tell you is that if the effect cannot be achieved with CSS, it is generally difficult to achieve it with tables, because the control power of CSS is too powerful. By the way, it is better to use CSS for typesetting A very practical advantage is that if you are taking orders to build a website, if you use CSS to layout the web page, if the customer is not satisfied with it later, especially the color

, then it will be easy to change it It's quite easy. You can even customize several styles of CSS files for customers to choose from, or write a program to implement dynamic calls, so that the website can dynamically change styles.

Achieving the separation of structure and presentation

Before starting the real layout practice, let’s understand one more thing? The separation of structure and presentation. This also uses the characteristics of CSS layout, the separation of structure and presentation. Finally, the code will be concise and easy to update. Isn't this the purpose of learning CSS? For example, P is a structured tag. Where there is a P tag, it indicates that this is a paragraph block. Margin is a performance attribute. I want to indent the right side of a paragraph by 2 characters. Some people will think of adding a space

space, and then continue to add spaces, but now you can specify a CSS style for the P tag: P {text-indent: 2em;}, so that the resulting body content is as follows, without any additional performance control tags:

Code:

Please support (Shantou Little Tornado)

If you want to modify this paragraph with font, font size, background, line spacing, etc., just add it directly Just add the corresponding CSS to the P style. There is no need to write it like this:

Code:

Paragraph content

This is written with a mixture of structure and expression. If many paragraphs have a unified structure and expression, it will be cumbersome to write the code in this way.

In example:

Typesetting with CSS

Code:

 

 

不用CSS排版

代码:

 

显然不用css排版的代码繁琐而且加载的也慢了许多。

第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介

绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代

码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就

不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。

用CSS排版减小网页文件体积

     像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了。

        在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、

align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像

P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“

文字块一

文字块二

文字块三

”，而用

“

文字块一

文字块二

文字块三

”更合适。

　　用DIV+CSS设计思路是这样的: ***1.用div来定义语义结构***；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的

盒子内加上内容，如文字、图片等（没有表现属性的标签），

用div来定义语义结构 ：

   典型版面分栏结构

 

代码:

上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子

装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

 

代码:

最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：

 

代码:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}

页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样

也是为了美观。其样式代码为：

 

代码:

#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

　

导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码

如下：

 

代码:

#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}

 

　内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定

距离，这里用填充。内容区块样式代码为：

 

代码:

#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;

}

版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

 

代码:

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

 

最后回到样式开头大家会看到这样的样式代码：

代码:

* {
margin: 0px;
padding: 0px;
}

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程

度上简化代码。最终完成全部样式代码是这样的：

代码:

结构代码是这样的： 代码:

• Homepage


• < ;a href="#">Article


• Album


• Blog


• Forum
  
• Help

Second paragraph

About Huasheng | Advertising Services | Huasheng Recruitment | Customer Service Center | Q Q Message | Website Management | Member Login | Shopping Cart

Copyright ©2006 - 2008 Tang
Guohui. All Rights Reserved

div> Post a post (little whirlwind on the mountain)