实现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例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...
div +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +css
div+css,web标准,div+css布局,div+css实例,div+css模板
div+css div+css精通CSS
div+css手册,比较不错呀!
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
DIV+CSS 源码DIV+CSS
DIV+CSS基础教程全攻略,让你熟练如何更好的掌握DIV+CSS
div+css布局大全 B/S项目表现层也很重要!
基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...
div+css,web标准,div+css布局,div+css实例,div+css模板
DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同...
div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
DIV+CSS简单登录界面模板,DIV+CSS布局,有用户名、密码登录框,登录按钮。
div+css30款后台模板实用div+css30款后台模板实用
DIV+CSS布局:CSS浮动float属性详解 不解释
DIV+CSS教程—十天学会web标准div+css标准之路WORD版.rar 很详细的讲解
div+css做的几套购物网站模板,适用于初学者参考学习的顶级资料。
DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板