`
yansj1997
  • 浏览: 8092 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

footer居底

阅读更多

结构部分:

<div class="container">
    <div class="header">header</div>
    <div class="center">
        <p>我是个好人我是个好人我是个好人我是个好人</p>
        <p>我是个好人我是个好人我是个好人我是个好人</p>
        <p>我是个好人我是个好人我是个好人我是个好人</p>
        <p>我是个好人我是个好人我是个好人我是个好人</p>
        <p>我是个好人我是个好人我是个好人我是个好人</p>
        <p>我是个好人我是个好人我是个好人我是个好人</p>
        <p>猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪</p>
    </div>
    <div class="footer">
        <p>footerfooterfooterfooterfooterfooter</p>
    </div>
</div>

 样式部分:

.container{
    position: relative;
    min-height: 100%;
}
.center{
    padding-bottom: 50px;
}
.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

 

分享到:
评论

相关推荐

    页面布局,实现footer永远在底部

    首先,将body和container元素设置为相对定位,然后将footer设置为绝对定位,并将其底部与容器底部对齐。这种方法适用于内容较少的情况。 ```css body, .container { position: relative; min-height: 100%; } ....

    footer始终位居底部

    footer 信息始终居底部对齐,长内容时在内容底部,内容不满一屏始终居底部,纯 css3+html5实现,不兼容低版本浏览器!适用于移动开发页面!

    居底部显示

    在网页设计中,"居底部显示"通常是指将某些元素如页脚(footer)固定在浏览器窗口的底部,无论页面内容如何滚动,这部分始终保持在视口的底部。这种布局方式在现代网页设计中非常常见,它能提供一致的用户体验,让...

    html5宽屏大气响应式智能家居公司网站模板

    底部(footer)包含版权信息和联系链接。 6. **压缩包子文件的文件名称列表**: "Zp_demo.demohuo.top_89"可能是一个压缩包文件,其中包含了HTML文件、CSS样式表、JavaScript脚本、图像资源和其他相关文件,这些...

    家居生活模板下载

    提及的“网站模板界面设计”和“网页设计元素”,它们包含了现代网页设计的核心组件,如头部(Header)、导航(Navigation)、内容区域(Content)、侧边栏(Sidebar)以及底部(Footer)。这些部分共同构成了网站的...

    家居购项目-准备工作-一系列资源文件

    例如,`&lt;header&gt;`用于头部导航,`&lt;section&gt;`用于划分不同的内容区域,`&lt;article&gt;`用于展示商品信息,`&lt;footer&gt;`则用于底部版权信息。 3. 图片和媒体:HTML可以插入图片(`&lt;img&gt;`标签)、视频(`&lt;video&gt;`标签)和...

    网页课程设计&毕业设计_木纹背景宽屏家居行业html5模板5605.zip

    6. **底部(Footer)**:包含版权信息、联系我们、社交媒体链接等,使用&lt;footer&gt;标签标记。 7. **响应式布局**:考虑到移动设备的普及,模板应具备响应式设计,通过媒体查询调整不同设备上的布局和样式。 8. **SEO...

    创意家居工艺网页模板

    网页模板通常包括头部(Header)、导航栏(Navigation)、主体内容(Main Content)、侧边栏(Sidebar)、底部(Footer)等部分。在这个模板中,可能会有专门的区域用于展示家居工艺品的高清图片,配合详细的产品...

    深灰绿模块化家居空间网页模板

    通过合理地使用HTML标签,如`&lt;head&gt;`、`&lt;body&gt;`、`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`和`&lt;footer&gt;`等,可以构建出结构清晰、语义明确的网页。 此外,提供的链接文件“下载字体.url”、“下载...

    家居html5单页网站模板

    可以使用`&lt;footer&gt;`标签进行标记。 7. **动画效果**:HTML5与CSS3结合,可以创建平滑的过渡、滑动效果和动画,提升用户体验,比如使用`transition`和`animation`属性。 8. **SEO优化**:使用正确的元数据(如`...

    家居网全套完整页面.rar

    2. **页面结构**:在家居网的全套页面中,通常会包含头部(header)、导航(navigation)、主体内容(main content)、侧边栏(sidebar)、底部(footer)等部分。这些部分通过HTML标签进行定义,比如、、、和...

    教你如何把切割好的html页面转换成可供DIY的页面归纳.pdf

    --{subtemplate common/footer}--&gt;`替换原有底部,以保持页面结构的一致性。 完成上述步骤后,基本的模板改造就完成了。接下来,将改造好的文件放入系统目录中。例如,将HTML文件改名为`list_home.htm`,并将其放置...

    div+css网站前台工程师设计之路必修.pdf

    然后设置`#banner`的高度,以及通过浮动元素(`float: left`和`float: right`)让`#content`居左,`#links`居右。为了使`#links`位于`#content`右侧,需要通过负margin和padding来调整元素的位置。 - `#content`的...

    DIV+CSS的书写格式.docx

    中部居右内容 &lt;div id="footer"&gt;底部版权内容 &lt;/div&gt;` 注意上面的代码缩进,父级与子级有相对缩进。一般缩进 4 个空格字符半角英文位置。 CSS 书写格式 好的 CSS 书写格式可以带来维护和制作上方便。可以...

    教你如何把切割好的html页面转换成可供DIY的页面.pdf

    --{subtemplate common/footer}--&gt;`,保持网站的统一性。 5. 文件目录和命名规范:将改造后的HTML文件移动到正确的系统目录,并遵循特定的命名规则,例如将`index.html`改名为`list_home.htm`,并创建对应的图片和...

    DIV+CSS布局网站主页及DIV命名-领创教育.docx

    3. 对齐方式:页面一般居中显示,特殊情况可调整为居顶或居左。 4. VI标准化:Logo通常是GIF格式,尺寸为88x31像素,大小小于7KB,字体一般采用中文宋体,字号12px和14.7px。 通过遵循这些原则和规范,可以创建出...

    discuz论坛门户教程

    - 底部内容的修改路径:“template/tuan5156/common/footer.htm”。 ##### 4. 插件安装 - 插件文件位于“source/plugin”文件夹中。 - 可以在后台自由选择安装所需的插件。 ##### 5. 论坛版块建立 - 在后台建立...

    accp 7.0 凡客优品

    同时,为了提升用户体验,还会运用HTML的语义化标签,如、、、、、&lt;footer&gt;等,使页面结构更加清晰,有利于搜索引擎优化(SEO)。 在北大青鸟7.0的课程中,学员们通过“凡客优品”项目实践,学习如何使用HTML进行...

    前端入门 HTML+css实现静态淘宝

    例如,你可以用`&lt;header&gt;`标签表示页面头部,`&lt;nav&gt;`标签构建导航栏,`&lt;section&gt;`或`&lt;article&gt;`标签组织主要内容,`&lt;aside&gt;`表示侧边栏,以及`&lt;footer&gt;`标签来定义页脚。 CSS,即Cascading Style Sheets,用来控制...

Global site tag (gtag.js) - Google Analytics