实现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提供了方便的表单...