绝对居中的层div+css代码示例

绝对居中的层div+css代码示例

以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 11</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
/*  body und schrift deffinitionen */
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#inhalt {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}
p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
--></style>
</head>
<body>
<div id="inhalt">
<p><b>centered</b><br /><br />
This area should be horizontally and vertically centered.<br />
This text stays left aligned<br />
<b>ie mac doesn’t like this! </b><br />
<a href="/">more nice and free css templates</a>
</p>
<p>
<img src="xhtml10.gif" alt="" width="80" height="15" border="0"/><br/>
<img src="css.gif" alt="css" width="80" height="15" border="0"/><br />
</div>
</body>
</html>

以下是HTML网页特效代码，点击运行按钮可查看效果：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

时间： 2024-12-22 21:34:08

绝对居中的层div+css代码示例的相关文章

左右两栏div+css布局示例

左右两栏div+css布局示例 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

全屏的三栏div+css布局示例

全屏的三栏div+css布局示例 以下是代码:<html> <head> <title>Nice and Free CSS Template 7</title> <style type="text/css" media="screen"><!-- /*  body and font definitions */ html { padding:0px; margin:0px; } body { back

标准三栏式div+css固定示例

标准三栏式div+css固定示例 以下是代码:<html> <head> <title>Nice and Free CSS Template 6</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html { padding:0px; margin:0px; } body {

四栏标准DIV+CSS布局示例

四栏标准DIV+CSS布局示例 以下是代码:<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Nice and Free CSS Template 4</title> <style type="text/css" media="sc

请高手指点asp.net中如何加入div+css代码，实现菜单效果

问题描述 问题如下:下面的DIV+CSS代码是一个菜单,想用在asp.net中.大类和小类分别从数据库中循环读取出来,显示在指定位置的aspx页面中,相当于动态添加.便于后期维护.有什么好的方法实现吗?<divclass="wrapper"><divclass="nav-bg"><divclass="nav-list"><ulid="nav"class="nav"&

带滚动条的两栏标准DIV+CSS布局示例

css|标准|示例|滚动条 当窗口收缩时超出层的宽度时会自动出现滚动条... 以下是代码:<html> <head> <title>Nice and Free CSS Template 2a</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html { padding:0p

jquery弹出层div+css实用代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="Conte

三栏式带滚动条自动伸展的DIV+CSS布局示例

自动伸缩效果. 以下是代码:<html> <head> <title>Nice and Free CSS Template 3</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html { padding:0px; margin:0px; } body { backgrou

Android 新手引导蒙层效果实现代码示例

先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLayout比较方便),然后把这个linearlayout的背景设置成#88000000,之后就是给这个linearlayout动态增加子view,初步效果就能达到. 下面直接上代码: public void showGuideView() { View view = getWindow().getDe