Home >Web Front-end >HTML Tutorial >Application of Div CSS layout in web design_html/css_WEB-ITnose
Application of Div CSS layout in web design_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:30:251463browse
一、页面布局与规划
好久没有认真写点东西了，想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题，其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，下一节我们要做的就是开始书写HTML代码和CSS。
二、写入整体层结构与CSS
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在
标签对中写入DIV的基本结构，代码如下： In order to make it easier to read the code in the future, we should add relevant comments. Next, open the css.css file and write the CSS information. The code is as follows:
/*Basic information*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*Page layer container*/
#container {width:100%}
/*Page header*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*Page body*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
/*Bottom of page*/
#Footer {width:800px;margin:0 auto;height:50px; background:#00FFFF}
Save the above file and open it with a browser. At this time we can already see the basic structure. This is the frame of the page.
Instructions on the above CSS (for details, please refer to the CSS2.0 Chinese manual, available for download online):
1. Please develop good comment habits, this is very important;
2. Body is an HTML element. All content on the page should be written within this tag pair, so I won’t say more;
3. Explain the meaning of some commonly used CSS codes:
font:12px Tahoma;
Abbreviations are used here, the complete code should be: font-size:12px; font-family:Tahoma; indicating that the font is 12 pixels in size and the font is in Tahoma format;
margin:0px;
Abbreviations are also used, the full version should be:
margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px
or
margin:0px 0px 0px 0px
The order is top/right/bottom/left. You can also write it as margin:0 (abbreviation);
The above style description indicates that the top, right, bottom and left margins of the body part are 0 Pixels, if you use auto, the margins will be automatically adjusted,
There are also the following writing methods:
margin:0px auto;
It means that the top and bottom margins are 0px, and the left and right margins are automatically adjusted;
We The padding attribute that will be used in the future has many similarities with margin. Their parameters are the same,
, but they have different meanings. Margin is the outer distance, and padding is the inner distance.
Text-align:center
Text alignment can be set to left, right, or center. Here I set it to center alignment.
background:#FFF
Set the background color to white. The color is abbreviated here. The complete color should be background:#FFFFFF.
Background can be used to fill the specified layer with background color and background image. We will use the following format in the future:
background:#ccc url('bg.gif') top left no-repeat;
Representation: Use #CCC (grayscale color) to fill the entire layer, use bg.gif as the background image,
Top left
] ]Ãé of the current layer. Fill the entire layer.
Top/right/left/bottom/center
Used to position the background image, indicating top/right/bottom/left/center respectively; you can also use
background:url('bg.gif') 20px 100px;
can be filled in/out Fill / Fill along the X axis / Fill along the Y axis.
Height / width / color
4. How to center the page?
It’s because we used the following attributes in #container:
margin:0 auto;
According to the previous explanation, you can know that the top and bottom margins are 0, and the left and right margins are automatic, so this layer will Automatically centered.
If you want the page to be on the left, just cancel the auto value, because it is displayed on the left by default.
With margin:auto we can easily center the layer automatically.
5. Here I only introduce these commonly used CSS properties. For others, please refer to the CSS2.0 Chinese manual.
三、页面顶部制作(1)
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：
程序代码
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container {width:800px;margin:10px auto}
样式说明：
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}
这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。
#container {width:800px;margin:10px auto}
指定整个页面的显示区域。
width:800px指定宽度为800像素，这里根据实际所需设定。
margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。
接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：
我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为800px。
到这里，有的朋友就说了，* 为什么要使用GIF格式？使用JPEG不是更好吗？
因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。
* 接下来的Banner部分还能使用GIF格式吗？
答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。
* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。
切好片后，我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下：
为什么要这么写呢，因为对菜单使用列表
而为什么要添加以下代码呢？
插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。
然后我们在css.css中再写入以下样式：
/*页面头部*/
#header {background:url(logo.gif) no-repeat}
样式说明：
#header {background:url(logo.gif) no-repeat}
给页面头部分加入一个背景图片LOGO，并且不作填充。
这里，我们没有指定header层的高度，为什么不指定呢？
因为header层中还有菜单和banner项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。
* 接下来，我们开始制作菜单，留到下一章，教程中相关文件请到下一章下载！
三、页面顶部制作(2)----使用列表
开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
这一节我将告诉大家如何用列表
The above is the structure of this part. Regarding the two HTML elements
There is another point that everyone must understand clearly. When it is defined as id="divID" in HTML, the corresponding setting syntax in CSS is #divID{}. If it is defined as class in HTML ="divID", the corresponding setting syntax in CSS is .divID.
If the layer with id="divID" includes an
In addition, all elements in HTML can be defined, such as table, tr, td, th, form, img, input... etc. If you want to set them in CSS, write the elements directly Just add a pair of braces {} to the name. All CSS code should be written within curly brackets {}.
According to the above introduction, we first write the following code in css.css:
#menu ul {list-style:none; margin:0px;} :left;}
Explain:
#menu ul {list-style:none;margin:0px;}
list-style:none, this sentence is the point before canceling the list, because we These points are not needed.
Margin:0px, this sentence is to delete the indentation of UL. This can make all list contents unindented.
#menu ul li {float:left;}
The left and right of float:left here are to display the content on the same line, so the float attribute (float) is used.
At this point, it is recommended that you save the preview effect first, and then add the following content. The effect is as follows:
At this time, the list content is arranged in one line, and we are # Menu ul li {} adds code Margin: 0 10px:
#Menu ul {list-style: none; margin: 0px;}
#Menu ul li {float: left; margin: 0 10px}
The function of margin:0 10px is to create a 20-pixel distance between the list contents (left: 10px, right: 10px). The preview effect is as follows:
{float:right;list-style:none;margin:0px;}
/*Added float:right to make the menu on the right side of the page*/ #menu ul li {float: left; margin: 0 10px }
At this time, the location has been determined, but in the conceptual diagram, there is a vertical line between the menu options. What should I do?
Don’t forget, we have already left an empty
According to the method mentioned above, we add the following code:
.menuDiv {width:1px;height:28px;background:#999}
Save and preview to see if the vertical line has come out ? I won’t say much about this code, it should be easy to understand.
However, the text of the menu options is at the top, so we modify it to the following code:
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
About display:block;line-height:28px, you can refer to the manual, I won’t go into details.
The effect has basically been achieved. All that remains is to modify the hyperlink style of the menu and add the following code to css.css: #menu ul li a:link,#menu ul li a:visited {font -weight:bold;color:#666}
#menu ul li a:hover{}
There is no more to say about this. There is nothing more to say. The final effect is as follows:
This The festival is over here, by the way, I will provide you with the materials: