`
ITCheng
  • 浏览: 76550 次
  • 来自: 北京
社区版块
存档分类
最新评论

Div屏幕底部居中

    博客分类：
  • Css
htmlcss 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN">
<head>
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar {
position:absolute;
bottom:0px;
right:16px;
width:100%;
height:20px;
text-align:center;
background:#ccc;
z-index:2;
overflow:hidden;
}
</style>
</head>
<body>
<div id="ToolBar">固定在页面底部不动</div>
<div id="Main">
<p><strong>09即将流行的经典语录</strong></p>
<div class="clear">&nbsp;</div>
<div class="info clearfix">
<p class="date">&nbsp;</p>
</div>
<div class="blog_content" id="blog_content">TOP1 <br />
人生的最大遗憾莫过于错误地坚持了不该坚持的，轻易地放弃了不该放弃的&hellip;&hellip; <br />
TOP2 <br />
新式morning call&mdash;&mdash;生前何必久睡，死后自会长眠.　<br />
TOP3 <br />
使你疲劳的不是远方的高山，而且是你鞋里面的一粒砂子. <br />
TOP4 <br />
有时在饭堂排队打饭时最大的欣慰不是前面的人越来越少而是后面等的人越来越多. <br />
TOP5 <br />
逆风的方向，更适合飞翔。我不怕万人阻挡，只怕自己投降. <br />
TOP6 <br />
酒，装在瓶里像水，喝到肚里闹鬼，说起话来走嘴，走起路来闪腿，半夜起来找水，早上起来后悔，中午酒杯一端还是挺美。 <br />
TOP7 <br />
你要不理我我就成包子了&hellip;而且还是天津最有名的&hellip;嘿嘿&hellip; <br />
TOP8 <br />
妈妈说人最好不要错过两样东西，最后一班回家的车和一个深爱你的人. <br />
TOP9 <br />
我问一个在深圳工作了二十年的朋友：&ldquo;如果你死后，你的墓志铭打算写点啥？&rdquo;他说：&ldquo;我解决了住房问题！&rdquo; <br />
TOP10 <br />
那天看到一位大妈在烧纸，边烧边嘟囔着：收到了全都买基金吧~~ TOP11 <br />
学问之美，在于使人一头雾水；诗歌之美，在于煽动男女出轨；女人之美，在于蠢得无怨无悔；男人之美，在于说谎说得白日见鬼. <br />
TOP12 <br />
如果你看到面前的阴影，别怕，那是因为你的背后有阳光. <br />
TOP13 <br />
诸葛亮出山前，也没带过兵!凭啥我就要工作经验？ <br />
TOP14 <br />
本人made in china，出厂日期1981年X月X日，长180cm，净重67kg。采用人工智能，各部分零件齐全，运转稳定，经二十多年的运行，属信得过产品。该产品手续齐全，无限期包退包换。现因发展需要，诚招志同道合者共同研制开发第二代产品，有意者请联系！ <br />
TOP15 <br />
干掉熊猫，我就是国宝！ <br />
TOP16 <br />
我能容忍身材是假的，脸是假的，胸是假的，臀是假的！！！但就是不容忍钱是假的！！！！ <br />
TOP17 <br />
脱机的人永远不知道联机的人等了她多久&hellip;&hellip; <br />
TOP18 <br />
还能冲动，表示你还对生活有激情，总是冲动，表示你还不懂生活. <br />
TOP19 <br />
命运负责洗牌，但是玩牌的是我们自己！ <br />
TOP20 <br />
问世间情为何物，不过一物降一物～ <br />
TOP21 <br />
如果中了一千万，我就去买30套房子租给别人，每天都去收一次房租。哇咔咔~~充实! <br />
TOP22 <br />
上帝欲使人灭亡，必先使其疯狂；上帝欲使人疯狂，必先使其买房. <br />
TOP23 <br />
我们走得太快，灵魂都跟不上了&hellip;&hellip; <br />
TOP24 <br />
问：你喜欢我哪一点？答：我喜欢你离我远一点！ <br />
TOP25 <br />
你看得见我打在屏幕上的字，却看不到我掉在键盘上的泪



</div></body>

</html>

 

分享到：
| foreach循环遍历表格，一行2个
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    例如，顶部行可以设置为固定高度，底部行设置为固定在底部，而中间行则需要动态填充剩余空间并保持内容居中。 为了实现全屏，我们可以设置body和html的height属性为100%，这样可以确保整个页面填满屏幕的高度。然后...

    浮动的div自适应居中显示的js代码

    最后，通过为`window`对象添加`resize`事件监听器，当浏览器窗口大小发生变化时，自动调用`autoWidth`函数来重新计算和定位div元素，确保在任何屏幕尺寸下都能正确居中显示。 需要注意的是，上述代码片段中提到了一...

    DIV始终浮动在页面底部

    在本例中，通过设置DIV元素的`style`属性，使得其具备固定的定位特性，并且宽度填满屏幕。 5. `&lt;table&gt;`元素的布局： - 在DIV内部，使用了`&lt;table&gt;`元素来创建一个表格，用作底部的内容布局。表格中包含多个`&lt;td&gt;`...

    用js 让图片在 div或dl里　居中，底部对齐

    为了使页面更加美观和适应不同尺寸的屏幕，经常需要让图片在指定的容器（如`div`或`dl`）内水平垂直居中，并且底部对齐。本文将详细介绍如何通过JavaScript来实现这一功能，并确保该方法在主流浏览器（如Firefox和...

    网页底部浮动导航条

    网页底部浮动导航条是网页设计中的一个重要元素，它通常位于页面的最下方，始终保持在用户的视线范围内，即使用户滚动页面也不会消失。这种设计可以提供便捷的用户体验，使用户能够快速访问网站的主要链接或功能，...

    让某一个div固定在屏幕中的解决方法

    `使得`div`元素距离屏幕底部40像素，右侧20像素。 除了定位属性，示例代码还包含了一些其他CSS样式，如`width`、`height`用于设置元素的宽高，`background-color`定义背景颜色，`border`设置边框，`text-align`控制...

    vue开发移动端底部导航条功能

    `g-footer-container`的样式定位了底部导航条，使其始终固定在屏幕底部，并设置了适当的阴影效果以增强视觉层次感。 接着，我们关注`src/components/tabbar/index.vue`文件，这是`Tabbar`组件的定义。这个组件包含...

    Div+CSS布局入门教程(一二三四)

    Div+CSS布局的优点还包括响应式设计，通过媒体查询可以轻松适应不同设备的屏幕尺寸。 继续学习Div+CSS布局，你将能够创建复杂而美观的网页布局，实现灵活的设计效果。在实践中不断尝试和优化，你将逐渐熟练掌握这项...

    div分块和css

    - **`#container`:** 定义了页面的主要容器，设置了居中对齐、背景颜色和宽度。 - **`#header`:** 设置了顶部区域的样式，包括外边距和内部`h1`标签的样式。 - **`#left`:** 左侧栏的样式设置，包括背景色、宽度...

    Div+Css实例源代码

    &lt;div id="footer"&gt;网站底部&lt;/div&gt; ``` 在这个例子中，"header"、"content"和"footer"分别代表了网页的头部、主体内容和底部，这样的结构便于我们进行模块化的布局设计。 二、CSS基础 CSS是控制网页外观和布局的...

    html5移动端底部固定菜单

    在HTML5中，我们可以利用现代Web技术来创建这种响应式的底部菜单，使其能适应不同屏幕尺寸的变化。下面我们将详细探讨如何实现一个HTML5移动端底部固定菜单。 首先，我们需要理解HTML5的基础结构，它通常包含`&lt;!...

    一个有用的DIV入门实例

    我们创建了一个名为"Container"的主Div，作为页面的容器，然后在这个容器内嵌套了其他Div，分别代表"Header"（头部）、"PageBody"（主体）、"Sidebar"（侧边栏）和"Footer"（底部）。 HTML代码的编写是实现布局的...

    如何用CSS让文字居于div的底部

    在网页设计中，有时我们需要将文字放置在div元素的底部，以便实现特定的布局效果，如对话框、脚注或版权...此外，这种方法对于响应式设计也相当友好，因为我们可以使用媒体查询来适应不同屏幕尺寸下的底部对齐需求。

    CSS中position属性之fixed实现div居中

    实现`fixed`定位的div居中，通常需要结合使用`margin`属性。以下是一个简单的例子： ```css .centered-div { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height...

    Div+CSS布局入门

    `#container`设置宽度为100%，确保Div覆盖整个屏幕。 通过以上步骤，一个基本的Div+CSS布局框架就建立起来了。开发者可以根据需求继续添加更多的CSS规则来完善页面的样式，如边距、内边距、边框、文字样式等。同时...

    用div+css布局十步入门

    4. **居中显示**：通过设置`margin: auto`使页面容器水平居中。 5. **消除浏览器默认边距和填充**：在CSS中清除`html`和`body`的默认边距和填充。 **第三步：划分网页区域** 1. **创建五个div**：将规划的五个部分...

    使用绝对定位+负外边距让DIV层水平垂直居中页面

    总结来说，通过绝对定位和负外边距的组合，我们可以实现一个DIV层在页面中的水平垂直居中，同时配合JavaScript监听窗口大小变化，可以确保元素在任何屏幕尺寸下都能保持居中。这种方法虽然需要一些额外的CSS和...

    css+div简单布局的方法

    1. **响应式设计**：为了适应不同设备屏幕尺寸，建议采用媒体查询（Media Queries）来调整布局。 2. **简化CSS代码**：可以考虑使用预处理器如Sass或Less，以及CSS框架（如Bootstrap）来简化和组织CSS代码。 3. **...

    让DIV一直固定在屏幕的某个位置示例代码

    ` - 这些值决定了`&lt;div&gt;`距离屏幕底部和右边的距离，使得它固定在屏幕的右下角。 5. `border: 8px double #06F867;` - 定义了一个8像素宽的双线边框，颜色为#06F867。 6. `text-align: center;` - 使`&lt;div&gt;`内部的...

    CSS+DIV布局教程

    CSS代码主要定义了各个&lt;div&gt;元素的宽度、居中对齐、高度和背景色，从而实现预设的布局。例如，`#container`设置了100%的宽度，使其占据整个浏览器宽度。而`#Header`、`#PageBody`和`#Footer`则分别设定了固定的宽度...

Magicbox
Global site tag (gtag.js) - Google Analytics