`
shiyanwu
  • 浏览: 6115 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

css 中footer的设置

    博客分类:
  • css
CSS 
阅读更多
#footer {
    margin: 0px auto;
    position: relative;
    background-color: #717F51;
    border-top: 9px solid #F7F7F6;
    width: 692px;
    padding: 5px 0;
    clear: both;
}

Clear属性用于清除浮动,简单点说就是在其左边或右边不允许有任何浮动元素。margin: 0px auto的语法在之前的教程中已经出现过了,其作用就是让页脚在页面中居中显示。为了不让页脚文字和边框贴得太近,我们用padding在上、下空出5px的填充空间

#footer h2 {
    maring: 0;
    text-align: center;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
    color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
    color: #D3D8C4;
    text-decoration: none;
    border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
    color: #F7F7F6;
    text-decoration: none;
    border-bottom: none;
    background-color: #A5003B;
}
分享到:
评论

相关推荐

    CSS Sticky Footer布局,使DOM始终位于页面最下方,不会与上方内容重叠.zip

    在网页设计中,保持页面底部(Footer)始终固定在页面底部,即使页面内容较少时也不与主要内容区域重叠,这种布局方式被称为“CSS Sticky Footer”布局。这种布局模式能够提供良好的用户体验,使得用户在浏览页面时...

    CSS Sticky Footer完美的CSS绝对底部1

    在网页设计中,一个美观且功能完备的布局是至关重要的,特别是当涉及到页面底部(Footer)的处理。CSS Sticky Footer布局方案就是为了解决一种常见问题:当页面内容不足以填满整个视口时,底部会留在屏幕的上方,...

    紧贴底部的页脚CSS绝对底部

    首先,我们需要了解CSS中的定位机制。在CSS中,定位主要有静态、相对、绝对和固定四种方式。对于“紧贴底部”的页脚,我们通常会使用绝对定位或固定定位。绝对定位会相对于最近的非 static 定位的祖先元素定位,而...

    利用CSS使footer固定在页面底部的实例代码

    在网页设计中,保持footer始终固定在页面底部是常见的需求,尤其在内容不足填满整个屏幕时,确保footer不会上浮。本实例将通过CSS实现这一功能,主要涉及的CSS属性包括`margin`, `height`, `min-height`, `position`...

    CSS实现footer“吸底”效果

    在网页设计中,"CSS实现footer“吸底”效果"是一个常见的需求,目的是让页脚在页面布局中始终保持在屏幕的底部,无论内容区域有多还是少。根据描述,有两种主要的理解方式: 1. **固定底部**:无论内容多少,底部...

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

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

    HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_

    在HTML5中,新增了许多元素,如`<header>`、`<footer>`、`<nav>`、`<article>`等,它们提供了更好的语义化,使页面结构更加清晰。此外,`<video>`和`<audio>`元素使得网页可以直接嵌入多媒体内容,不再依赖Flash等...

    京东css_html_京东css规范_css_

    在“jd”这个压缩包中,我们可以找到实现上述概念的HTML和CSS文件。通过分析这些文件,我们可以学习到如何将理论知识应用于实际项目中,同时加深对京东页面设计原则的理解。通过不断地实践和调整,我们可以逐步提高...

    纯css 实现footer 一直在页面底部,不随页面滚动

    在网页设计中,将footer元素固定在页面底部是一个常见的需求,尤其在页面内容不足以填满整个视窗时。传统的做法可能涉及JavaScript或复杂布局的HTML结构,但CSS提供了一种简单而优雅的方式去实现这一布局需求。本...

    footer.css

    footer.css

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    "HTML5和CSS3实战"聚焦于这两个技术的实际应用,提供了一系列实战项目来帮助读者掌握HTML5的新特性,如语义化标签(如、<footer>、等)、离线存储、拖放功能、媒体元素等。此外,通过实际案例,读者将学习如何结合...

    css sticky footer经典布局的实现

    CSS Sticky Footer布局是一种常见的网页设计模式,它的目的是让页脚始终保持在页面的最底部,无论内容区域的内容多少。这种布局方式特别适用于响应式设计,尤其是手机网页,它能确保页面内容较少时,页脚紧贴屏幕...

    纯css实现固定在网页底部菜单导航

    首先,我们需要了解CSS中的定位(Positioning)属性。在CSS中,`position`属性用于定义元素的定位类型。为了使菜单导航固定在底部,我们可以将其设置为`position: fixed`。这将使得元素相对于浏览器窗口进行定位,...

    distrbut_footer_nav.css

    distrbut_footer_nav.css

    footer美化代码

    5. **版权信息和法律条款**:footer中应包含版权声明和法律链接,如隐私政策和使用条款,这不仅是法律要求,也能增加用户的信任感。 6. **背景图像或图案**:如果合适,添加背景图像或图案可以增强footer的视觉效果...

    footer 粘连底部例子

    在粘连底部的实现中,通常会将footer元素的`position`设置为`fixed`,使其相对于浏览器窗口定位,而不是相对于文档流。 2. **`bottom`属性**: 当`position`被设置为`fixed`或`absolute`时,可以使用`bottom`属性...

    非常好看的css布局-深蓝色

    在CSS中,可以使用`background-image`属性来设置背景图,或者用`content`属性在伪元素中插入图片。 `js`目录可能包含JavaScript文件,这些文件用于实现网页的交互功能,如导航菜单的展开和折叠、表单验证、滚动效果...

    不错的CSS效果

    在CSS中,可以使用`background-image`属性将图片设置为元素的背景,或者使用`<img>`标签插入图像。CSS还可以调整图像大小、添加边框、设置透明度等。 在这个压缩包中,学习者可以通过查看和修改`index.html`和`...

Global site tag (gtag.js) - Google Analytics