一个简单的css+div布局实例，让你很明了的了解怎么布局！
分析它的结构，有以下几个部分：黑色的头部，蓝色的主体，拆分成红色的变蓝，和右边的导航及主体部分，最下面的黄色是底部，结构相当简单，现在开始写它的css了，
定义最上面的黑色为header：
复制代码
- #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
|
然后中间的蓝色主体叫mainbox吧，那么样式表可以写：
复制代码
- #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
|
以此定义其他如下：
复制代码
- #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;} /*******上右下左*******/
- #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
- #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
- #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
|
说明：margin右边的四个值分别对应上右下左，比如menu距下是5px，content距上是4px，所以中间有9px的间距了，而先定义了menu的高位30px，所以content若想和sidebar对齐，则应该定义高度为400-30-4-5=361.上面完成了<style>部分的内容，下面把对应的div放到body中就可以了，
复制代码
- <BODY>
- <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
- <div id="mainbox">
- <div id="sidebar">
- </div>
- <div id="menu">4323434</div>
- <div id="content">
- <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>
- </div>
- </div>
- <div id="footer">这里是foot部分，放置版权啥的</div>
- </BODY>
|
刷新发现，是如图效果，但是，所有的div都是靠左边，怎么才能居中呢？？原因是我们没有定义body里元素的位置，所以css里加上：
这样就大功告成了！
完整的页面就是：
复制代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <style tpye="text/css">
- <!--
- body{text-align:center;} /***********这个是限定主面的居中效果，如果没有，默认在左侧显示*********/
- #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
- #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
- #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;} /*******上右下左*******/
- #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
- #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
- #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
- -->
- </style>
- </HEAD>
- <BODY>
- <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
- <div id="mainbox">
- <div id="sidebar">
- </div>
- <div id="menu">4323434</div>
- <div id="content">
- <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>
- </div>
- </div>
- <div id="footer">这里是foot部分，放置版权啥的</div>
- </BODY>
- </HTML>
|
更多div+css布局，可以来
http://www.cndorm.com/html/117/这里交流
分享到：
相关推荐
本资源"27款后台管理页面设计+DIV+CSS（完整版）"提供了丰富的实例，旨在帮助开发者和设计师更好地理解和实践后台管理界面的设计原则和技巧。下面将详细探讨这些知识点： 1. **后台管理页面设计**：后台管理系统是...
【div+css】是网页布局的常见方法。`<div>`元素是一个通用容器，可以包含其他HTML元素。通过CSS，我们可以为`div`设置样式，实现复杂的页面布局，如网格系统、响应式设计等。这些实例可能包含了使用`div`元素进行...
标题中的“27款后台管理页面设计+DIV+CSS”表明这是一个包含27个不同设计的后台管理系统模板的集合，这些模板主要基于HTML的结构标签`DIV`和样式表语言CSS进行构建。`DIV`元素在网页布局中起着至关重要的作用，它...
因此，人们常常将DIV与CSS搭配使用，这也诞生了一个在业界广泛流传的术语——DIV+CSS布局。 然而，这个说法其实并不准确。在专业领域中，更为准确的表述应该是xHTML+CSS。xHTML（可扩展超文本标记语言）是一种更为...
【描述】: "本文旨在探讨CSS布局中的一列布局技术，通过实例解析如何利用DIV+CSS实现单列网页设计，适合初学者及需要进阶理解网页布局的开发者参考。" 在网页设计中，布局是构建网页结构的关键部分，它决定了网页...
- **统一的样式风格**: 使用Div+CSS技术确保整个网站的布局一致且不混乱。 - **导航菜单**: 设计美观且醒目的菜单，并支持二级菜单的正常弹出与跳转。 #### 2. 多媒体元素 - **图片轮播**: 利用JavaScript实现定时...
- **设计要求**: 设计需采用DIV+CSS布局，确保页面布局整洁、美观，同时要求包含丰富的多媒体元素，如图片、视频、音频等，以及交互性功能，如表单提交、动态轮播等。 - **技术栈**: 使用HTML5、CSS3和原生...
- **DIV+CSS布局**: DIV元素用来定义文档中的独立块级区域，CSS则用来设置这些区域的样式，是现代网页布局的标准方法。 - **页面结构**: 包括页头、菜单导航栏、中间内容区、页脚四部分。良好的页面结构有助于提高...
总结来说，"学校网站静态界面"是一个展示`div+css`基础应用的实例，通过这个案例，我们可以了解网页布局的基本原理，并从中探索更高级的网页设计技巧，如媒体查询、过渡和动画效果、Flexbox或Grid布局等。...
7. **DIV+CSS布局大全.pdf**：PDF文档专注于使用CSS进行网页布局，特别是基于DIV的布局技巧。通过实例，展示了如何利用CSS实现响应式、流式、网格等多种布局模式，对于网页设计师尤其有价值。 通过这些资源的学习，...
- **概念**：DIV+CSS是一种布局页面的方法，简称DIV CSS布局。它通过CSS样式控制DIV盒子的位置和样式来达到页面布局的目的。 - **优势**： - **重用性**：CSS的重用性强，便于维护和更新。 - **灵活性**：可以...
【压缩包子文件的文件名称列表】仅有一个名为"a.txt"的文件，这可能是一个文本文件，里面包含了教程的文字内容，例如HTML和CSS的基本语法讲解，实例代码，或者是学习步骤和提示。 HTML是网页设计的基石，它通过各种...
#### 1.1 DIV+CSS布局 - **概念**：DIV+CSS是一种布局页面的方法，它利用HTML中的div标签进行区块划分，并通过CSS（层叠样式表）对这些区块进行定位、样式设置等。 - **优势**： - **简洁性**：使用DIV+CSS布局可以...
标题“如何用H5实现一个触屏版的轮播器的实例”和描述“本篇文章主要介绍了如何用H5实现一个触屏版的轮播器，小编觉得挺不错的，现在分享给大家，也给大家做个参考”中指明了文章的主题和目的，即指导读者如何不借助...
总的来说，【静态服装网站】项目是一个非常适合初学者的实践案例，它涵盖了网页设计的基础知识，包括Div+CSS布局、网页内容组织和简单的视觉设计。通过这个项目，学习者可以快速入门网页制作，并逐步提升自己的前端...
#### 1.2 网站描述：采用DIV+CSS布局 - **DIV+CSS**：这是当前网页布局的主要技术之一。通过使用`<div>`标签来划分页面的不同部分，并利用CSS来定义这些部分的外观和布局，从而实现页面的响应式设计和良好的视觉...