实现DIV的上、下、左、右、中定位，效果：
代码：
<html>
<head></head>
<style type="text/css">
.divStyle{
position:absolute;
width:100px;
height:100px;
background:red;
color:#fff;
line-height:100px;
text-align:center;
}
#topLeft{left:0;top:0;}
#topMiddle{left:50%;top:0;margin-left:-50px;}
#topRight{right:0;top:0;}
#middleLeft{left:0;top:50%;margin-top:-50px;}
#middleMiddle{left:50%;top:50%;margin-top:-50px;margin-left:-50px;}
#middleRight{right:0;top:50%;margin-top:-50px;}
#bottomLeft{bottom:0;left:0;}
#bottomMiddle{bottom:0;left:50%;margin-left:-50px;}
#bottomRight{bottom:0;right:0;}
</style>
<body>
<div id="topLeft" class="divStyle">topLeft</div>
<div id="topMiddle" class="divStyle">topMiddle</div>
<div id="topRight" class="divStyle">topRight</div>
<div id="middleLeft" class="divStyle">middleLeft</div>
<div id="middleMiddle" class="divStyle">middleMiddle</div>
<div id="middleRight" class="divStyle">middleRight</div>
<div id="bottomLeft" class="divStyle">bottomLeft</div>
<div id="bottomMiddle" class="divStyle">bottomMiddle</div>
<div id="bottomRight" class="divStyle">bottomRight</div>
</body>
</html>
分享到：
相关推荐
本资源包“div+css布局大全”显然是一个全面介绍这一主题的学习资料集合，包含了从基础到进阶的全方位教程。 1. **Div元素**：`<div>`是HTML中的一个通用容器元素，用于组织文档结构。通过CSS，我们可以对`div`进行...
总的来说，“DIV+CSS布局大全”这个资源可能涵盖了从基础概念到高级技巧的全方位教程，包括但不限于基本的HTML和CSS语法、布局模式、响应式设计、选择器使用、盒模型以及各种定位技术。通过系统学习，读者可以逐步...
在"经典DIV+CSS"布局中，CSS通常用于管理网页的布局，如浮动、定位、响应式设计等。 3. **DIV元素**：在HTML中，DIV是一个通用的容器元素，用来组合其他元素，实现页面区域划分。通过CSS，我们可以给DIV定义样式，...
`div`元素常作为容器，通过CSS的`position`属性（如`relative`、`absolute`、`fixed`）配合`top`、`right`、`bottom`、`left`属性，可以实现表格的绝对定位，从而实现浮动表格或其他特殊布局效果。 最后，我们还...
14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17.jquery图文排行混合互相切换效果(仿Vancl效果) 18.jQuery图片插件之...
本套资源的20个章节可能涵盖了从基本概念到实际项目案例的全方位教学。通过这些章节，你可以学习如何创建导航栏、头部、内容区域、页脚等常见网页组件，并了解如何将它们组合成完整的设计。 **总结** 学习"CSS+DIV...
项目的核心任务是对各种美食进行全方位的展示与介绍，使浏览者能够直观了解各种美食的特色与细节，从而激发其兴趣或购买欲望。网站分为多个页面，每个页面均精心设计，以提供最佳的用户体验。 - **核心内容**：美食...
- 对于初学者而言，推荐利用提供的前端学习指南进行系统学习，涵盖了从基础知识到高级技能的全方位内容。 通过以上分析，我们可以看出此项目不仅涵盖了HTML5、CSS3及JavaScript等前端技术的基础应用，还涉及到了...
而“div+css浏览器兼容问题解决方法(PDF版).pdf”很可能提供了一种系统性的解决策略，包括了从设计到实现的全方位指导。 总之，理解并解决CSS样式兼容性和内存泄漏问题是提高网页性能和用户体验的关键。通过深入...
网站内容丰富多彩，不仅包括了各式各样的美食介绍，还有甜品蛋糕、地方特色小吃文化、餐饮文化等多个维度的内容，力求让浏览者能够全方位地了解美食世界。 #### 二、网站描述 该项目中的美食主题网站设计得非常...
在仿猫扑模板中，我们可以看到如何巧妙地利用CSS控制页面布局，如浮动元素、定位技术、盒模型等，实现模块化和响应式设计。学习这个模板，有助于我们掌握这些核心概念，并能应用到实际项目中。 PHPCMS后台系统提供...
本教程集合了从基础到高级的全方位CSS学习资源，旨在帮助读者全面掌握CSS（层叠样式表）这一重要的网页设计语言。CSS是网页布局和美化的核心，通过它我们可以实现网页元素的精准定位、颜色、字体、背景、边框等视觉...
20个章节覆盖了从基础到高级的全方位知识，现在我们来逐一探讨这些知识点。 首先，CSS作为样式表语言，负责定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。它的主要功能包括字体样式设定、颜色控制、...
CSS可以实现对网页元素的精确定位，如浮动、定位、边距等，使得页面结构清晰，加载速度更快，且有利于搜索引擎优化（SEO）。 4. **页面元素**： - **走进我们**：这个页面通常介绍企业的历史、文化、团队等信息，...
### CSS实战学习总结 ...《CSS实战学习总结》一文通过详实的案例分析和实用的技巧分享，为读者提供了从理论到实践的全方位指导，无论是初学者还是有经验的开发者，都能从中获得有价值的启示和帮助。
**CSS2全方位解析** CSS（层叠样式表）2是Web设计中不可或缺的一部分，它为HTML和XML文档提供了丰富的样式控制。CSS2的引入极大地增强了网页的可读性、可维护性和可访问性，使设计师能够更精细地控制网页布局和外观...
首先，网站的题目明确，旨在介绍旅游景点和旅游风景区，同时也包含了家乡介绍，全方位展示地方特色。网站描述强调了网站的核心内容，包括地方简介、地理环境、教育与体育事业、旅游景点等，同时注重访客互动，通过...
源代码中的例子可能包括使用CSS定义字体、颜色、边距、背景等，以及创建浮动元素和定位技术，帮助初学者理解并应用CSS。 4. **表单处理**：网页表单是收集用户信息的重要手段，Dreamweaver MX 2004提供了方便的表单...